Märk upp dina webbsidor semantiskt

Vad betyder det egentligen att skriva semantiskt korrekt kod? Många tror kanske att det inte spelar någon roll hur koden ser ut i en webbsida, det är ju ändå inte den som läsaren ska se och läsa. Sant till viss del, men vem läser koden då?

W3C, som utvecklar webbstandarderna, har alltid strävat efter att webben ska vara tillgänglig för alla, oavsett vilken utrustning eller eventuella hjälpmedel som används. Här kommer några tips för att skriva bättre (X)HTML.

Hitta semantiken i ett textelement

Man kan i en textfras eller del av ett dokument hitta olika sorters information om själva textelementet. I en trycksak (tidning, folder etc.) har texten egentligen bara två egenskaper – sin layout och sitt budskap.

Du vet genom att titta på hur texten är placerad och utformad, om det är en rubrik, en bildtext eller vanlig löpande text. Helt enkelt vilken roll texten spelar. En synskadad person har oftast svårigheter att ta till sig budskapet i en trycksak, eftersom den bara är bläck på ett papper.

textroller En webbsida tillför dock ytterligare en dimension till texten, nämligen en beskrivning av dess funktion i sammanhanget. Detta sker genom uppmärkning med taggar. Det är då inte längre textens utformning som avslöjar dess funktion, även om det är den huvudsakliga ledtråden för de flesta vanlig surfare.

Eftersom webbsidor är ett digitalt medium, så kan den funktionshindrade dels använda läshjälpmedel. Läshjälpmedlet i sig kan också utnyttja de beskrivningar som taggarna ger för att läsa upp texten på ett begripligt och mera mänskligt sätt.

Taggarna och deras betydelse

Det viktigaste att tänka på när man märker upp webbdokument, är att använda alla taggar till det de är avsedda för. Bry dig inte om avstånd och textstorlek när du jobbar med innehållets uppmärkning. Allt detta rättar du slutligen till med CSS. Här kommer några exempel på taggar som är lätta att glömma eller använda felaktigt.

Rubriker

Många frestas att ta till fel nivåsiffra på rubrikerna för att de inte ska bli för stora eller för små. Glöm det! Huvudrubriken är alltid <h1>. Märk sedan underrubrikerna i fallande nummerordning beroende på deras nivå.

Fet och kursiv stil

För det första – fet och kursiv stil är becknande för ett utseende och inte en semantisk funktion. De föråldrade taggarna <b> och <i> som ordnade detta, har ingen semantisk betydelse och bör därför ersättas med <strong> och <i> som däremot har det.

Gör inte rubriker med <strong> vars betydelse är stark betoning. Du ska främst använda den för att betona viktiga fraser/ord mitt i löpande text. Den något lättare betoningen är <em>, som i de flesta webbläsare ger kursiv stil.

Förkortningar

Förkortningar kan ställa till det för läshjälpmedel om det inte framgår, dels att det är en förkortning, men också vad förkortningen står för. Endera skriver man ut hela frasen istället för att förkorta, eller så använder man en uppmärkning som förklarar vad man menar.

Förkortningar som ”o.s.v.”, ”t.ex.” och ”m.m.” kallas sammandragningar och märks med <abbr> som i abbreviation. Även bokstavsföljder som man bokstaverar när man läser (”W3C”, ”ABF” och liknande) är sammandragningar.

Den andra typen av förkortningar märks <acronym> och de uttalar vi som om de vore ett ord (”IKEA”, ”WAP”). Förkortningens betydelse läggs sedan i attributet title i förkortningstaggen.

Citat som fristående stycke

Taggen <blockquote> ska enbart användas till citat som är fristående stycken. Du kanske har citerat någon eller vill visa ett uttrag ur någon annans text. Jag har sett att även vissa texteditorer och CMS beskriver <blockquote> som ett indrag, vilket är helt fel. Vill du göra indrag i en text är det CSS-egenskapen margin-left du ska använda.

Listor

Räknar du upp något som skulle kunna liknas vid en lista är det lämpligt att använda listtaggar. Listor används också för att lista länkar, när man gör menyer eller andra uppställningar och uppräkningar. Det finns tre sorters listor att ta till. Läs mer om dem här.

Tabeller

Jag hoppas att det numera är allmänt utbrett att tabeller INTE ska användas för layout. Tabeller är tabulärdata som du använder t.ex. i scheman, datalistor eller som ersättning för tabbuppställd text. Sidlayouter som man tidigare gjort med tabeller, kan istället erhållas med sektionselementet <div> och en del CSS.

Bilder

Det viktigaste när du lägger ut bilder är att attributet alt kommer med, där du förklarar bildens innebörd. Det är den information som läshjälpmedel och webbläsare utan bildvisning använder för att presentera en ersättningstext för bilden.

Länkar till W3C

W3C’s webbsidor innehåller fullständig information om taggarna och deras syfte och användningsområden. Lägg länkarna som Favoriter och använd dem som referensverk.

2009-07-12 (16:15) XHTML och CSS