Hopp til hovedinnhold

Lister

Bruk korrekte HTML-elementer for lister slik at strukturen blir forståelig.

Oppdatert
Kategori: struktur

Lister

Hva er problemet?

Lister strukturerer informasjon. Hvis du lager "visuelle lister" ved hjelp av <div>, <br> eller symboler (*, -), mister skjermleserbrukere informasjonen om:

  • At det er en liste.
  • Hvor mange punkter det er.
  • Hvor de er i listen.

Hvordan fikse det?

Bruk standard HTML-lister.

Unummerert liste (<ul>)

For punkter der rekkefølgen ikke betyr noe.

<ul>
  <li>Epler</li>
  <li>Pærer</li>
</ul>

Nummerert liste (<ol>)

For rekkefølge eller steg.

<ol>
  <li>Forvarm ovnen</li>
  <li>Pisk egg og sukker</li>
</ol>

Definisjonsliste (<dl>)

For begreper og forklaringer. <dl> skal kun inneholde <dt> (begrep) og <dd> (beskrivelse).

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>