Misschien vraag je jezelf af waarom je in hemelsnaam ooit een lijst zou willen gebruiken. Ik zal maar gelijk antwoord geven op deze vraag: altijd. Denk bijvoorbeeld aan een menu. Eigenlijk is dat gewoon een verzameling van links en is een lijst daarvoor natuurlijk de beste oplossing. In dit hoofdstuk gaan we dus kijken naar de verschillende soorten lijsten en waarvoor we ze kunnen gebruiken.

In HTML onderscheiden we drie soorten lijsten:

1. ongeordende lijsten;
2. geordende lijsten;
3. en definitielijsten.

Ongeordende lijsten

Bij een ongeordende lijst is de volgorde van de punten onbelangrijk, zoals bijvoorbeeld bij een menu voor je website. Een ongeordende lijst gebruikt het UL element. In dat element komen de punten van de lijst. Elk punt zit in een LI element. Dat ziet er dus als volgt uit:

<ul>
 <li>Punt</li>
 <li>Punt</li>
 <li>Punt</li>
 <li>Punt</li>
</ul>

De bovenstaande code ziet er uit als de lijst hieronder:

• Punt
• Punt
• Punt
• Punt

Geordende lijsten

Zoals je ziet waren ongeordende lijsten heel gemakkelijk te maken. Geordende lijsten zijn net zo makkelijk. Deze worden altijd gebruikt als de volgorde van de punten wel belangrijk is. Een stappenplan is dus een goed voorbeeld van een lijst met punten die geordend moet worden.

Als we naar de HTML code van geordende lijsten kijken is er mij één verschil met ongeordende lijsten: i.p.v. het UL element gebruiken we het OL element. Hieronder het vorige voorbeeld maar dan als geordende lijst:

<ol>
 <li>Punt</li>
 <li>Punt</li>
 <li>Punt</li>
 <li>Punt</li>
</ol>

1. Punt
2. Punt
3. Punt
4. Punt

Definitie lijsten

Een definitie lijst wordt, zoals de naam al zegt, voornamelijk gebruikt om definities op te sommen en daarvan de omschrijving te geven. Deze lijstsoort ziet er iets anders uit dan de vorige twee die we hebben besproken. Het element dat we gebruiken om aan te geven dat het een definitie lijst is DL. In dat element worden de definities opgesomt in DT elementen. De omschrijving van die definities worden gegeven in DD elementen. Dat ziet er dus als volgt uit:

<dl>
 <dt>Definitie</dt>
 <dd>Omschrijving</dd>
 <dt>Definitie</dt>
 <dd>Omschrijving</dd>
</dl>

Definitie

Omschrijving

Definitie

Omschrijving

Maar zoals je misschien zag, stond er in de vorige alinea het woord "voornamelijk" toen de functie van definitie lijsten gegeven werd. Dit was omdat een definitie lijst niet alleen daarvoor gebruikt hoeft te worden. Kijk bijvoorbeeld maar naar het menu aan de rechterkant van elke pagina. De kopjes zijn DT elementen, en de links daaronder zijn in DD elementen. Probeer het niet gelijk te overdrijven door alles in DLs te doen, maar onthoudt wel dat je een DL niet alleen hoeft te gebruiken voor definities en de uitleg daarvan.

Lijsten opmaken

Zoals in de inleiding van dit hoofdstuk staat, kan je voor een menu van je website het beste een lijst gebruiken. Het eerste menu wat onder het logo van Modern Markup staat is ook in een lijst. Dit hebben we gedaan omdat een menu eigenlijk een collectie links is. Daarom is het logisch om het menu als één geheel in een lijst te doen. Als je de HTML code van die bekijkt, ziet die er ongeveer zo uit:

<ul>
 <li><a href="/">Nieuws</a></li>
 <li><a href="/tutorial/">Inhoudsopgave</a></li>
 <li><a href="/referentie/">Referentie</a></li>
 <li><a href="/download/">Download</a></li>
 <li><a href="/contact/">Contact</a></li>
</ul>

Maar ja, we moeten natuurlijk niet dat elke link op een aparte regel staat met zo'n dom bolletje ervoor. Dus daar moet wat aan gedaan worden. Laten we de CSS code er eens bij pakken. Deze ziet er ongeveer zo uit:

ul {
	list-style:none;
	background:url(nav-right.png) no-repeat top right;
	padding:.5em 1em;
}

li {
	display:inline;
	margin:0 1em;
}

a {
	color:#7B7B7B;
	text-decoration:none;
}

Als eerste zien we dat de UL aangepakt wordt. Het eerst eigenschap van dat element is list-style die de waarde none heeft. Die zorgt ervoor dat die bolletjes weg gaan. Dan zien we een deel van de achtergrond (het uiterst rechter stukje van de achtergrond om precies te zijn) en daaronder staat padding die wat ruimte creëert binnen het menu zodat de links niet helemaal aan de linker- en bovenkant van de lijst zijn vastgeplakt.

Daarna worden de LI elementen opgemaakt. Als eerste zien we display:inline. Dat is misschien we het belangrijkste van alles, want die zorgt ervoor dat links mooi naast elkaar op één regel komen te staan i.p.v. onder elkaar. Daaronder staat margin die voor wat ruimte tussen de LIs zorgt. Daarna zien we dat alle links (de A elementen) worden opgemaakt en is het menu af! Voilà.

Nu gaan we voor wat interactie zorgen met formulieren »