Lijsten

Lijsten zijn een belangrijk onderdeel onderdeel van HTML en zie je op bijna elke webpagina terug. Denk bijvoorbeeld maar eens aan:

Inhoudsopgave van een pagina
Items in een menu
Lijst van nieuwsberichtjes
Lijst van voorbeelden waar je lijsten voor kan gebruiken

Er zijn twee soorten lijsten die we kunnen gebruiken, de genummerde lijst en de ongenummerde lijst. (Er is ook een derde soort lijst, maar die wordt in de praktijk weinig gebruikt)

Genummerde lijst

De genummerde lijst maken we met de <ol> tag (ordered list). De verschillende items binnen de lijst maken we vervolgens met de <li> tag (list item):


<ol>
  <li>Dit is nummer 1</li>
  <li>Dit is nummer 2</li>
</ol>

Ongenummerde lijst

De ongenummerde lijst kan je maken met de <ul> tag (unordered list) en werkt precies hetzelfde als de genummerde lijst:


<ul>
  <li>Dit stukje tekst staat naast de eerste stip</li>
  <li>Dit stukje tekst staat naast de tweede stip</li>
</ul>

Nesten van lijsten

Een krachtige feature van lijsten is dat ze makkelijk te gebruiken zijn om sublijsten te maken. Dit kan je doen door een lijst binnen een <li> van een andere lijst te plaatsen.


Todo:
<ul>
  <li>Was ophangen</li>
  <li>Boodschappen doen
    <ul>
      <li>Melk</li>
      <li>Brood</li>
    </ul>
  </li>
  <li>Huis opruimen</li>
</ul>

Let op dat je de sublijst binnen de <li> plaatst! Anders werkt het vaak niet zoals je zou verwachten en is het ook geen valide HTML.

Voeg twee subitems toe aan Huis opruimen: 'Ramen lappen' en 'Stofzuigen'