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.
 |
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.
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:
| Style | Beschrijving |
|---|---|
| <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 |
Voorbeeld: met stip
<ul style="list-style-type:disc">
<li>Tomaten</li>
<li>Aardappels</li>
</ul>
Voorbeeld: met vierkantjes
<ul style="list-style-type:square">
<li>Tomaten</li>
<li>Aardappels</li>
</ul>
Voorbeeld: met cirkels
<ul style="list-style-type:circle">
<li>Tomaten</li>
<li>Aardappels</li>
</ul>
Voorbeeld: zonder symbolen
<ul style="list-style-type:none">
<li>Tomaten</li>
<li>Aardappels</li>
</ul>
|
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.
| Type | Beschrijving |
|---|---|
| <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:
Voorbeeld: met kleine Romeinse cijfers
<ol type="i">
<li>Bananen</li>
<li>Perziken</li>
</ol>
Voorbeeld: met hoofdletters Romeinse cijfers
<ol type="I">
<li>Bananen</li>
<li>Perziken</li>
</ol>
|
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. |
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:
| Tag | Beschrijving |
|---|---|
| <dl> | Definieert het begin van de lijst |
| <dt> | Definieert het termgedeelte |
| <dd> | Beschrijving van een item |
| </dl> | Definieert het einde van de lijst |
Voorbeeld:
<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:
Voorbeeld:
<!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:
Voorbeeld:
<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>
