HTML lijsten maken

Japabako

HTML lijsten

Voor het opsommen van informatie in een HTML document of op een webpagina gebruiken we de unordered, de ordered en de definition list elementen, de daarin gemarkeerde items kunnen zo door een browser in het documentvenster als lijst worden weergegeven. Behalve tekst kunnen ook site navigatie en andere hyperlinks in een lijst worden opgenomen. Afbeelding met gemarkeerde voorbeeld lijsten

Unordered list

De unordered list wordt gemarkeerd met <ul> tags. De inhoud van het unordered list element bestaat uit list items gemarkeerd met <li> tags. De webpagina weergave van de unordered list intems wordt in de meeste browsers standaard met een bulit voor de items weergegeven. De hierna volgende voorbeeld pagina bron is van een unordered list met drie list items.

<ul> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

Ordered list

De orderd list wordt gemarkeerd met <ol> tags en de list items binnen deze markering worden in de webpagina weergave vooraf gegaan door een hiƫrarchisch teken. In de volgende voorbeeld broncode zie je in het laatste list item van de geordende lijst een genestelde ongeordende lijst.

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item<ul> <li>list item</li> <li>list item</li> <li>list item</li> </ul></li></ol>

Definition list

De definition list wordt gemarkeerd met <dl> tags, aan de inhoud van de geneste definition term elementen kan aanvullende informatie worden gekoppeld in het volgend definition data element. Zoals bijvoorbeeld de beschrijving van de betekenis van woorden in een woordenboek of het koppelen van telefoon nummers aan namen in een telefoonboek.

<dl> <dt>definition term</dt> <dd>definition data</dd> <dt>definition term</dt> <dd>definition data</dd> </dl>

Navigatie lijst

Geordende en ongeordende lijsten worden ook veel gebruikt voor het structureren van de navigatie op een website, dit wordt dan gedaan door de site navigatie links als list items te nesten in list elementen.

<ul> <li><a href="">klick</a></li> <li><a href="">klick</a></li> <li><a href="">klick</a></li> </ul>