Semantik och Tillgänglighet med HTML5

HTML5 erbjuder dig möjligheterna att skapa mer semantisk markup och mer tillgängliga sidor, det vill säga webbsidor med bättre accessibility. Detta underlättar dina möjligheter att göra dina webbsidor förstådda av sökmotorer och andra typer av mjukvaror som konsumerar din webbsida. En tillgänglig och semantisk webbsida kan exempelvis vara mer lättanvänd för personer med vissa typer av handikapp.

Vad är semantisk markup?

"Semantics is the study of meaning."

En semantisk webb kännetecknas av att innehållet är beskrivet på ett sådant sätt att man med hjälp av dokumentstrukturen kan förstå vad de olika delarna är, vilken mening de har. På en webbsida innebär det att brödtext är markerad som brödtext, rubriker som rubriker och så vidare. Detta gör dokumentet mer semantiskt korrekt. Ett semantiskt korrekt dokument är enklare för maskiner att tolka, maskiner kan vara exempelvis sökmotorer och skärmläsare för blinda personer. Ett semantiskt korrekt dokument gör att dessa mjukvaror måste gissa mindre om vad som är vad på en webbsida.

Vad innebär en tillgänglig webbsida?

"Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible."

En tillgänglig webbsida är en webbsida som kan konsumeras till en maximal mängd av användare. En otillgänlig webbsida kan vara en webbsida som är anpassad för viss specifik mjukvara, exempelvis en webbläsare, eller som är beroende av speciell teknik, exempelvis JavaScript, för att kunna konsumeras. Genom att öka tillgänglighet på en webbsida löser man många problem. Man gör sidan enklare att konsumera för alla användare oberonde av vilken mjukvara de använder och du gör också sidan mer tillgänglig för exempelvis sökmotorer då du inte gömmer viktigt innehåll genom att välja otillgängliga lösningar på din webbsida.

Hur förenklar HTML5 semantisk markup?

HTML5 introducerar en mängd nya HTML-element som gör att man bättre kan beskriva innehållet och därmed meningen med sitt innehåll. Istället för att ha en massa olika div-element som får semantisk betydelse via klasser eller id:n kan man istället använda anpassade HTML-element för olika delar av sidan och skapa ett mer semantiskt korrekt dokument som är enklare att hantera. Bara genom att använda taggar för time, article, section, aside, nav, header, hgroup, footer kommer man väldigt långt i att beskriva sina dokument på ett semantiskt sätt.

Hur förenklar HTML5 skapandet av tillgängliga webbsidor?

En väldigt bra sak i HTML5-standarden är hur man kan beskriva formulär. Tidigare har det vart mer eller mindre omöjligt för mjukvara som hjälper blinda och andra handikappade att veta vad som efterfrågas i olika formulärfält. Med HTML5 så har man tagit ett stort steg framåt mot mer tillgängliga webbformulär. Med HTML5 kan man nu bättre beskriva de olika fälten med vilken typ de är, om man måste fylla i dem och även sätta vissa attribut, exempelvis placeholder som förhöjer användarupplevelsen. I en kommande artikel här på webbsida.org så kommer vi gå genom de nya formulärtyperna och möjligheterna som finns med dessa. HTML5 använt rätt gör att du får en mer semantiskt korrekt webbsida, högre tillgänglighet på din webb och på sikt även möjlighet att HTML5 och SEO hjälper dig att få fler organiska kunder/besökare till din webbplats.

Dela

Köp HTML och CSS-boken

html5 och css3 bok

Lär dig HTML5 och CSS3. Den sjunde upplagan av HTML och CSS-boken täcker in HTML5, XHTML och CSS. Boken börjar från grunden och innehåller allt du behöver veta för att skriva webbsidor.

Köp den nu

Ställ en fråga

Bli en expert på HTML5 och CSS3

Få gratis tips i brevlådan om hur du bygger en bättre webbsida.