# Semantisk HTML

> Semantisk HTML innebär att man använder element som beskriver vad innehållet är i stället för hur det ser ut: en rubrik som h2, en lista som ul, navigering i…

Source: https://northerngo.com/sv/ordlista/semantisk-html/
Language: sv
Updated: 2026-08-28

---
**Semantisk HTML innebär att man använder element som beskriver vad innehållet är i stället för hur det ser ut: en rubrik som h2, en lista som ul, navigering i ett nav-element. Skärmläsare, sökmotorer och AI-system använder den strukturen för att förstå sidan, eftersom en formaterad div inte säger dem någonting.**

### 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](/sv/ordlista/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.

---

NorthernGo är en AI-driven plattform för att bygga produktionsklara webbappar utan kod. Lokal AI-generering via WebGPU är obegränsad och gratis, och du äger all genererad källkod. https://northerngo.com/
