Plaats elke sublijst binnen het lijstitem waartoe deze behoort, vóór de afsluitende tag van dat item, om HTML-lijsten correct te nesten. Deze gids laat zien hoe je met TextEdit en Safari op een Mac een voorbeeld met drie niveaus maakt, opslaat en bekijkt.

Waar hoort een geneste HTML-lijst?

Een HTML-lijst heeft twee structurele onderdelen: een lijstcontainer en de items ervan. Gebruik <ul> voor een ongeordende lijst en <ol> voor een geordende lijst. Elk gewoon item staat tussen <li> en </li>. Een geneste lijst hoort binnen een van die items. De lijstenhandleiding van Google laat precies dit nestpatroon zien.

De essentiële volgorde is: open het bovenliggende item, schrijf het label, voeg de volledige sublijst in en sluit daarna het bovenliggende item. Als je de afsluitende tag zichtbaar houdt, kun je de relatie gemakkelijker controleren.

Dit correcte HTML-fragment geeft Groep A twee onderliggende items, terwijl Groep B op het buitenste niveau blijft:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

Lees de afsluitende tags van binnen naar buiten. Eerst wordt elk onderliggend item afgesloten. Daarna sluit de binnenste lijst met </ul>. Vervolgens wordt Groep A afgesloten met </li>. Pas daarna begint Groep B. Zo kun je dit praktisch controleren: zoek de openings- en afsluitende tags van het bovenliggende item en controleer of de volledige sublijst ertussen staat.

De HTML-standaard staat toe dat <li>-elementen flow content bevatten, waaronder lijsten. Het inhoudsmodel voor <ul> en <ol> staat lijstitems en script-ondersteunende elementen toe; een andere lijstcontainer direct binnen de buitenste container is niet toegestaan. Zie de definities van groeperingsinhoud in de HTML-standaard.

Kies het lijsttype afzonderlijk voor elk niveau

Vraag jezelf af of een andere volgorde van de items hun betekenis zou veranderen. Zo ja, kies dan <ol>. Zijn de items een verzameling waarvan de betekenis niet afhangt van de volgorde, kies dan <ul>. Stel die vraag voor elke sublijst afzonderlijk. De documentatie van Mozilla over geordende lijsten legt zowel de volgordetest als het combineren van lijsttypen uit.

In het uitgewerkte voorbeeld hieronder zijn Groep A en Groep B neutrale categorieën, dus is de buitenste lijst ongeordend. Item A1 en Item A2 vormen ook een ongeordende verzameling. Onder Item A2 komt het openen van een voorbeelddocument vóór het hernoemen ervan, dus gebruiken die twee instructies een geordende lijst.

Relatie tussen inhoud Lijstkeuze Plaatsing
Een verzameling groepen <ul> Rond de groepsitems
Items die bij Groep A horen <ul> Binnen de <li> van Groep A
Een reeks die bij Item A2 hoort <ol> Binnen de <li> van Item A2
Items die bij Groep B horen <ul> Binnen de afzonderlijke <li> van Groep B

Een verandering van opsommingstekens naar nummers vereist geen andere nesttechniek. Het bovenliggende item bevat nog steeds de volledige onderliggende lijst. De documentatie van Mozilla ondersteunt uitdrukkelijk het nesten van geordende en ongeordende lijsten op meerdere niveaus. Gebruiksnotities voor geordende lijsten

Maak een compleet document met geneste lijsten in TextEdit

Het volgende voorbeeld is een volledig HTML-document. Het gebruikt voorbeeldlabels en vereist geen gedownloade bestanden of extra code. De structuur bevat vier lijsten en acht lijstitems: twee buitenste groepen, vier items verdeeld over die groepen en twee instructies onder Item A2.

Kies in TextEdit File > New en vervolgens Format > Make Plain Text. Plak het volledige voorbeeld hieronder. Apple beschrijft deze werkwijze met platte tekst voor het maken van HTML-bestanden in de HTML-handleiding voor TextEdit.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Kies File > Save, geef het bestand de naam nested-lists.html en sla het op een gemakkelijk te vinden plek op. Als TextEdit vraagt welke extensie je wilt gebruiken, kies dan Use .html. Dit zijn de door Apple beschreven stappen voor het opslaan van HTML. Kopieer alleen de code binnen het codeblok; laat de Markdown-regels met de scheidingstekens weg.

Selecteer het opgeslagen bestand in Finder en kies File > Open With > Safari. Apple beschrijft hoe je een toepassing selecteert via File > Open With in Een app kiezen om een bestand te openen op de Mac.

Vergelijk de weergave met de volgende verwachte relaties:

  • Groep A en Groep B zijn zusteritems op het buitenste niveau.
  • Item A1 en Item A2 horen bij Groep A.
  • De twee genummerde instructies horen alleen bij Item A2.
  • Item B1 en Item B2 horen bij Groep B.

