Er zijn verschillende lijsttypen in HTML. Allereerst zijn er de opsommingen. Bij dit type lijst worden de individuele lijstitems voorzien van een opsommingsteken, de zogenaamde bullet.
Opsommingen worden gestart met het ul-element. De individuele lijstitems worden aangeduid met het li-element.
<p>Actuele onderwerpen uit het forum</p> <ul> <li>CSS wordt niet langer uitgevoerd</li> <li>Showroom Hollywood-stijl uit de jaren 40</li> <li>Uitklaplijst CSS</li> <li>PHP connect/disconnect</li> <li>Mijn kleine showroom - beginner vraagt om tips!</li> </ul>
Hier is een blik op het resultaat in de browser:
Voor elke bijdrage wordt een opsommingsteken toegevoegd. Hoe dit er standaard uitziet, wordt bepaald door de browsers. Hoewel er attributen zijn waarmee de weergave van lijsten kan worden beïnvloed, zouden deze tegenwoordig niet meer gebruikt moeten worden. In plaats daarvan komen CSS-eigenschappen in het spel.
Overigens kunnen opsommingen ook genest worden. Kijk eerst naar de volgende afbeelding:
Hier wordt duidelijk wat de bedoeling is van zo'n nesten.
De syntaxis hiervoor ziet er als volgt uit:
<ul>
<li>Handleidingen
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Videotrainings
<ul>
<li>3D</li>
<li>Mediavormgeving</li>
<li>Web</li>
</ul>
</li>
<li>Tips</li>
<li>Winkels</li>
</ul>
Binnen een lijstitem kan dus nog een lijst staan. Overigens hoeft dit niet per se een opsomming te zijn. Ook andere soorten lijsten - die in deze tutorial nog worden behandeld - kunnen worden ingevoegd.
Overigens is het in HTML5 niet noodzakelijk om de sluitende </li> te gebruiken. Voor een betere leesbaarheid zou ik het echter altijd wel sluiten. Syntactisch correct zou echter ook zoiets zijn:
<p>De actuele onderwerpen uit het forum</p> <ul> <li>CSS wordt niet langer uitgevoerd <li>Showroom Hollywood-stijl uit de jaren 40 <li>Uitklaplijst CSS <li>PHP connect/disconnect <li>Mijn kleine showroom - beginner vraagt om tips! </ul>
Genummerde lijsten
Naast opsommingen kunnen ook genummerde lijsten worden gedefinieerd. Hier ook eerst een afbeelding die laat zien wat genummerde lijsten eigenlijk zijn.
Dus de lijstitems krijgen opeenvolgende cijfers voorgesteld. Genummerde lijsten worden gestart met het ol-element.
Het volgende voorbeeld laat zien hoe dit element kan worden gebruikt.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Net als bij opsommingen worden ook hier de individuele items gemarkeerd met het li-element.
Theoretisch kunnen ook opsommingen genest worden.
<ol>
<li>Handleidingen
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Videotrainings
<ol>
<li>3D</li>
<li>Mediavormgeving</li>
<li>Web</li>
</ol>
</li>
<li>Tips</li>
<li>Winkels</li>
</ol>De uitkomst in de browser is echter teleurstellend.
Een nummering volgens dit schema wordt dus niet bereikt:
1. Handleidingen 2D
1.1 3D
1.2 Web
- Videotrainings 3D
2.1 Mediavormgeving
2.2 Web - Tips
- Winkels
Zoiets is niet mogelijk met puur HTML. Eigenlijk moet je hier CSS gebruiken om inhoud automatisch volgens een dergelijk schema te nummeren.
Definitielijsten
Nog een ander type lijst zijn de zogenaamde definitielijsten. Ook hiervoor eerst een voorbeeld van hoe zo'n lijst er uiteindelijk uitziet in de browser:
Hoofdzakelijk worden definitielijsten gebruikt voor glossaria. Hier volgt de syntaxis die heeft geleid tot de eerder getoonde uitvoer:
<dl>
<dt>AM</dt>
<dd>AM - Luchtpost</dd>
<dd>AM - Luchtmachtmaarschalk</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - bovengenoemde</dd>
<dd>AN - Toegangsknooppunt</dd>
<dd>AN - Ancona</dd>
</dl>Bij definitielijsten heeft men altijd te maken met drie elementen. De lijsten worden ingeleid door het dl-element. Dit is dus de uiterlijke structuur. De te definiëren term wordt aangeduid door een dt-element. Dit is uiteindelijk de definitie. De definitiebeschrijving wordt vervolgens gegeven via het dd-element.
Nesting van definitielijsten is overigens ook mogelijk. Dit werkt op dezelfde manier als bij de andere lijstvarianten werd getoond.
Hoe definitielijsten er standaard uitzien, wordt opnieuw bepaald door de browser. Uiteindelijk kunt u echter met behulp van CSS het gewenste layout zelf instellen.
In eerdere HTML-versies waren er ook menu- en directorylijsten. Daarvoor werden de twee elementen menu en dir gebruikt. Het dir-element is niet langer aanwezig in HTML5. Dit geldt niet voor menu. Dit element werd opnieuw geïmplementeerd en zal in de toekomst kunnen worden gebruikt voor contextmenu's en werkbalken. Hier is een voorbeeld van hoe het W3C zich een typische toepassing van menu voorstelt:
<menu type="toolbar"> <li> <menu label="Bestand"> <button type="button" onclick="fnew()">Nieuw...</button> <button type="button" onclick="fopen()">Openen...</button> <button type="button" onclick="fsave()">Opslaan</button> <button type="button" onclick="fsaveas()">Opslaan als...</button> </menu> </li> <li> <menu label="Bewerken"> <button type="button" onclick="ecopy()">Kopiëren</button> <button type="button" onclick="ecut()">Knippen</button> <button type="button" onclick="epaste()">Plakken</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">Over</a></li> </menu> </li> </menu>
Op dit moment wordt dit echter nog niet ondersteund door een browser.
Daarom moet menu op dit moment nog niet worden gebruikt.
Lijsten opmaken
Nog een opmerking over lijsten. Op veel websites wordt voor de opmaak van lijsten gebruikgemaakt van de juiste HTML-attributen. Zo kunt u bijvoorbeeld met <ul type="square"> ervoor zorgen dat er rechthoeken worden weergegeven voor de items in opsommingen.
Voor genummerde lijsten kan ook het type nummering worden ingesteld.
<ol type="A">
Hierbij geldt echter dat niet alles wat wordt aangeboden, moet worden gebruikt. Beter geschikt zijn de juiste CSS-eigenschappen. U zou deze dus daadwerkelijk moeten gebruiken om de lijsten aan uw wensen aan te passen. Uitgebreide informatie over CSS zal volgen in deze reeks.
