Vad är HTML-attribut och hur använder du dem rätt?

24 mars 2026 David Eriksson 0

Varje HTML-element har en uppsättning attribut som styr dess beteende, utseende och relation till andra element. Men trots att attribut är något du använder dagligen — class, id, href, src — finns det nyanser och mindre kända attribut som kan göra din HTML både renare och mer funktionell.

Här går vi igenom vad HTML-attribut faktiskt är, vilka som finns tillgängliga, och hur du använder dem på rätt sätt för bättre tillgänglighet, prestanda och SEO.

Vad är ett HTML-attribut?

Ett HTML-attribut är ett namn-värde-par som skrivs i öppningstaggen för ett element. Det ger webbläsaren extra information om hur elementet ska bete sig eller visas. Syntaxen ser ut så här:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Besök Example
</a>

I det här exemplet har <a>-elementet tre attribut: href som anger länkens mål, target som styr var sidan öppnas, och rel som beskriver relationen till den länkade resursen. Attributnamnet står till vänster om likhetstecknet, värdet till höger inuti citattecken.

Globala attribut i HTML

Vissa attribut kan användas på alla HTML-element, oavsett typ. De kallas globala attribut och de viktigaste är:

class — kopplar elementet till CSS-klasser och JavaScript. Ett element kan ha flera klasser separerade med mellanslag. id — ger elementet en unik identifierare inom sidan. Används för CSS, JavaScript och fragment-länkar (#sektion). style — tillåter inline-CSS direkt på elementet, men bör undvikas i produktionskod. title — visar en tooltip vid hover. data-* — custom-attribut för att lagra data som JavaScript kan läsa.

Booleska attribut – HTML-taggar utan värde

En kategori som ofta skapar förvirring är booleska attribut. De är attribut som antingen är närvarande eller frånvarande — de har inget värde som spelar roll. disabled, required, checked, readonly och hidden är alla booleska:

<!-- Alla dessa är ekvivalenta: -->
<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="disabled" />

<!-- Det enda som INTE fungerar: -->
<input type="text" disabled="false" />  <!-- Fortfarande disabled! -->

Det sista exemplet är en vanlig fälla. Att skriva disabled="false" inaktiverar inte attributet — webbläsaren bryr sig bara om attributets närvaro, inte dess värde. Vill du ta bort ett booleskt attribut dynamiskt behöver du göra det via JavaScript med element.removeAttribute('disabled').

HTML-attribut för bättre tillgänglighet

ARIA-attribut (Accessible Rich Internet Applications) fyller i luckorna där standard-HTML inte räcker till. Men den viktigaste principen är: om det finns ett inbyggt HTML-attribut eller -element som löser problemet, använd det istället för ARIA.

Några av de mest användbara tillgänglighetsattributen:

<!-- alt: obligatoriskt på bilder, beskriver innehållet -->
<img src="diagram.png" alt="Flödesschema som visar hur en HTTP-request hanteras" />

<!-- aria-label: ger ett namn till element utan synlig text -->
<button aria-label="Stäng dialogruta">
  <svg><!-- ikon --></svg>
</button>

<!-- aria-hidden: döljer dekorativa element för skärmläsare -->
<span aria-hidden="true">★</span>

<!-- role: definierar elementets semantiska roll -->
<div role="alert">Formuläret kunde inte skickas.</div>

alt-attributet på bilder är det mest grundläggande tillgänglighetsattributet som finns. Tomma alt=""-attribut är korrekta för rent dekorativa bilder — det signalerar till skärmläsaren att bilden ska ignoreras. Att helt utelämna alt är däremot alltid fel.

Deprecated HTML-attribut att undvika

Äldre HTML-versioner hade attribut som align, bgcolor, border och font för visuell styling. De fungerar fortfarande i webbläsare men är deprecated sedan HTML5 — all presentation ska hanteras med CSS istället. Att använda dem i modern kod ger validerings-varningar och signalerar till andra utvecklare att koden inte är uppdaterad.

Även attributet type="text/javascript" på <script>-taggar är onödigt sedan HTML5 — JavaScript är standard och behöver inte anges explicit.

Attribut för prestanda och laddning

HTML5 introducerade flera attribut som direkt påverkar sidans laddningsprestanda. De kräver ingen JavaScript och bör vara del av din standardverktygslåda:

<!-- Lazy loading: ladda bilden först när den är nära viewporten -->
<img src="bild.jpg" alt="Beskrivning" loading="lazy" />

<!-- Preload: säg till webbläsaren att en resurs behövs snart -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

<!-- Async/defer: styr hur script laddas och körs -->
<script src="analytics.js" async></script>  <!-- Laddar parallellt, kör direkt -->
<script src="app.js" defer></script>        <!-- Laddar parallellt, kör efter DOM -->

<!-- Fetchpriority: prioritera viktiga resurser -->
<img src="hero.jpg" alt="Hero-bild" fetchpriority="high" />

Skillnaden mellan async och defer är avgörande. async kör scriptet så fort det laddats klart, oavsett om HTML-parsern är färdig eller inte. defer väntar tills hela dokumentet parsats. För de flesta scripts som interagerar med DOM:en är defer det rätta valet.

fetchpriority="high" är relativt nytt och talar om för webbläsaren att en resurs — typiskt hero-bilden eller LCP-elementet — ska prioriteras i laddningskön. Det kan ge en märkbar förbättring av Core Web Vitals utan någon annan optimering.

Data-attribut: HTML-elementens egna variabler

data-*-attribut låter dig lagra godtycklig data direkt på HTML-element, som JavaScript sedan kan läsa via dataset-API:et:

<button class="product-btn" data-product-id="42" data-price="299">
  Lägg i varukorg
</button>

<script>
  document.querySelector('.product-btn').addEventListener('click', (e) => {
    const productId = e.target.dataset.productId;  // "42"
    const price = e.target.dataset.price;            // "299"
    addToCart(productId, price);
  });
</script>

Notera att HTML-attributet data-product-id (med bindestreck) blir dataset.productId (camelCase) i JavaScript. Det är en automatisk konvertering som DOM-API:et gör.

Data-attribut kan också användas som CSS-selektorer, vilket är praktiskt för tillståndsstyrd styling utan JavaScript-klasstogglar:

[data-status="active"] {
  border-color: #16a34a;
}

[data-status="inactive"] {
  opacity: 0.5;
}

Sammanfattning

HTML-attribut gör mer än att koppla klasser och ange länkar. Booleska attribut som disabled och hidden kräver att du förstår att deras blotta närvaro aktiverar dem — disabled="false" fungerar inte som du tror. Tillgänglighetsattribut som alt, aria-label och role gör sidan användbar för alla. Prestandaattribut som loading="lazy", defer och fetchpriority förbättrar laddningstider utan extra JavaScript. Och data-*-attribut ger dig ett rent sätt att koppla data till element utan att smutsa ner HTML:en med JavaScript-logik.