Lijsten


HTML Lijsten

HTML biedt web auteurs drie manieren voor het opgeven van lijsten met informatie. Alle lijsten moeten één of meer elementen van een lijst bevatten en elk type lijst maakt gebruik van zijn eigen unieke lijst tag, die we hieronder zullen beschrijven.

<ul> - Een ongeordende lijst - In een ongeordende lijst hebben de items een symbool als markering.

<ol> - Een geordende lijst - In een geordende lijst zijn de items genummerd met behulp van een getal of een letter.

<dl> - Een definitielijst - Bij een definitielijst zijn de items op dezelfde manier gerangschikt als in een woordenboek.

Tip De ongeordende of geordende lijst is handig voor het benadrukken van meerdere korte regels met informatie.


Ongeordende lijst

Een ongeordende lijst is een verzameling van gerelateerde items die geen speciale volgorde hebben. Deze lijst wordt gemaakt met behulp van de HTML <ul> tag. Elk item in de lijst is gemarkeerd met een symbool.

VoorbeeldVoorbeeld:
<ul>
  <li>Tomaten</li>
  <li>Aardappels</li>
</ul>

Je kunt het style attribuut voor de <ul> tag gebruiken om de stijl van het symbool te veranderen. Standaard is dit een stip (bullet). Hieronder volgt een lijst met de mogelijke opties:

StyleBeschrijving
<list-style-type:disc>De lijst items worden gemarkeerd met een stip (Standaard)
<list-style-type:square>De lijst items worden gemarkeerd met vierkantjes
<list-style-type:circle>De lijst items worden gemarkeerd met cirkels
<list-style-type:none>De lijstitems worden niet gemarkeerd

VoorbeeldVoorbeeld: met stip
<ul style="list-style-type:disc">
  <li>Tomaten</li>
  <li>Aardappels</li>
</ul>

VoorbeeldVoorbeeld: met vierkantjes
<ul style="list-style-type:square">
  <li>Tomaten</li>
  <li>Aardappels</li>
</ul>

VoorbeeldVoorbeeld: met cirkels
<ul style="list-style-type:circle">
  <li>Tomaten</li>
  <li>Aardappels</li>
</ul>

VoorbeeldVoorbeeld: zonder symbolen
<ul style="list-style-type:none">
  <li>Tomaten</li>
  <li>Aardappels</li>
</ul>

Tip Je kunt ook het attribuut <ul type="disc"> gebruiken dit werk ook en is korter, maar in HTML5 is het type attribuut niet geldig in ongeordende lijsten maar alleen in geordende lijsten.


Geordende lijst

Als je verplicht bent om je items in een genummerde lijst te zetten met behulp van een getal of een letter in plaats van symbolen, dan wordt de geordende lijst gebruikt. Deze lijst wordt gemaakt met behulp van de <ol> tag.

VoorbeeldVoorbeeld:
<ol>
  <li>Bananen</li>
  <li>Perziken</li>
</ol>

TypeBeschrijving
<type="1">De lijst met items worden genummerd met getallen (standaard)
<type="a">De lijst met items worden genummerd met kleine letters
<type="A">De lijst met items worden genummerd met hoofdletters
<type="i">De lijst met items worden genummerd met kleine Romeinse cijfers
<type="I">De lijst met items worden genummerd met hoofdletters Romeinse cijfers

Je kunt het type attribuut voor de <ol> tag gebruiken om het type nummering op te geven. Standaard is dit een getal. Hieronder volgt een lijst met de mogelijke opties:

VoorbeeldVoorbeeld: met getallen
<ol type="1">
  <li>Bananen</li>
  <li>Perziken</li>
</ol>

VoorbeeldVoorbeeld: met kleine letters
<ol type="a">
  <li>Bananen</li>
  <li>Perziken</li>
</ol>

VoorbeeldVoorbeeld: met hoofdletters
<ol type="A">
  <li>Bananen</li>
  <li>Perziken</li>
</ol>

VoorbeeldVoorbeeld: met kleine Romeinse cijfers
<ol type="i">
  <li>Bananen</li>
  <li>Perziken</li>
</ol>

VoorbeeldVoorbeeld: met hoofdletters Romeinse cijfers
<ol type="I">
  <li>Bananen</li>
  <li>Perziken</li>
</ol>

Tip Je kunt ook het start attribuut voor de <ol> tag gebruiken om het beginpunt van een nummering op te geven. Voorbeeld: <ol type="1" start="5"> de nummering begint vanaf 5.

VoorbeeldVoorbeeld:
<ol type="1" start="5">


Definitielijst

Dit zijn lijsten waar gegevens worden vermeld als in een woordenboek of encyclopedie. Een definitielijst is de ideale manier om een woordenlijst of een lijst met woorden te presenteren met een beschrijving van elke woord.

Een definitielijst maakt gebruik van de volgende tags:

TagBeschrijving
<dl>Definieert het begin van de lijst
<dt>Definieert het termgedeelte
<dd>Beschrijving van een item
</dl>Definieert het einde van de lijst

VoorbeeldVoorbeeld:
<dl>
 <dt><b>HTML</b></dt>
 <dd>HTML staat voor Hyper Text Markup Language</dd>
 <dt><b>HTTP</b></dt>
 <dd>HTTP staat voor Hyper Text Transfer Protocol</dd>
</dl>



Horizontale weergave

HTML lijsten kunnen ook horizontaal worden weergegeven i.p.v verticaal. Dit kan men op vele verschillende manieren doen met CSS. Hieronder zie je een simpele voorbeeld:

VoorbeeldVoorbeeld:
<!DOCTYPE html>
<html>

<head>
<style>
ul#nav li {
    display:inline;
    }
</style>
</head>

<body>

<h2>Horizontale weergave</h2>

<ul id="nav">
  <li>Tomaten</li>
  <li>Aardappels</li>
  <li>Wortels</li>
  <li>Meloenen</li>
</ul> 

</body>
</html>

Met een beetje extra stijl, kun je het eruit laten zien als een menu:

VoorbeeldVoorbeeld:
<style>
ul#nav { 
    background-color: #0094cb;
    padding: 20px;		 
    }
ul#nav li {
    display:inline;
    }
ul#nav a {
    color: #fff;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none; 
    }
ul#nav li a:hover {
    background-color: #00303f;
    border-radius: 3px;
    }
</style>