Semantisk HTML: En guide för nybörjare

Vad är semantisk HTML?

Semantisk HTML handlar om att beskriva innehållet och strukturen på en webbsida genom att använda rätt HTML-element vid rätt tillfälle.

För vem beskriver vi innehållet? – User agents.

Vad är en user agent? – Allt som är icke-seende. Exempelvis webbläsare, skärmläsare och botar. Mer om varför detta är viktigt kommer senare i inlägget.

För att förstå semantiskt HTML bättre kan vi ta ett trähus som analogi.

Du har golv, väggar, tak, dörrar och trappor. Du skulle kunna byta ut alla dessa ord mot “sammansättning av plankor” och fortfarande ha rätt – men du tappar då betydelsen och funktionen för respektive del:

• Ett golv går vi på.
• En dörr kan öppnas och stängas.
• En trappa tar oss upp och ner.

På samma sätt är det med semantiskt HTML. Genom att använda rätt element på rätt plats vid rätt tillfälle så informerar vi automatiskt om elementets betydelse och funktion:

• En knapp klickar vi på.
• En länk tar oss till en annan sida.
• Ett input-fält fyller vi i.

Så istället för att använda en div till allt du gör, så kan du på lämpliga ställen byta ut det mot, header, section, button och så vidare.

Exempel på semantiska element

De allra flesta HTML-element är semantiska. Några av de vanligaste elementen som du säkert har stött på är följande:

• H1 till H6
• header
• footer
• article
• section
• button.

Exempel på icke-semantiska element

Några typiska element som saknar semantik är <div> och <span>. När en user agent ser dessa tänker den “jaha…?”.

Det betyder dock inte att du aldrig får använda dessa element, men var medveten om att de är generiska och använd de på rätt plats.

Varför ska jag använda semantisk HTML?

Semantisk HTML är det enda sättet som user agents kan förstå din webbplats. Om du hoppar över det så har du samtidigt uteslutit en stor användargrupp från din webbplats.

Som nämnt tidigare kan en user agent var t.ex. en webbläsare, en skärmläsare eller en bot.

Nedan är tre konkreta anledningar till varför du ska använda semantisk HTML.

Förbättrad tillgänglighet

Föreställ dig att du blundar och någon visar dig en bild. Hur ska du uppfatta vad bilden föreställer när du inte ser något?

För att “se” bilden behöver någon förklara för dig vad bilden föreställer; Höga berg och djupa dalar med klarblå himmel och grönska. Det är samma sak med semantiskt HTML — vi förklarar för user agents vad sidan innehåller rent strukturellt; länkar, listor, rubriker, formulär etc.

Blida och synskadade personer är beroende av skärmläsare som läser upp innehållet för att överhuvudtaget kunna använda webben. Och för att en skärmläsare ska förstå vad sidan handlar om behöver du som utvecklare beskriva sidan i form av korrekta HTML-element.

Det gäller allt ifrån ren text till interaktiva element och grafiska objekt. Allt ska beskrivas så gott det går.

Förbättrad SEO

Om du vill att ditt innehåll ska ranka högt behöver sökmotorernas botar förstå din webbplats.

En bot söker igenom och indexerar alla webbplatser för att kunna ge relevanta resultat för en specifik sökning. Sökord som du har på webbplatsen gör bäst nytta när de ligger i semantiska element – främst h1 till h6.

Om din webbplats är svårtolkad så kommer det även bli svårt för dig att ranka högt.

Tydligare kod

Det blir lättare att läsa och underhålla koden om allt innehåll är uppmärkt för vad det är. Det är även mindre risk för sura miner när du jobbar i ett projekt med andra människor där alla gör likadant – d.v.s. följer standarden.

Det tvingar dig även att tänka till när du skriver din kod. Om du inte vet vad varje sektion handlar om så kommer ingen annan göra det heller.

Hur skapar jag semantiskt HTML?

Funktion före design

