lijst/opsomming

Soms maken we gebruik van korte opsommingen of lijstjes. Bijvoorbeeld de volgende lijstjes: Dingen die ik leuk vind:

• Gamen

• Programmeren

• Lego

Maar ook het volgende lijstje:

Top 3 favoriete films:

1. The Lion King

2. Toy Story

3. Bambi

Dit kunnen we ook in HTML doen! Hiernaast zie je de hele code, geen paniek als je hem nog niet helemaal begrijpt. We leggen hem hierna helemaal uit.

<p>Dingen die ik leuk vind: </p>
<ul>
   <li>Gamen</li>
   <li>Programmeren</li>
   <li>Lego</li>
</ul>

<p>Dingen die ik leuk vind: </p>
<ol>
   <li>The Lion King</li>
   <li>Toy Story</li>
   <li>Bambi</li>
</ol>

Het is belangrijk om het verschil te zien tussen de beide lijstjes. Het ene lijstje heeft puntjes, dit noemen we een ongesorteerde lijst. Om een ongesorteerde lijst te maken gebruiken we de <ul>-tag (ul = unordered list). Vervolgens moet je voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ul>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
</ul>

Daarnaast zijn er lijsten die nummertjes vooraan hebben staan. Dit zijn gesorteerde lijsten, bijvoorbeeld om een top 3 aan te geven. Om een gesorteerde lijst te maken gebruiken we de <ol>-tag (ol = ordered list). Vervolgens moet je ook hierbij voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ol>
   <li>Nummer 1</li>
   <li>Nummer 2</li>
   <li>Nummer 3</li>
</ol>