Er is waarschijnlijk geen plek in huis waar zo veel gewerkt wordt met lijstjes als in de keuken. Geen betere plek om aan te geven welke lijstjes je kunt gebruiken en wanneer je ze gebruikt (of juist niet).

In mijn zoektocht naar geschikte voorbeelden kwam ik vreemde uitingen tegen. Waarschijnlijk met de allerbeste bedoelingen lijken lijstjes het duizenddingendoekje voor de markup:

<ul>
 <li><label>Tekst vergroten</label></li>
 <li><a href="#verkleinen" id="min">-</a></li>
 <li><a href="#vergroten" id="plus">+</a></li>

</ul>

Deze enthousiaste front-ender schoot net iets te ver door. “Tekst vergroten” is niet een onderdeel uit een opsomming, je zou het nog kunnen zien als een kopje. Verder kun je je afvragen of alleen een + of - wel voldoende content is om twee verschillende lijst-items te vullen. Gewoon een voorbeeld waarbij ik wil aantekenen dat er waarschijnlijk veel tragischere voorbeelden uit mijn eigen archief opgediept hadden kunnen worden.

Dit artikel gaat dus in op welke lijstjes je kunt gebruiken en wanneer je ze gebruikt (of juist niet). We gaan meer betekenis aan de HTML geven.

Kijk eens wat beter om je heen

Dan Cederholm gaf hiervoor de voorzet met zijn Simplequiz. In het (koffietafel)boek Transcending CSS borduurt Andy Clarke verder op deze quiz en liet – aan de hand van foto’s – zien dat je op veel plekken structuur tegenkomt die je direct kunt vertalen naar betekenisvolle markup. Het nadeel van deze methode kan zijn dat je overal lijstjes begint te zien, maar dat is binnen dit artikel een Cruijffiaans voordeel (omdat hun ook nadelen hebben).

Er is waarschijnlijk geen plek in huis waar zo veel gewerkt wordt met lijstjes als in de keuken. Iedereen zal wel eens een boodschappenlijstje gemaakt hebben of aan de hand van een recept een gerecht op tafel getoverd hebben. De ideale plek om het verschil tussen ul, ol en dl uit te leggen.

Ordening in de chaos

Om snel te kunnen vinden wat je nodig hebt is het altijd goed om de boel te sorteren. In de bestekla van de Verkades liggen — van links naar rechts — de lepels, vorken en de messen.

Dit is voor ons een geordende lijst en het ligt voor de hand om ’m op te maken als een ordered list, maar het is voor een buitenstaander niet relevant welke ordening er is aangebracht. Dus is het een ongeordende lijst. Het is alleen voor mij heel belangrijk dat deze rangschikking er is, maar in jouw bestekla kan (en mag) het heel goed in een andere volgorde liggen.

<ul>
 <li>lepels<li>
 <li>vorken<li>
 <li>messen<li>

</ul>

Dit voorbeeld laat direct zien waar het probleem vaak zit: het is soms lastig te bepalen of je te maken hebt met een geordende of een ongeordende lijst. Wat voor jou een belangrijke volgorde is hoeft dat voor een ander niet te zijn.

De ongeordende lijst

Iedereen kan een heerlijke focaccia zelf maken. We pakken een aardig recept en daar staat wat we moeten doen. Als eerste zullen we naar de winkel moeten, dus gaan we een een boodschappenlijst maken.

Voor het maken van het brood gaan we naar de winkel met de volgende ongeordende lijst:

• een pak bloem
• gist
• een fles goede olijfolie
• grof zeezout

Je mist in de lijst het water en de peper, maar dat laatste staat nog in de keukenkast. De ordening van het boodschappenlijstje is niet relevant voor het eindresultaat. Een unordered list in optima forma. Vandaar dat we dit opmaken met behulp van ul-tags.

In onze praktijk als webwerkers hebben we regelmatig te maken met menu’s, zoals een sitenavigatie. Wat mij betreft zijn dit soort menu’s vrijwel altijd ongeordende lijsten. De volgorde is voor de site-eigenaar meestal zeer interessant, maar voor de bezoeker een stuk minder (net als het geval is in de bestekla van de familie Verkade, waar de volgorde alleen voor ons belangrijk is).