Controleer die relaties zowel in de broncode als in de weergave. De expliciete tags en relaties tussen lijsten en hun bovenliggende elementen in het voorbeeld zijn programmatisch gecontroleerd; de weergave ervan in Safari is hier niet getest.

Stel vast waarom een sublijst aan het verkeerde item is gekoppeld

Gebruik de volgende stappen wanneer een bestaand document de juiste woorden bevat, maar de hiërarchie niet klopt. Werk telkens met één bovenliggend item en de directe onderliggende items, te beginnen bij de buitenste lijst.

1. Zoek een bovenliggend item dat te vroeg wordt afgesloten

In dit onjuiste fragment wordt Groep A afgesloten voordat de sublijst begint:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

De binnenste <ul> is hier een direct onderliggend element van de buitenste <ul>. Verplaats de </li> van Groep A naar onder de binnenste </ul>, zodat het bovenliggende item de sublijst bevat. Deze reparatie volgt de plaatsingsregel in het voorbeeld van een geneste lijst van Google.

2. Controleer of de structuur geldig is, maar het verkeerde bovenliggende item heeft

Een lijst kan aan de nestregels voldoen en toch de verkeerde relatie beschrijven. Als je de genummerde instructies bijvoorbeeld binnen Item A1 plaatst, koppel je ze aan Item A1, ook als het de bedoeling was dat ze bij Item A2 hoorden. Correcte syntaxis alleen kan de beoogde groepering niet vastleggen.

Vraag jezelf bij elke sublijst af: ‘Van welk item omvat de openingstag deze volledige lijst?’ Vergelijk het label van dat item met het bedoelde bovenliggende item. In het volledige voorbeeld zou je, als je vanaf de genummerde instructies naar buiten volgt, uitkomen bij Item A2 en vervolgens bij Groep A. Kom je bij een ander label uit, verplaats dan de volledige sublijst voordat je de weergave aanpast.

3. Maak afsluitende tags expliciet tijdens het bewerken

Onder bepaalde voorwaarden mag de afsluitende </li>-tag van een item in HTML worden weggelaten, bijvoorbeeld wanneer er direct een ander item volgt. Je hoeft die verkorte schrijfwijze niet te gebruiken. Schrijf tijdens het leren of herstellen van nesten elke afsluitende itemtag uit, zodat elke grens zichtbaar is. Mozilla geeft de precieze voorwaarden voor het weglaten ervan in het technische overzicht van lijstitems.

Gebruik inspringing als hulpmiddel tijdens het bewerken: laat een onderliggende lijst inspringen onder het label van het bovenliggende item en lijn overeenkomende openings- en afsluitende lijsttags uit. Controleer vervolgens de daadwerkelijke taggrenzen. Inspringing maakt de beoogde relatie gemakkelijker leesbaar; de omsluitende elementen leggen die relatie vast.

4. Houd alineawrappers binnen hun eigen grenzen

Als het label van een bovenliggend item een alinea nodig heeft, sluit die alinea dan voordat je de sublijst opent, terwijl je beide binnen het bovenliggende item houdt. De HTML-standaard bepaalt dat lijstcontainers geen kinderen van <p>-elementen kunnen zijn. Inhoudsregels voor HTML-alinea’s

Dit geldige fragment houdt de labelalinea en de onderliggende lijst samen binnen Groep A:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

Open de broncode opnieuw en behoud de hiërarchie bij wijzigingen

Als het bestand bij het opnieuw openen in TextEdit opgemaakte inhoud toont in plaats van tags, kies dan File > Open, selecteer het bestand, klik op Show Options, selecteer Ignore rich text commands en klik op Open. Voor toekomstige bestanden biedt Apple ook TextEdit > Settings > Open and Save met de optie Display HTML files as HTML code instead of formatted text. HTML als code weergeven in TextEdit

Verplaats je een item, verplaats dan het volledige <li>-blok, inclusief eventuele sublijsten. Als je bijvoorbeeld Item A2 verplaatst, moet je de twee instructies erbij houden. Als je alleen het label verplaatst, blijven die instructies achter en verandert de beoogde groepering van het document.

Controleer voordat je een aangepaste versie opslaat drie dingen: elke onderliggende lijst wordt omsloten door het bedoelde bovenliggende item; items op hetzelfde niveau blijven in de vereiste volgorde staan; en elke lijst gebruikt opsommingstekens of nummering op basis van de vraag of de volgorde van belang is. Sla het bestand op, open het opnieuw in Safari en vergelijk de zichtbare groepen met het schema dat je voor ogen hebt. Als je elk bovenliggend item samen met de volledige onderliggende structuur houdt, kun je toekomstige wijzigingen gemakkelijker controleren.

Bronnen