Det första du behöver gör att att lära dig vilka HTML-element som finns och vad de är till för.

Det sämsta du kan göra att bara använda dig av <div>-taggar och styla de så att de ser ut som rubriker, listor, länkar, knappar etc. Lika illa är det att använda HTML-taggar enbart för hur de ser ut visuellt.

HTML-taggarna ska alltid användas utifrån dess funktion. Utseendet kan du fixa senare med CSS.

Du behöver inte nöta in alla element i ett svep – för det finns jättemånga. Istället kan du fokusera på några av de vanligaste:

• <h1> till <h6>
• <header>
• <footer>
• <main>
• <article>
• <section>
• <nav>
• <button>
• <aside>.

MDN Web Docs är en bra resurs för att lära sig om alla befintliga HTML-element.

Strukturera innehållet

Istället för att tänka design bör du tänka struktur. Hur kan du strukturera innehållet för att det ska få ett så naturligt flöde som möjligt?

Skriv din kod helt utan CSS till en början för att få en bättre uppfattning kring huruvida flödet känns vettigt eller inte.

När du skriver koden kan du tänka dig ett linjärt flöde där du kan bara se en sak i taget. Relevant innehåll bör grupperas för att användaren direkt ska kunna hoppa dit – eller hoppa över.

Validera HTML-koden

Jag ska vara helt ärlig; jag validerar aldrig min kod. Inte för att jag tycker det är dåligt utan för att jag helt enkelt glömmer bort. Skäms på mig.

Att validera koden är dock en typiskt bra grej. Främst för att du direkt får veta om något inte lirar som det ska, men också för att du kan lära dig en hel del. T.ex. så kanske du trodde att du kunde göra på ett visst sätt, men så visade det dig att det var fel – då vet du det till nästa gång.

Det finns många HTML-validatorer du kan använda, exempelvis den från W3C.

Fun fact: När jag skrev detta avsnitt så körde jag igenom min startsida i en validatorn – och såklart så fanns det några errors där. Note to self; Validera alltid koden.

Nästa steg – ARIA

När de befintliga HTML-taggarna inte räcker till för att beskriva sidans innehåll och struktur, kan du komplettera med ARIA (Accessible Rich Internet Application).

ARIA är ett hjälpmedel för att göra din semantiska HTML ännu mer tillgänglig. ARIA är framförallt användbart om din sida innehåller dynamiskt och interaktivt innehåll då du bl.a. behöver uppdatera states.

Du ska dock vara försiktig med ARIA och använda det sparsamt. Om du använder det på fel sätt så kan din webbplats blir mindre tillgänglig.

Jag ska inte gå in så djupt på ARIA eftersom det är ett stort ämne och förtjänar ett eget inlägg – eller två. Jag vill dock lista de fem reglerna för hur du använder ARIA:

1. Använd den inbyggda funktionaliteten i HTML så långt det går, innan du använder ARIA.
2. Ändra inte den inbyggda semantiken i HTML-taggar med ARIA. Om du verkligen måste behöver du vara medveten om vilka sidoeffekter det får.
3. Alla interaktiva element som använder ARIA måste gå att hantera via ett tangentbord (d.v.s. du kan inte förlita dig på att använder använder en muspekare).
4. Använd inte role="presentation" eller aria-hidden="true" på fokuserbara element (t.ex. en knapp och inputfält).
5. Alla interaktiva element måste ha ett s.k. tillgängligt namn.

När du är redo att lära dig mer om ARIA finns här en översikt av ARIA med länkar till mer djupgående resurser.

Sammanfattning

Semantisk HTML handlar om att beskriva innehållet och strukturen på en webbsida genom att använda rätt HTML-element vid rätt tillfälle.

Vi använder oss av semantiskt HTML för kommunicera sidans struktur och innehåll till user agents – exempelvis skärmläsare och botar.

Du skapar semantiskt HTML genom att lära dig vilket syfte de olika HTML-elementen har och strukturera innehållet på ett logiskt sätt.