De geordende lijst

Een ander recept, waarbij we niet gaan kijken naar de ingrediënten, maar naar instructie. Als je het recept op tafel wil toveren zoals de bedoeling van de maker was, dan moet je je aan de volgorde houden. Laten we een heerlijk bijgerecht gaan maken, tomaten uit de oven met basilicum en mozzarella

1. De tomatenparten van zes (ovale) tomaten, ontdaan van zaadlijsten, in de schaal leggen
2. Fijngehakte knoflook, zout en peper er op
3. Besprenkelen met olijfolie
4. Drie kwartier in de voorverwarmde oven op 150°C
5. Bestrooien met basilicum en mozzarella

Zodra de volgorde van een lijst belangrijk is noemen we het een geordende lijst en maak je ’m op met <ol>-tags.

De lijst met definities

Een lijst met begrippen die direct verklaard worden kun je het beste opmaken als een definition list.

Zodra je meerdere begrippen uitlegt kun je ze dus in een lijstje zetten. Het W3C blinkt overigens niet uit in duidelijkheid als het gaat om het gebruik van dit lijsttype. Wil je er losjes mee omgaan, dan gebruik je het als wilt aangeven dat er een relatie is tussen het ene en het andere item. Zo kun je heel erg veel en vaak dl’s in je markup gebruiken. Dit laatste heeft wel het gevaar dat je zou kunnen doorschieten. Wat mij betreft hou je het simpel, bijvoorbeeld bij een verklarende woordenlijst. Voor veel andere gevallen heb je ol’s en ul’s in je gereedschapkist.

Soms zijn lijsten helemaal niet handig

Stel je maakt een navigatie van een alfabetisch overzicht. Mooi compact bovenaan de pagina zet je zoiets als onderstaand voorbeeld.

Zo’n lijst met letters is geordend, dus een ordered list zou hier de juiste structuur aan je document geven. Geen speld tussen te krijgen, maar hoe ziet het er uit als CSS uitstaat?

Een behoorlijke verspilling van ruimte en overzicht. De cijfers die nu voor de letters staan zitten hier zelfs de snelle begripsvorming van de navigatie in de weg. Ik zou hier gewoon een paragraaf met linkjes voor willen gebruiken, dat geeft voldoende overzicht lijkt me zo.

Ooit komt alles goed, laten we onze hoop vestigen op HTML5. In de toekomst kunnen we voor dit soort overzichten waarschijnlijk het nav-element gebruiken.

Voorbereid op wat er komen gaat

In de praktijk wil het nog wel eens voorkomen dat je iets als een lijst opmaakt, en dat er uiteindelijk maar één item in gebruikt wordt. Moet je dan de markup aanpassen omdat er maar één item staat, of is het te verdedigen dat je hier toch een lijstje voor gebruikt? Als we de relatie leggen met een boodschappenlijstje, dan staat daar soms ook maar één ding op. Ik noem het dan niet ineens een boodschappenbriefje.

Kortom, ik denk dat het prima te verdedigen is om ook voor één item een lijst te gebruiken. Zeker als je niet weet wat de toekomst brengt. Implementeer je het geheel in een CMS, dan is een nieuw li-element er snel in gezet, terwijl het herschrijven van dat stuk wel eens veel ingrijpender zou kunnen zijn. Maar zie je in de toekomst de content op dat stuk nooit uitbreiden, dan is het gebruik van een lijst natuurlijk af te raden.

Tenslotte

Laat je niet verleiden tot het gebruik van lijstjes voor alles. Het is net als met drank en spijs raadzaam om ze met mate te gebruiken. En mits goed gebruikt kunnen we de conclusie trekken: “Lijstjes zijn ’t allermooist op aard. Niets dat hun schoonheid evenaart. Zeg dat Naar Voren het gezegd heeft.” (vrij naar: Meisjes - Raymond van het Groenewoud)

• Home
• Artikelen
• Colofon