3. Lijsten

3.1 Soorten lijsten

3.2 Ongenummerde lijst

3.3 Genummerde lijst

3.4 Definitie lijst

3.5 Geneste lijsten

3.6 Oefening

3.7 Quiz

We gebruiken heel veel opsommingen in ons dagelijkse leven. Denk maar aan een opsomming van de ingrediënten en een geordend stappenplan bij het maken van een gerecht.

Als u aan lijsten denkt dan denkt u ongetwijfeld aan opsommingpunten of nummering zoals in Word of Indesign.

In HTML is een lijst een genest block-element waarbij - net als in Word - alle elementen van de lijst onder elkaar worden geplaatst.

In HTML kunt u drie soorten lijsten of opsommingen maken:

Lijsten met opsommingstekens met de tag <ul> </ul> Letterlijk vertaald: unordered list = ongeordende lijst.
Genummerde lijsten met de tag <ol> </ol> Letterlijk vertaald: ordered list = geordende lijst.
Defenitielijsten met de tag <dl> </dl> Letterlijk vertaald: definition list = definitie lijst.

Het <ul> of <ol> element definieert het begin en einde van een lijst. Elk item van een lijst wordt gedefinieerd met behulp van het <li> element. Letterlijk vertaald: list item, dit item erft de eigenschappen van de <ol> of <ul>.

Het <ul> element is het hoofdelement en zorgt voor standaard een zwarte bol. Je kan de weergave van het icoon veranderen dit doen we later via CSS list-style-type.

De code ziet er als volgt uit:


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

Het <ol> element zorgt voor een genummerde of geordende lijst.

De code ziet er als volgt uit:


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

Een andere manier van opsomming is de definitielijst. Het <dl> element definieert het begin en einde van een definitielijst. Je definieert een item met de <dt> tag, de <dd> tag geeft een omschrijving hiervan.

<dl>
<dt> item 1 </dt>
<dd> uitleg item 1 </dd>

<dt> item 2 </dt>
<dd> uitleg item 2 </dd>
</dl>

Lijsten kunnen ook genest worden, hieronder een voorbeeld van een genummerde opsomming met een ongenummerde sublijst.

<ul>
<li> item 1 </li>
<li> item 2
<ul>
<li> subitem 1 </li>
<li> subitem 2 </li>
<li> subitem 3 </li>
</ul>
</li>
<li> item 3 </li>
</ul>

Soort lijsten

Roep een ongeordende lijst op bij ingrediënten en een geordende lijst op bij bereidingswijze.


<h1> Titel recept </h1>
<p> Aantal personen, tijd 30 min., niveau eenvoudig of moeilijk </p>

<h2> Ingrediënten </h2>

<ul>
<li> ingrediënt 1 </li>
<li> ingrediënt 2 </li>
<li> ingrediënt 3 </li>
<li> ingrediënt 4 </li>
<li> ingrediënt 5 </li>
</ul>

<h2> Bereidingswijze </h2>

<ol>
<li> bereidingswijze 1 </li>
<li> bereidingswijze 2 </li>
<li> bereidingswijze 3 </li>
<li> bereidingswijze 4 </li>
<li> bereidingswijze 5 </li>
</ol>