Question Façon correcte de faire une liste imbriquée HTML?


Les docs W3 ont un exemple de liste imbriquée préfixé par DEPRECATED EXAMPLE:, mais ils ne l'ont jamais corrigé avec un exemple non-déprécié, ni expliqué exactement ce qui ne va pas avec l'exemple.

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

Option 1: l'imbriqué <ul> 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: l'imbriqué <ul> est un enfant de <li> 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>

418
2018-05-05 14:25


origine


Réponses:


Option 2 est correct.

La liste imbriquée devrait être à l'intérieur <li> élément de la liste dans laquelle il est imbriqué.

Lien vers le wiki W3C sur les listes (extrait du commentaire ci-dessous): Listes HTML Wiki.

Lien vers le HTML5 W3C ul spec: HTML5 ul. Notez qu'un ul élément peut contenir exactement zéro ou plus li éléments. de même pour HTML5 ol. La liste de description (HTML5 dl) est similaire, mais permet à la fois dt et dd éléments.

Plus de notes:

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

424
2018-05-05 14:28



Option 2

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

Imbrication des listes - UL 


50
2018-05-05 14:30



L'option 2 est correcte: L'imbriqué <ul> est un enfant de <li> il appartient à.

Si vous valider, l'option 1 se présente comme une erreur en html 5 - crédit: user3272456


Correct: <ul> comme enfant de <li>

La bonne façon de faire une liste imbriquée HTML est avec l'imbriqué <ul> en tant qu'enfant du <li> à laquelle il appartient. La liste imbriquée devrait être à l'intérieur du <li> élément de la liste dans laquelle il est imbriqué.

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

W3C Standard pour Listes de nidification

Un élément de liste peut contenir une autre liste complète - cela s'appelle "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. Troisième section
  2. Chapitre deux
  3. Chapitre trois

La clé de l'imbrication des listes est de se rappeler que la liste imbriquée doit être liée à 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 des sites 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, même si en pratique, il peut être déroutant d'imbriquer des listes trop profondément. Pour les listes très volumineuses, il vaut peut-être mieux diviser le contenu en plusieurs listes avec des en-têtes à la place, ou même le diviser en pages séparées.


20
2018-05-05 22:52



Je préfère l'option 2 car elle montre clairement l'élément de liste en tant que détenteur de cette liste imbriquée. Je me pencherais toujours vers le HTML sémantiquement sonore.


6
2018-05-05 14:30



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


6
2018-02-04 19:52



Avez-vous pensé à utiliser le TAG "dt" au lieu de "ul" pour les listes d'imbrication? Il hérite du style et de la structure qui vous permettent d'avoir un titre par section et il compile automatiquement le contenu qui se trouve à l'intérieur.

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

1
2018-05-14 10:29



Ce qui n'est pas mentionné ici, c'est que l'option 1 vous permet d'imbriquer des listes de manière arbitraire.

Cela ne devrait pas avoir d'importance si vous contrôlez le contenu / css, mais si vous créez un éditeur de texte enrichi, il sera utile.

Par exemple, gmail, inbox et evernote permettent tous de créer des listes comme ceci:

arbitrarily nested list

Avec l'option 2 vous ne pouvez pas cela (vous aurez un élément de liste supplémentaire), avec l'option 1, vous pouvez.


-3
2018-06-30 02:05