Lijsten in HTML

Lijsten zijn een integraal onderdeel van webcontent, waarmee structurele informatie en gegevens op een georganiseerde manier worden weergegeven. HTML biedt verschillende elementen om zowel geordende als ongeordende lijsten te creëren, evenals beschrijvende lijsten voor termen en definities.

Ongeordende lijsten: <ul> en <li>

Ongeordende lijsten, aangeduid met het <ul>-element, hebben lijstitems die geen specifieke volgorde hebben. Elk item binnen deze lijst wordt gedefinieerd met het <li>-element.

    <ul>
        <li>Appel</li>
        <li>Banaan</li>
        <li>Kers</li>
    </ul>
    

• Appel
• Banaan
• Kers

Gebruik van <ul> in Navigatiebalken

Een veelvoorkomende toepassing van de <ul> en <li> elementen is in navigatiebalken. Veel websites maken gebruik van ongeordende lijsten om navigatielinks te structureren. Gecombineerd met CSS en soms JavaScript, kan een eenvoudige lijst worden getransformeerd in een stijlvolle en interactieve navigatiebalk.

    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">Over</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    

Geordende lijsten: <ol> en <li>

Geordende lijsten, aangeduid met het <ol>-element, hebben een specifieke volgorde. Net als bij ongeordende lijsten wordt elk item gedefinieerd met het <li>-element.

    <ol>
        <li>Eerste stap</li>
        <li>Tweede stap</li>
        <li>Derde stap</li>
    </ol>
    

1. Eerste stap
2. Tweede stap
3. Derde stap

Beschrijvende Lijsten: <dl>, <dt> en <dd>

Beschrijvende lijsten, aangeduid met het <dl>-element, zijn bedoeld voor het weergeven van termen en hun bijbehorende definities. De term wordt gedefinieerd met het <dt>-element en de bijbehorende definitie met het <dd>-element.

    <dl>
        <dt>HTML</dt>
        <dd>Een opmaaktaal voor het structureren van webcontent.</dd>
        <dt>CSS</dt>
        <dd>Een stijlbladtaal voor het vormgeven van webcontent.</dd>
    </dl>
    

HTML

Een opmaaktaal voor het structureren van webcontent.

CSS

Een stijlbladtaal voor het vormgeven van webcontent.

In toekomstige hoofdstukken zullen we dieper ingaan op geavanceerde lijststijlen en gebruikspatronen, zoals het maken van navigatiebalken met behulp van lijsten.

Terug naar boven