Lijsten

Een boodschappenlijstje en een recept zijn allebei lijsten, maar slechts één ervan gaat kapot als je de volgorde verandert. HTML heeft voor elk een ander element.

Ongeordende en geordende lijsten

Maakt de volgorde van de items niet uit, gebruik dan een ongeordende lijst, <ul>. Browsers markeren elk item met een bolletje. Maakt de volgorde wel uit, zoals bij de stappen van een recept of een ranglijst, gebruik dan een geordende lijst, <ol>, en de browser nummert de items voor je. In beide gevallen is elk item een <li>, een lijstitem, en de enige elementen die rechtstreeks in <ul> of <ol> mogen staan, zijn <li>-elementen. Tekst en andere elementen horen in de items.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

Waarom typ je de nummers of streepjes niet zelf? Omdat de browser dan niet weet dat het een lijst is. Een schermlezer meldt een echte lijst met zijn lengte, bijvoorbeeld lijst, 3 items, zodat de luisteraar weet hoeveel eraan komt en erlangs kan springen. Als je een stap in een <ol> invoegt, verandert elk nummer erna vanzelf; met zelf getypte nummers zou je met de hand opnieuw moeten nummeren.

Opties voor geordende lijsten

<ol> heeft een paar attributen. start="4" begint de telling bij 4, handig als een lijst na een alinea doorloopt. reversed telt af, voor een top tien. type zet de markering om op letters of Romeinse cijfers: type="a", type="A", type="i" of type="I". Een enkel item kan ook naar een nummer springen met value, zoals in <li value="10">. Hoe de bolletjes en nummers eruitzien (vorm, kleur, of ze zichtbaar zijn) wordt door CSS bepaald.

Lijsten in lijsten

Een lijstitem kan een hele lijst bevatten. Zet de binnenste <ul> of <ol> in de <li> waar hij bij hoort, na de tekst van dat item en vóór de afsluitende tag. Een veelgemaakte fout is de binnenste lijst tussen twee <li>-elementen te zetten, rechtstreeks in de buitenste lijst, wat niet is toegestaan. Geneste lijsten gebruiken sites voor menu's met submenu's en overzichten met deelpunten.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Beschrijvingslijsten

De derde soort lijst koppelt termen aan beschrijvingen, zoals een woordenlijst of een reeks vragen en antwoorden. <dl> is de beschrijvingslijst, <dt> bevat een term en <dd> de beschrijving. Eén term kan meerdere beschrijvingen hebben, en meerdere termen kunnen er één delen. Browsers laten de beschrijvingen standaard inspringen.

Lijsten duiken op plekken waar je ze misschien niet verwacht. Het menu bovenaan de meeste sites is een <ul> met links in een <nav>; CSS zet de items op een rij en verbergt de bolletjes. Een rij productkaarten of een reeks zoekresultaten is vaak ook een lijst. Zie je een groep gelijksoortige dingen, vraag je dan af of het een lijst is; het antwoord is meestal ja.

Een snelle manier om te kiezen tussen de twee: stel je voor dat je de items door elkaar schudt. Verandert de betekenis door het schudden, zoals bij de stappen van een recept of een top tien, dan is de lijst geordend en heb je <ol> nodig. Verandert er niets, zoals bij een paklijst, gebruik dan <ul>. Houd elk item kort en laat items op dezelfde grammaticale manier beginnen, zodat de lijst makkelijk te scannen is.