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>.

<dl> <dt> item 1 </dt> <dd> uitleg item 1 </dd> <dt> item 2 </dt> <dd> uitleg item 2 </dd> </dl>
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>
Menu
We gaan bovenaan het h1 element ook een menu plaatsen, in het hoofdstuk hyperlinks zullen we dit verder uitbreiden. Een menu binnen een webpagina word altijd opgemaakt via een opsomming, je hebt meer opmaak mogelijkheden in het stijldocument.
<ul> <li> Home </li> <li> Links </li> <li> Contact </li> </ul>
Maak de volgende afbeelding na, download het startbestand.
