# Lijsten

# Lijsten in HTML

Net zoals in een tekstverwerker, kan je op een webpagina lijsten aan een bezoeker presenteren. Een lijst is een opsomming van verschillende items, al dan niet in een bepaalde volgorde of genummerd. Lijsten zijn blokelementen en kunnen dus losstaand gebruikt worden (niet binnen een <p> element).

De drie soorten lijsten die in HTML ondersteund worden zijn:

• Ongeordende lijsten
• Geordende lijsten
• Definitielijsten

# Ongeordende lijsten <ul>

Het meest voorkomende type lijst is de ongeordende lijst. Hierbij ligt de focus puur op de inhoud van de items en niet op de volgorde ervan. De items van een ongeordende lijst worden standaard voorafgegaan door een opsommingsteken, maar kunnen veranderd of weggelaten worden via CSS.

Het element voor een ongeordende lijst te openen is <ul>. Binnen een <ul> element volgt een opeenvolging van lijstitems aangeduid met het element <li> (list item). De lijstitems zijn dus rechtstreekse kinderen van de lijst.

<p>Ik ga op reis en ik neem mee...</p>
<ul>
    <li>Tandenborstel</li>
    <li>Tandpasta</li>
    <li>Zwembroek</li>
    <li>Boek</li>
    <li>Zonnecrème</li>
</ul>

Voorbeelden voor het gebruik van een ongeordende lijst:

• Boodschappenlijstje
• Aanwezigheidslijst
• Lijst van ingrediënten

# Geordende lijsten <ol>

Bij een geordende lijst ligt de focus op de volgorde van de lijstitems. Elk element in de lijst krijgt een volgnummer of volgletter, aanpasbaar via CSS.

Het element voor een ongeordende lijst te openen is <ol>. Zoals bij een <ul> worden de lijstitems van een <ol> element ook aangeduid met <li>. De lijstitems zijn dus rechtstreekse kinderen van de lijst.

<p>Top 5 dingen die ik nog wil doen...</p>
<ol>
    <li>Wereldreis</li>
    <li>Vliegtuigsprong</li>
    <li>Met mijn idool op het podium staan</li>
    <li>Picknick op Antarctica</li>
    <li>Met dolfijnen zwemmen</li>
</ol>

Voorbeelden voor het gebruik van een geordende lijst:

• Top 100 liedjes
• Stap-voor-stap handleiding
• Agendapunten
• Scorebord

# Definitielijsten <dl>

Definitielijsten kunnen gebruikt worden om een duidelijke structuur te brengen in een opeenvolging van termen en verklaringen. Het gaat dus om sleutel-waarde paren (term met beschrijving), aangeduid door twee verschillende kindelementen: <dt> voor de termen en <dd> voor de beschrijving. <dt> en <dd> zijn beide kindelementen van de <dl> lijst.

<dl>
  <dt>WWW</dt>
  <dd>
    World Wide Web. Een andere benaming voor het internet.
  </dd>

  <dt>URL</dt>
  <dd>
    Uniform Resource Locator. Link naar een pagina of bestand.
  </dd>
</dl>

Je kan ook meerdere termen bij één beschrijving bundelen door een opeenvolging van <dt> elementen:

<dl>
  <dt>Chrome</dt>
  <dt>Google Chrome</dt>
  <dt>Google browser</dt>
  <dd>
    Een gratis browser gemaakt door Google, met integratie van andere Google diensten.
  </dd>

# Lijsten nesten

Lijsten kunnen ook in elkaar genest worden. Dit betekent dat de ene lijst deel uitmaakt van de andere. In dit geval worden de geneste lijsten (<ul> of <ol>) opgenomen onder een lijstitem van de ouderlijst.

<ol>
  <li>Duitsland</li>
  <li>België
    <ul>
      <li>Vlaanderen</li>
      <li>Wallonië</li>
      <li>Brussel</li>
    </ul>
  </li>
  <li>Frankrijk</li>
</ol>