web-dev-qa-db-fra.com

Manière correcte de faire la liste HTML imbriquée?

Les documents W3 ont un exemple de liste imbriquée préfixé par DEPRECATED EXAMPLE:, mais ils ne l'ont jamais corrigé avec un exemple non obsolète, ni expliqué en quoi ce qui ne va pas.

Alors, lequel de ces moyens est la bonne façon d'écrire une liste HTML?

Option 1 : le <ul> imbriqué est un enfant du parent <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>

Option 2 : le <ul> imbriqué est un enfant du <li> auquel il appartient

<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>
htmlhtml-listsnested-lists
473
Ricket

L'option 2 est correcte.

La liste imbriquée doit être à l'intérieur d'un élément <li> de la liste dans laquelle elle est imbriquée.

Lien vers le Wiki sur les listes du W3C (tiré du commentaire ci-dessous): Wiki des listes HTML .

Lien vers la spécification HTML5 W3C ul: HTML5 ul . Notez qu'un élément ul peut contenir exactement zéro ou plusieurs éléments li. La même chose s'applique à HTML5 ol . La liste de description ( HTML5 dl ) est similaire, mais autorise les deux éléments dt et dd.

Plus de notes:

  • dl = liste de définitions.
  • ol = liste ordonnée (nombres).
  • ul = liste non ordonnée (puces).
478
DwB

Option 2

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

Listes imbriquées - UL

57
csi

L'option 2 est correcte: le <ul> imbriqué est un enfant du <li> auquel il appartient.

Si vous validez , l'option 1 apparaît comme une erreur dans le code HTML 5 - crédit: ser3272456

Correct: <ul> en tant qu'enfant de <li>

La manière appropriée de créer une liste HTML imbriquée consiste à utiliser le <ul> imbriqué en tant qu'enfant du <li> auquel il appartient. La liste imbriquée doit être à l'intérieur de l'élément <li> de la liste dans laquelle elle est imbriquée.

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

Norme W3C pour Listes imbriquées

Un élément de la liste peut contenir une autre liste complète - on appelle cela "imbriquer" une liste. C'est utile pour des choses comme les tables des matières, comme celle au début de cet article:

  1. Chapitre un
    1. Section un
    2. Section deux
    3. Section trois
  2. Chapitre deux
  3. Chapitre trois

La clé pour imbriquer des listes est de se rappeler que la liste imbriquée doit se rapporter à un élément de liste spécifique. Pour refléter cela dans le code, la liste imbriquée est contenue dans cet élément de liste. Le code de la liste ci-dessus ressemble à ceci:

<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>

Notez comment la liste imbriquée commence après le <li> et le texte de l'élément de liste contenant ("Chapitre un"); puis se termine avant le </li> de l’élément de liste contenant. Les listes imbriquées constituent souvent la base des menus de navigation du site Web, car elles constituent un bon moyen de définir la structure hiérarchique du site Web.

Théoriquement, vous pouvez imbriquer autant de listes que vous le souhaitez, bien qu'en pratique, il puisse être déroutant de les imbriquer trop profondément. Pour les très grandes listes, il peut être préférable de scinder le contenu en plusieurs listes avec des en-têtes, ou même de le scinder en pages séparées.

29
Geoffrey Hale

Si vous validez, l'option 1 apparaît comme une erreur dans le langage HTML 5, l'option 2 est donc correcte.

7
user3272456

Je préfère l’option deux, car elle indique clairement que l’élément de la liste est le détenteur de cette liste imbriquée. Je serais toujours pencher vers un HTML sémantiquement sain.

6
Ken Gregory

Avez-vous pensé à utiliser le TAG "dt" au lieu de "ul" pour les listes imbriquées? Son style hérité et sa structure vous permettent d'avoir un titre par section et compile automatiquement le contenu qui y est inséré.

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

CONTRE

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