Semantiska taggar: header, nav, main, article och footer

Semantisk HTML använder element som beskriver innehållets betydelse, inte bara dess utseende. <article> säger "detta är ett fristående innehållsstycke". Ett generiskt <div> säger ingenting.

Tidiga webbutvecklare byggde layouter helt med elementen <div> och <span>. Skärmläsare kunde inte skilja navigering från innehåll eller annonser. Sökmotorer var tvungna att gissa sidans struktur.

Elementet <header> innehåller inledande innehåll för sidan eller ett avsnitt: vanligtvis logotyp, webbplatsens namn och navigering. En sida kan ha flera sidhuvuden – ett för webbplatsen och ett per artikel.

Använd <nav> för att omsluta uppsättningar av navigeringslänkar: huvudmenyn, en brödsmulenavigering eller en innehållsförteckning. Skärmläsare meddelar nav-landmärken så att användare kan hoppa direkt till eller förbi dem.

Det ska finnas exakt ett <main> per sida. Det innehåller det dominerande innehållet som är unikt för sidan – inte återkommande element som navigering eller sidfot. Hjälpmedel låter användare hoppa direkt till main.

<article> omsluter innehåll som är begripligt på egen hand och kan återpubliceras: ett blogginlägg, en nyhet, en användarkommentar eller ett produktkort. Fråga: "Skulle detta vara begripligt om jag kopierade det till en annan webbplats?"

<section> grupperar relaterat innehåll som hör ihop – kapitel, flikar eller ämnesområden. Varje sektion har vanligtvis en rubrik. Om innehållet kan stå på egna ben använder Ni article i stället.

<aside> innehåller innehåll som har en lösare koppling till det omgivande innehållet: sidopaneler, citat, annonser eller relaterade länkar. Skärmläsare presenterar det som ett kompletterande landmärke.

<footer> innehåller information om elementet som omsluter det: upphovsrättsmeddelanden, kontaktlänkar och relaterade dokument. Precis som header kan en sida ha flera sidfötter.

Använd rubriker för att skapa en logisk dokumentstruktur. Det ska bara finnas en <h1> per sida. Underrubriker använder h2, undernivåer använder h3 och så vidare. Hoppa inte över nivåer och använd inte rubriker enbart på grund av deras visuella storlek.

Sökmotorer använder den semantiska strukturen för att förstå sidans innehåll – en sida med korrekta landmärken och rubrikhierarki rankas ofta bättre. Användare av skärmläsare navigerar med hjälp av landmärken och rubriker, vilket gör semantik till en direkt tillgänglighetsfråga.

Använd <header>, <nav>, <main>, <article>, <section>, <aside> och <footer> för att ge dokumentet en struktur som webbläsare, sökmotorer och skärmläsare förstår.