T ektelementer: Afsnit, lister og fremhævelse

Tekst udgør det meste af nettet, så det er især vigtigt at markere den korrekt. De rigtige tekstelementer gør indholdet læsbart for alle, også brugere af skærmlæsere.

Pak hver tekstblok ind i et p-tag. Det samler sætninger i et rigtigt afsnit, som hjælpemidler kan navigere i ét stykke ad gangen.

Undgå at stable tomme div'er eller br-tags for at skabe afstand mellem tekst. Brug rigtige afsnit, og lad CSS håndtere mellemrummene. Strukturen skal komme fra tagget, ikke fra stylingen.

Når elementer hører sammen, skal du bruge en rigtig liste. Skærmlæsere annoncerer antallet, f.eks. en liste med tre elementer, så brugeren straks får kontekst.

Brug ul, når rækkefølgen er ligegyldig, og ol, når den betyder noget, f.eks. ved trin. Hvert element hører hjemme i et li, aldrig i en løs div.

Tagget em markerer ord, som du ville lægge tryk på, når du taler. Skærmlæsere kan ændre tonen, så fremhævelsen faktisk høres og ikke kun ses.

Tagget strong markerer tekst, der er meget vigtig, f.eks. en advarsel. Det udtrykker betydning og er ikke kun fed formatering, så hjælpemidler opfatter også vægten.

Tagsene b og i ændrer kun udseendet uden at tilføje betydning. Brug em og strong, når trykket eller vigtigheden faktisk betyder noget.

Brug blockquote til et citeret afsnit og q til et kort citat i en linje. Semantikken fortæller brugerne, at ordene kommer et andet sted fra.

Pak kode i en linje ind i code, og skriv forkortelser med abbr. Disse små tags tilføjer den præcise betydning, som seende læsere udleder af konteksten.

Reglen for tekst er enkel: Vælg tagget ud fra dets betydning, og style det derefter frit. Udseende er CSS; struktur er HTML.

Brug p til løbende tekst, ul og ol til lister samt em og strong til reel fremhævelse. Vælg tags efter betydning, og overlad udseendet til CSS. 🎉