HTML

Lijsten

» HTML

ijsten zijn er in soorten en maten. Ze worden gebruikt om informatie op een rijtje te zetten. Algemeen geldt dat de tekst van een lijst inspringt (witmarge aan de linkerkant). Onderscheiden worden:

1. Ordered Lists: voor geordende informatie. Deze lijsten zijn genummerd.
2. Unordered Lists: voor ongeordende informatie.
3. Definition Lists: voor definities.
4. Menu Lists: voor een lijst in de vorm van een menu. Gebruiken voor korte opsommingen.
5. Directory Lists: voor een lijst in de vorm van een menu. Gebruiken voor zeer korte opsommingen.

Verder aandacht voor: lijsten binnen lijsten (nesten)

Directory Lists en Menu Lists worden nauwelijks meer gebruikt. In versie 4.01 van HTML wordt het gebruik van deze twee afgekeurd. Ze zijn voor de volledigheid toch opgenomen.

Ordered Lists
Deze worden gebruikt om genummerde lijsten te maken. Standaard begint een lijst natuurlijk met met nummer 1, maar daar kan van afgeweken worden. De lijst begint met <ol> (Ordered List). De onderdelen van de lijst worden aangegeven met <li> (List Item). Sluit de lijst af met </ol>.

<ol>
  <li>nummer 1
  <li>nummer 2
  <li>nummer 3
</ol>

Resultaat:

1. nummer 1
2. nummer 2
3. nummer 3

Door value te gebruiken kun je de nummering handmatig aanpassen. Met START geef je een nieuwe beginwaarde op. Deze beide attributen combineer met je <li>. Ook de weergave van de nummering is aan te passen. Gebruik hiervoor in combinatie met <ol> het attribuut type:

1	voor gewone cijfers (wordt gebruikt als er verder geen type is opgegeven)
A	voor HOOFDLETTERS
a	voor kleine letters
I	voor Romeinse cijfers
i	voor kleine Romeinse cijfers

<ol type=I>
  <li value="2">dit wordt nummer 2
  <li value="4">dit wordt nummer 4
  <li>en dan wordt dit nummer 5
</ol>

Resultaat:

2. dit wordt nummer 2
4. dit wordt nummer 4
5. en dan wordt dit nummer 5

Unordered Lists
Deze lijsten worden gebruikt voor niet-geordende informatie. De lijst begint met <ul> (Unordered List). De onderdelen van de lijst worden aangegeven met <li> (List Item). Sluit de lijst af met </ul>.

<ul>
  <li>Een item
  <li>Nog een item
  <li>En nog eentje
</ul>

Resultaat:

• Een item
• Nog een item
• En nog eentje

De weergave van de stip is aan te passen. Gebruik hiervoor in combinatie met <ul> het attribuut type:

disc	een gevuld, zwart rondje (wordt gebruikt als er verder geen type is opgegeven)
round	een open rondje
square	een dicht vierkantje

<ul type="square">
  <li>Een vierkantje
</ul>

Definition Lists
Zoals het woord al aangeeft is deze vorm bij uitstek geschikt voor het definities. De lijst begint met <dl>, de te definiëren term wordt aangegeven met <dt> (Definition Term) en de definitie zelf met <dd> (Definition Data). Sluit de lijst af met </dl>.

NB Eventueel kan <dt> weggelaten worden. De lijst springt dan gewoon in.

<dl>
  <dt>Definitie lijst
  <dd>wordt gebruikt voor definities
  <dt>Definitie 1
  <dd>Dit is de omschrijving van de eerste definitie
  <dt>Definitie 2
  <dd>Dit is de omschrijving van de tweede definitie
</dl>

Resultaat:

Definitie lijst

wordt gebruikt voor definities

Definitie 1

Dit is de omschrijving van de eerste definitie

Definitie 2

Dit is de omschrijving van de tweede definitie

Menu Lists
Deze lijsten lijken erg veel op Unordered Lists, maar zijn iets compacter van vorm. Deze lijst wordt gebruikt voor korte opsommingen. De lijst begint met <menu>. De onderdelen van de lijst worden aangegeven met <li> (List Item). Sluit de lijst af met </menu>.

<menu>
  <li>Voorgerecht
  <li>Hoofdgerecht
  <li>Nagerecht
</menu>

Resultaat:

Voorgerecht

Hoofdgerecht

Nagerecht

Directory Lists
Deze lijsten lijken erg veel op Unordered Lists en Menu Lists. Deze lijst wordt gebruikt voor zeer korte opsommingen. De lijst begint met <dir>. De onderdelen van de lijst worden aangegeven met <li> (list item). Sluit de lijst af met </dir>.

<dir>
  <li>Voorgerecht
  <li>Hoofdgerecht
  <li>Nagerecht
</dir>

Resultaat:

Voorgerecht

Hoofdgerecht

Nagerecht

Lijsten binnen lijsten: nesten
Het is heel goed mogelijk om lijsten binnen lijsten toe te passen. Dit wordt nesten genoemd. Bovendien kan je de diverse soorten lijsten door elkaar heen gebruiken. Dit kan goed van pas komen bij bijvoorbeeld het maken van een inhoudsopgave.

Elke niveau blijft binnen de eigen hiërarchie.

<ul>
  <li>Niveau 1, nummer 1
     <ol>
       <li>Niveau 2, nummer 1
       <li>Niveau 2, nummer 2
     <ol>
<li>Niveau 2, nummer 3
     <ol>
       <li>Niveau 3, nummer 1
     </ol>
       <li>Niveau 2, nummer 3
     </ol>
  <li>Niveau 1, nummer 2
</ul>

Resultaat

• Niveau 1, nummer 1
  1. Niveau 2, nummer 1
  2. Niveau 2, nummer 2
     1. Niveau 3, nummer 1
  3. Niveau 2, nummer 3
• Niveau 1, nummer 2