Semantisk HTML

Betydelsen av att arbeta med semantisk markup utgår från tanken om att webben ska vara tillgänglig för alla. Principen är enkel att förstå fast inte nödvändigtvis lika enkel att tillgodose.

Exempel på semantisk kod är när vi använder HTML tags som <nav>, <header> och <footer>. Det är självbeskrivande och lättförståeliga tags i motsats till en <div> som är en generisk tag som helt saknar semantisk betydelse. Exemplen nämnda här ovan utgör bara ett axblock av alla de semantiska tags som finns tillgängliga.

Här kan du finna en komplett lista på semantiska tags: Mozilla:s Web Documentation.

Att skriva semantisk markup inkluderar även användningen av attribut för att ge HTML element utökad funktionalitet. Det kan t ex vara "alt" attributet i img tags(bild element). Dels kommer det text innehåll vi ger attributet visas i den händelse en bild inte kan laddas till sidan men framförallt kommer den fungera som information för de användare som är beroende av screen readers. Med semantisk markup gör vi helt enkelt vår sida accessible/tillgänglig för alla även de som är beroende av screen readers eller andra hjälpmedel.

Det kan vara värt att nämna att det finns en rad verktyg som kan användas för att se om en markup håller en god standard, för de som använder Google Chrome finns det också en inbyggd funktion kallad audits som ger omfattande feedback som även mäter/skattar olika parametrar avseende en webbsidas användarvänlighet, prestanda etc.

Semantisk vs non-semantisk markup

I exemplen nedan finns två markups, en med generiska tags som saknar semantisk betydelse samt motsvarande markup med självbeskrivande/semantisk markup.

Non-semantic Markup

Semantic Markup

Det kan vara intressant att konstatera att det trots skillnaderna i markup:n så kommer sidorna för den stora majoriteten se likadana ut. Realiteten är också att markup ofta kan se ut som i det icke semantiska exemplet här ovan. En orsak till detta är att browsers är designade med fokus att visa sidan oavsett eventuella brister i markup. Det innebär att det går att slarva med semantisk markup och åtminstone till det yttre ha en fullt fungerande webbsida. Men även om en sida ser bra ut för den stora majoriteten kan de underliggande bristerna föra med sig negativa konsekvenser vad gäller användarvänlighet och låg ranking bland sökmotorer.

Användarvänlighet handlar om mera än Semantisk HTML

En lättförståelig och semantisk HTML markup är kanske det som är enklast att exemplifiera. Men att utveckla en webbsida som håller hög kvalitet avseende användarvänlighet och tillgänglighet förutsätter ett bredare fokus. Det kan t ex handla om att underlätta för användare som bara kan använda tangentbordet. Eller att under designfasen beakta kontrastvärdena så att sidan även fungerar på ljussvaga skärmar och för användare som saknar fullt färgseende. En annan viktig princip är ’graceful degradation’ där fokus ligger på att sidan även ska se bra ut på äldre browsers som kan sakna stöd för nyare tekniker. Det handlar också om att se till att sidan bibehåller nödvändig funktionalitet i den händelse användaren inte använder Javascript. En ytterligare faktor är att sidan måste fungera ’cross-browser’. Den ska med andra ord se bra ut med full funktionalitet oavsett vilken browser som användaren använder. 

Rankning

En hög grad av tillgänglighet och användarvänlighet kan tyckas vara skäl nog att arbeta med semantisk markup och 'graceful degradation' men det finns också kommersiella fördelar. En webbsida som byggts utifrån kvalitativa principer kommer även att åtnjuta en högre ranking bland sökmotorerna. En hög ranking bidrar dels till ökad trafik men även vad som kännetecknas som 'Higher quality trafic', sidan kommer med andra ord att i högre grad nå rätt kategori användare. Hur man arbetar gentemot sökmotorer är i sig en hel vetenskap men helt säkert är att en framgångsrik strategi bygger på en rad principer och bland dessa kan vi finna hög grad av tillgänglighet, semantisk markup och ’graceful degradation’.