CSS

Semantiska strukturelement i HTML5

Innehållet på en webbsida följer i allmänhet en viss struktur, det finns ett sidhuvud högst upp, en sidfot längst ned på sidan, en separat navigationsmeny, olika artiklar, kanske olika faktarutor, och så vidare.

Traditionellt har utvecklare löst det genom att använda <div>-element med olika klassnamn för de olika delarna av en sida, <div class="header">, <div class="footer">, <div class="nav"> med flera, vilket fungerat bra (och fortfarande fungerar alldeles utmärkt). I och med HTML5 infördes dock ett antal semantiska element för organisation av innehållet på en sida, dessa funkar i princip som divar, men gör det tydligt även för maskiner vad som är vad på en sida. Det går bra att använda flera av samma slag på en sida.

Elementen är inte obligatoriska, men kan bidra till att en sidas blir mer begriplig.

Vanliga semantiska strukturelement i HTML (HTML5)

Element Förklaring
<header> Ett sidhuvud eller ett artikelhuvud
<footer> En sidfot, det som står längst ned på sidan
<main> Sidans huvudinnehåll
<nav> Ett block med navigation av något slag, oftast en meny
<article> En artikel på sidan
<section> Ett särskilt avsnitt i en artikel eller på en sida. Det finns exempel på både användning av <section> inuti <article> och <article> inuti <section>. Bra till exempel för kapitelindelning.
<aside> Innehåll som är åtskilt från annat på sidan, t.ex. en faktaruta eller liknande

Det här är några av de vanligaste semantiska strukturelementen i HTML, men det finns fler. Du kan läsa mer på W3Schools, eller hos WHATWG