<ul>, <ol> en <li>In webdesign draait alles om het helder en overzichtelijk structureren van informatie. Denk aan een recept, een overzicht van benodigdheden voor een grafisch project, een stappenplan om een PDF te exporteren, of simpelweg het hoofdmenu van een mooie website.
HTML biedt ons hiervoor lijstelementen. In deze les ontdek je het verschil tussen ongeordende en geordende lijsten, hoe je ze op de juiste manier nest en waarom lijsten de absolute basis vormen voor moderne navigatiemenu's!
<ul> en <li>)Een ongeordende lijst (unordered list) gebruik je wanneer de volgorde van de items niet van belang is. De browser toont deze items standaard met ronde bolletjes (bullets).
Een lijst opbouwen doe je altijd met een combinatie van twee soorten tags:
<ul>: De overkoepelende container die de hele lijst omvat.<li>: Staat voor list item. Dit is elk individueel puntje binnen de lijst.<h3>Benodigdheden voor de zeefdrukworkshop:</h3>
<ul>
<li>Raamwerk met gaas</li>
<li>Rakel</li>
<li>Zeefdrukinkt op waterbasis</li>
<li>Katoenen t-shirts of papier</li>
</ul>
Opgelet: Plaats nooit losse tekst of andere tags rechtstreeks binnen een<ul>tag! Alle inhoud van een lijst moet altijd netjes verpakt worden binnen een<li>element.
<ol> en <li>)Een geordende lijst (ordered list) gebruik je wanneer de volgorde van de stappen wél belangrijk is. Denk aan een stappenplan, een handleiding of een rangschikking. De browser nummeren de items automatisch (1., 2., 3., enz.).
<h3>Stappenplan: Drukbestand exporteren vanuit Illustrator</h3>
<ol>
<li>Controleer of alle afbeeldingen in CMYK staan.</li>
<li>Voeg 3 mm afloop (bleed) toe aan je document.</li>
<li>Exporteer het bestand als PDF/X-1a:2001.</li>
<li>Controleer de snijtekens in de PDF-viewer.</li>
</ol>
Je kunt het gedrag van een <ol> aanpassen met specifieke attributen:
start: Bepaalt met welk getal de nummering begint.reversed: Telt de nummering omgekeerd af (handig voor een Top 10 aftelling).type: Verandert het type nummering (1 voor cijfers, A of a voor letters, I of i voor Romeinse cijfers).<!-- Een top 3 aftelling -->
<ol reversed start="3">
<li>Brons</li>
<li>Zilver</li>
<li>Goud</li>
</ol>
<!-- Een lijst met hoofdletters -->
<ol type="A">
<li>Conceptfase</li>
<li>Uitwerkingsfase</li>
<li>Oplevering</li>
</ol>
Soms wil je een hoofdthema onderverdelen in subcategorieën, zoals een inhoudsopgave of een meervoudig menu. Dit noemen we nesten (een lijst binnenin een andere lijst plaatsen).
De sublijst (<ul> of <ol>) moet altijd binnen een <li> element van de hoofdlijst worden geplaatst, vlak vóór de sluitingstag </li>.
<ul>
<li>
Grafische Software
<!-- De sublijst staat IN het li-element -->
<ul>
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe InDesign</li>
</ul>
</li>
<li>Webdesign Tools</li>
</ul>
<ul>
<li>Grafische Software</li>
<!-- FOUT: De sublijst staat rechtstreeks in de ul, buiten de li! -->
<ul>
<li>Adobe Photoshop</li>
</ul>
<li>Webdesign Tools</li>
</ul>
In de wereld van front-end development zul je merken dat vrijwel elk navigatiemenu op een website is gebouwd met een <ul> lijst binnen een <nav> element.
Waarom? Omdat een navigatiemenu inhoudelijk een "lijst van links" is. Door deze HTML-structuur te gebruiken, begrijpen zoekmachines en schermlezers direct dat het om de hoofdnavigatie van de site gaat.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
<li><a href="pages/diensten.html">Diensten</a></li>
<li><a href="pages/contact.html">Contact</a></li>
</ul>
</nav>
Tip: Met CSS kun je later de bolletjes van de<ul>verwijderen (list-style: none;) en de items naast elkaar zetten (display: flex;) om van een standaard lijst een strakke, horizontale menubalk te maken!
<ul> (unordered list) voor lijsten waar de volgorde niet uitmaakt (bolletjes).<ol> (ordered list) voor stappenplannen en volgordes (nummers).<li> (list item).<li> element van de hoofdlijst.<nav> met daarin een <ul> van klikbare links.