Semantisk HTML

Skillnaden i praktiken

En <div class="text-2xl font-bold">Priser</div> och en <h2>Priser</h2> ser identiska ut med rätt CSS. För en webbläsare som ritar pixlar är de likadana. För allt annat är de det inte. En skärmläsaranvändare kan hoppa mellan rubriker, men inte mellan feta divar. En sökmotor bygger en innehållsstruktur av h1–h6. En språkmodell som ska plocka ut ett svar använder rubriken för att avgöra vad stycket under handlar om.

Elementen som gör det mesta av jobbet är få: header, nav, main, article, section, aside och footer för sidstruktur, h1–h6 i ordning för hierarki, ul, ol och dl för listor, table med th för tabelldata, samt button för sådant som gör något och a för sådant som leder någonstans.

Varför det spelar större roll nu än förr

Sökmotorer har länge använt struktur som signal. AI-assistenter höjde insatsen, eftersom förmågan att plocka ut ett citerbart stycke bygger på att kunna se var ett avsnitt börjar och slutar. En sida byggd av nästlade divar med visuell formatering ger ingen sådan gräns, så den som extraherar citerar fel stycke eller hoppar över sidan. Ren struktur i kombination med schema markup ger både en maskinläsbar disposition och uttrycklig metadata.

Tillgänglighet är samma argument med juridisk skärpa: inom EU omfattas många konsumentnära digitala tjänster av tillgänglighetsdirektivet från juni 2025, och inbyggda element är den billigaste vägen dit.

De vanliga misstagen

Att använda en div med onclick i stället för en button – den går inte att fokusera, inte att styra med tangentbord och annonseras inte som en kontroll. Att hoppa över rubriknivåer av utseendeskäl i stället för att ändra formatering. Flera h1 utan en tydlig huvudrubrik. Och att ta till ARIA-attribut för att lappa semantik som ett vanligt element hade gett gratis – den första ARIA-regeln är att låta bli när ren HTML räcker.