Använd rätt html-element när ni gör listor
En av poängerna med HTML är att språket kan användas för att märka upp semantiken i ett dokument. Märk upp listor som listor, och se till att inget annat än listor är märkta så. Skärmläsare och andra hjälpmedel behöver korrekt kodade listor för att kunna signalera till användaren att en lista faktiskt är just en lista.
Rekommendationer för listorLänk hit
- Märk upp alla listor som listor med korrekta HTML-element.
- Använd inte listrelaterade HTML-element för sådant som inte är listor.
Listor i HTMLLänk hit
Det finns tre olika typer av listor i HTML:
- oordnade listor – punktlistor
- ordnade, numrerade, listor
- definitionslistor.
En ordnad lista används när punkterna behöver komma i rätt ordning. Det är inte viktigt i en oordnad lista. En lista med ingredienser för en sockerkaka är en oordnad lista: det spelar ingen roll om man nämner vetemjölet före äggen eller vice versa. Bakinstruktionen är dock en ordnad lista: man måste blanda ingredienserna innan man gräddar kakan, annars blir det inte en sockerkaka.
Notera att det inte handlar om sortering, utan om inbördes ordning. En lista över svenska 1900-talsförfattare är en oordnad lista, även om namnen står sorterade i bokstavsordning. Däremot är en topp-tio-lista med favoritförfattare en ordnad lista. En navigeringsmeny på en webbplats är i de allra flesta fall en oordnad lista.
En definitionslista (dl) kan användas för olika typer av nyckel- eller värdelistor, eller för att märka upp till exempel en dialog i ett manuskript. Varje element består av en eller flera nycklar (dt) och ett eller flera värden (dd).
Tyvärr finns det en överdriven användning av listor. En sekvens är inte nödvändigtvis en lista. Det är inte ovanligt att se formulär uppmärkta med ul eller ol, bara för att författaren vill ha ett ”gratis” li-element runt varje etikettpar eller fältpar för att de ska presenteras på en egen rad. Det är att använda HTML på ett sätt det inte är tänkt.
En tumregel kan vara att om man vill trolla bort listpunkter med CSS för att presentationen ska bli begriplig, borde innehållet förmodligen inte alls göras till en lista. Till exempel är det ytterst få formulär som bör ha en listpunkt eller ett ordningsnummer framför varje etikett eller fält.
TerminologiLänk hit
Termen semantik beskrivs i terminologiavsnittet under R82 Använd stilmallar för att separera presentationen från innehållet.
Kommentarer till denna riktlinje
Kommentarer (9)
Vad säger ni om detta exempel? En såkallad progresstracker, består av en oordnad lista: http://blog.sathomas.me/post/tracking-progress-in-pure-css
Hej!
Jag tycker att det verkar vara en bra idé att använda en ordnad lista för att representera steg i en process. Processen är ju en sekvens…
Ser du några potentiella nackdelar?
PS. Ursäkta sent svar. Missade tyvärr dina kommentarer.
Förlåt en ordnad lista menade jag i förra kommentaren
Ni skriver att navigationen/menyn allt som oftast är en oordnad lista, men personligen förstod jag aldrig om detta var ok eller inte. Man bryter ju trots allt utformningen och tar bort listelementen och detta är inte att föredra om man utgår från tumregeln längst ner i artikeln.
Hej @Johannes
Bra påpekande! Jag bedömer att det är ok trots att det bryter mot tumregeln. Menyer får kanske anses ha en särställning. I html5 finns ju för övrigt även listtypen menu: http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-menu-element
Hej, länken till Behandling av personuppgifter fungerar inte, går till en 404-sida.
Tack! Fixat nu!
Hej, är två länkar under en Mer information-rubrik att betrakta som en lista som ska kodas? T.ex. så här:
Statistik för varor och tjänster för sig /rubrik/
Varuhandel /länk/
Tjänstehandel /länk/
Hej Lena.
Ja, det är en lista med länkar så den ska kodas som en lista.
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.