lijsten in Html 4.01

In een ongeordende lijst zijn de items niet genummerd, maar hebben ze een symbool als markering. In een geordende lijst zijn de items genummerd met behulp van een getal of een letter. Een definitielijst is een lijst, welke bestaat uit termen en bijbehorende beschrijvingen.

Om in de toekomst compatibel te werken gaan we er van uit dat alle tags moeten worden afgesloten, dit moet niet bij Html 4.01, maar is wel nodig bij Xhtml 1.0, dus gaan we deze manier van werken nu reeds toepassen.

De ongeordende lijst

In een ongeordende lijst hebben de items een symbool

<ul>
<li>Een pond suiker</li>
<li>2 Eieren</li>
<li>Halve kilo boter</li>
</ul>

Geeft dit resultaat

Je ziet dat standaard een cirkel voor elk item wordt gezet, deze kun je aanpassen door de eigenschap <ul type="circle"> voor een open cirkel, <ul type="square"> voor een vierkantje en <ul type="disc"> voor een gesloten cirkel aan te passen.

De geordende lijst

In een geordende lijst zijn de items genummerd met behulp van een getal of een letter

Nummers

<ol>
<li>Een pond suiker</li>
<li>2 Eieren</li>
<li>Halve kilo boter</li>
</ol>

Geeft dit resultaat

Je kan ook bepalen vanaf welke nummer moet worden begonnen

<ol start="312">
<li>Een pond suiker</li>
<li>2 Eieren</li>
<li>Halve kilo boter</li>
</ol>

Geeft dit resultaat

Letters

<ol type="a">
<li>Een pond suiker</li>
<li>2 Eieren</li>
<li>Halve kilo boter</li>
</ol>

Geeft dit resultaat

Terwijl als je met een hoofdletter A werkt:

<ol type="A">
<li>Een pond suiker</li>
<li>2 Eieren</li>
<li>Halve kilo boter</li>
</ol>

Je dit resultaat krijgt

Nesten van lijsten

Het is perfect mogelijk meerdere lijsten met elkaar te combineren, zonder enig verschil of deze nu geordend of niet geordend is.

<ol type="a">
<li>Een pond suiker</li>
<li>2 Eieren
<ol start="312">
<li>Een pond suiker
<ul>
<li>Een pond suiker</li>
<li>2 Eieren</li>
<li>Halve kilo boter</li>
</ul>
</li>
<li>2 Eieren</li>
<li>Halve kilo boter</li>
</ol>
</li>
<li>Halve kilo boter</li>
</ol>

Geeft dit resultaat

De definitie lijst dl

Het dl element bepaalt het begin en het einde van een definitielijst en de elementen dt & dd definiëren de term en de beschrijving.

<dl>
<dt><strong>Boodschappenlijst</strong></dt>
<dd>Een pond suiker</dd>
<dd>2 Eieren</dd>
<dd>Halve kilo boter</dd>
<dt><strong>Niet vergeten</strong></dt>
<dd>WC papier</dd>
</dl>