De juiste manier om een geneste HTML-lijst te maken?

De W3-documenten hebben een voorbeeld van een geneste lijstvoorafgegaan door DEPRECATED EXAMPLE:, maar ze hebben het nooit gecorrigeerd met een niet-verouderd voorbeeld, noch hebben ze precies uitgelegd wat er mis is met het voorbeeld.

Dus welke van deze manieren is de juiste manier om een HTML-lijst te schrijven?

Optie 1: de geneste <ul>is een onderliggend item van de bovenliggende <ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

Optie 2: de geneste <ul>is een onderliggend item van de <li>waartoe het behoort

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

Antwoord 1, autoriteit 100%

Optie 2is correct.

De geneste lijst moet in een <li>elementvan de lijst staan waarin deze is genest.

Link naar de W3C Wiki on Lists (overgenomen uit onderstaande opmerking): HTML Lists Wiki.

Link naar de HTML5 W3C ul-specificatie: HTML5 ul. Merk op dat een ulelement exact nul of meer lielementen kan bevatten. Hetzelfde geldt voor HTML5 ol.
De beschrijvingslijst (HTML5 dl) is vergelijkbaar, maar staat zowel dtals ddelementen toe.

Meer opmerkingen:

  • dl= definitielijst.
  • ol= geordende lijst (cijfers).
  • ul= ongeordende lijst (opsommingstekens).

Antwoord 2, autoriteit 12%

Optie 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

Lijsten nesten – UL


Antwoord 3, autoriteit 7%

Optie 2 is correct: de geneste <ul>is een onderliggend element van de <li>waartoe het behoort.

Als u valideert, verschijnt optie 1 als een fout in html 5 — credit: gebruiker3272456


Correct: <ul>als onderliggend item van <li>

De juiste manier om een geneste HTML-lijst te maken is met de geneste <ul>als een kind van de <li>waartoe het behoort. De geneste lijst moet zich binnen het <li>-element van de lijst bevinden waarin deze is genest.

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

W3C-standaard voor Nestlijsten

Een lijstitem kan een andere volledige lijst bevatten — dit staat bekend als het “nesten” van een lijst. Het is handig voor zaken als inhoudsopgaven, zoals die aan het begin van dit artikel:

  1. Hoofdstuk één
    1. Sectie één
    2. Sectie twee
    3. Sectie drie
  2. Hoofdstuk twee
  3. Hoofdstuk drie

De sleutel tot het nesten van lijsten is te onthouden dat de geneste lijst betrekking moet hebben op één specifiek lijstitem. Om dat in de code weer te geven, bevindt de geneste lijst zich in dat lijstitem. De code voor de bovenstaande lijst ziet er ongeveer zo uit:

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

Merk op hoe de geneste lijst begint na de <li>en de tekst van het bevattende lijstitem (“Hoofdstuk Een”); eindigt dan voor de </li>van het bevattende lijstitem. Geneste lijsten vormen vaak de basis voor website-navigatiemenu’s, omdat ze een goede manier zijn om de hiërarchische structuur van de website te definiëren.

Theoretisch kun je zoveel lijsten nesten als je wilt, hoewel het in de praktijk verwarrend kan zijn om lijsten te diep te nesten. Voor zeer grote lijsten is het misschien beter om de inhoud op te splitsen in verschillende lijsten met koppen, of zelfs op te splitsen in afzonderlijke pagina’s.


Antwoord 4

Als u valideert, verschijnt optie 1 als een fout in html 5, dus optie 2 is correct.


Antwoord 5

Ik geef de voorkeur aan optie twee omdat het het lijstitem duidelijk laat zien als de bezitter van die geneste lijst. Ik zou altijd neigen naar semantisch verantwoorde HTML.


Antwoord 6

Heb je erover nagedacht om de TAG “dt” te gebruiken in plaats van “ul” voor nestlijsten? Dankzij de overervende stijl en structuur kun je een titel per sectie hebben en wordt automatisch de inhoud in een tabel weergegeven.

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>

Antwoord 7

Wat hier niet wordt vermeld, is dat je met optie 1 willekeurig diep kunt nesten van lijsten.

Dit zou niet moeten uitmaken als je de inhoud/css beheert, maar als je een rich text-editor maakt, is dat handig.

Bijvoorbeeld gmail, inbox en evernote staan het maken van lijsten als volgt toe:

Met optie 2 kun je dat niet betalen (je hebt een extra lijstitem), met optie 1 wel.

Other episodes