HTML college: lijsten

Lijsten zijn handig voor het maken van opsommingen zoals een inhoudsopgave, boodschappenlijstje, recept etc....
De twee belangrijkste typen lijsten zijn de ongeordende en de geordende. Bij de ongeordende is de volgorde onbelangrijk, zoals bij bijvoorbeeld een boodschappenlijst.
Bij een geordende lijst is de volgorde wel belangrijk. Je wilt misschien tot uitdrukking brengen dat iets in een bepaalde volgorde moet gebeuren, dat de items steeds groter worden of misschien wil je een toelichting geven bij bepaalde punten.

Van beide typen lijsten staat hier een voorbeeld.
Unordered list, bv. boodschappenlijst Ordered list, bv. een fietsband plakken 
<ul>
  <li>Melk</li>
  <li>Brood</li>
  <li>Yoghurt</li>
  <li>Broodbeleg</li>
  <li>Fruit</li>
</ul>
  • Melk
  • Brood
  • Yoghurt
  • Broodbeleg
  • Fruit
 
<ol>
  <li>Draai de moeren los</li>
  <li>Verwijder het wiel</li>
  <li>Haal de band eraf</li>
  <li>Plak de band</li>
  <li>Drink koffie terwijl de lijm droogt</li>
</ol>
  1. Draai de moeren los
  2. Verwijder het wiel
  3. Haal de band eraf
  4. Plak de band
  5. Drink koffie terwijl de lijm droogt
Toelichting: bij stap 3 zet je alvast water op


Zo'n geordende lijst hoeft niet bij 1 te beginnen. Je kunt in de ol-tag het attribuut 'start' gebruiken om aan te geven waar de lijst mee begint. En bij elke li-tag kun je hetzelfde bereiken met het attribuut 'value': 

<ol start="3">
  <li>Draai de moeren los</li>
  <li>Verwijder het wiel</li>
  <li>Haal de band eraf</li>
  <li value="1">Plak de band</li>
  <li>Drink koffie terwijl de lijm droogt</li>
</ol>
  1. Draai de moeren los
  2. Verwijder het wiel
  3. Haal de band eraf
  4. Plak de band
  5. Drink koffie terwijl de lijm droogt


Je kunt ook een andere aanduiding van de volgorde kiezen, zoals letters of romeinse cijfers i.p.v. de cijfers: 

<ol type="a">
  <li>Draai de moeren los</li>
  <li>Verwijder het wiel</li>
  <li>Haal de band eraf</li>
  <li>Plak de band</li>
  <li>Drink koffie terwijl de lijm droogt</li>
</ol>
  1. Draai de moeren los
  2. Verwijder het wiel
  3. Haal de band eraf
  4. Plak de band
  5. Drink koffie terwijl de lijm droogt
 
<ol type="I">
  <li>Draai de moeren los</li>
  <li>Verwijder het wiel</li>
  <li>Haal de band eraf</li>
  <li type="A">Plak de band</li>
  <li>Drink koffie terwijl de lijm droogt</li>
</ol>
  1. Draai de moeren los
  2. Verwijder het wiel
  3. Haal de band eraf
  4. Plak de band
  5. Drink koffie terwijl de lijm droogt


Behalve tekst kun je ook hyperlinks, plaatjes en allerlei andere HTML- tags als items in een lijst gebruiken. Zo kun je bv. een inhouds-opgave maken in de vorm van een rijtje hyperlinks die naar de betreffende hoofdstukken wijzen of je kunt een plaatje gebruiken in plaats van de standaard 'bullets'.