Rob's web

Lijsten

Lijsten worden gebruikt voor opsommingen en stappenplannen.

We kennen twee soorten lijsten de geordende en ongeordende.

List-items

Het maken van een lijst is vrij simpel. Ieder item van de lijst wordt tussen de <li> en </li> geplaatst. We plaatsen iedere item op een nieuwe regel.

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

We kunnen binnen de li tags ook link tags gebruiken zodat we er een vericaal menu van kunnen maken.

Ongeordende lijsten

Dit type lijst staat ook bekunt als een punten lijst. We maken van de boven getoonde items een punten lijst door de gehele lijst tussen <ul> en </ul> te plaatsen.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Dit geeft het onderstaande effect.

In plaats van punten kunnen we ook ander symbolen gebruiken.

Geordende lijsten

We maken van de boven getoonde items een geordende lijst door de gehele lijst tussen <ol> en </ol> te plaatsen.

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

Dit geeft het onderstaande effect.

  1. Item 1
  2. Item 2
  3. Item 3

In plaats van nummers is het ook mogelijk om letters te gebruiken.

Nesten van lijsten

Het is mogelijk om in lijsten sublijsten te gebruiken. Deze kunnen zowel geordend als ongeordend zijn.

Als we een sublijst toevoegen dient deze binnen een van de listitems geplaatst te worden. Hieronder een voorbeeld.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
</ul></li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

Je kunt zien dat na Item 4 de </li> verschoven is. Deze staat nu direct achter de </ul> van de sublijst.

Dit geeft het onderstaande effect.

Nesten kan meerdere keren voor komen. Stel je wilt Item 4.2 nog verder onderverdelen dan gebeurd dat weer op dezelfde manier waarop we de eerste onderverdeling hebben aangebracht.