numerada - ¿Una forma adecuada de hacer una lista anidada de HTML?
numeracion en html (7)
¿Ha pensado en usar el TAG "dt" en lugar de "ul" para las listas de anidamiento? Su estilo y estructura heredados le permiten tener un título por sección y automáticamente tabula el contenido que se encuentra dentro.
<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>
Los documentos de W3 tienen un ejemplo de lista anidada con el prefijo DEPRECATED EXAMPLE: pero nunca lo corrigieron con un ejemplo no en desuso, ni explicaron exactamente qué hay de malo en el ejemplo.
Entonces, ¿cuál de estas formas es la forma correcta de escribir una lista HTML?
Opción 1 : el <ul> anidado es un hijo del padre <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>
Opción 2 : el <ul> anidado es un hijo del <li> que pertenece
<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>
Lo que no se menciona aquí es que la opción 1 le permite anidar arbitrariamente las listas.
Esto no debería importar si controla el contenido / css, pero si está creando un editor de texto enriquecido, es muy útil.
Por ejemplo, gmail, bandeja de entrada y evernote permiten crear listas como esta:
Con la opción 2 no puede debido a eso (tendrá un elemento de lista adicional), con la opción 1, puede.
Prefiero la opción dos porque muestra claramente el elemento de la lista como el poseedor de esa lista anidada. Siempre me inclino por el HTML semánticamente sano.
Si valida, la opción 1 aparece como un error en html 5, por lo que la opción 2 es correcta.
opcion 2
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
La opción 2 es correcta: el <ul> anidado es un hijo del <li> que pertenece.
Si realiza la validate , la opción 1 aparece como un error en html 5 - crédito: user3272456
Correcto: <ul> como hijo de <li>
La forma correcta de hacer una lista anidada de HTML es con el <ul> anidado como hijo del <li> al que pertenece. La lista anidada debe estar dentro del elemento <li> de la lista en la que está anidada.
<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>
Estándar W3C para w3.org/wiki/HTML_lists#Nesting_lists
Un elemento de la lista puede contener otra lista completa, lo que se conoce como "anidar" una lista. Es útil para cosas como tablas de contenido, como la que se encuentra al principio de este artículo:
- Capítulo uno
- Seccion uno
- Seccion dos
- Seccion tres
- Capitulo dos
- Capítulo tres
La clave para anidar listas es recordar que la lista anidada debe relacionarse con un elemento de lista específico. Para reflejar que en el código, la lista anidada está contenida dentro de ese elemento de la lista. El código para la lista de arriba se ve así:
<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>
Observe cómo comienza la lista anidada después de <li> y el texto del elemento de la lista contenedora ("Capítulo Uno"); luego termina antes de </li> del elemento de la lista que contiene. Las listas anidadas a menudo forman la base de los menús de navegación del sitio web, ya que son una buena manera de definir la estructura jerárquica del sitio web.
Teóricamente, puede anidar tantas listas como desee, aunque en la práctica puede resultar confuso hacer listas anidadas demasiado profundamente. Para listas muy grandes, puede ser mejor dividir el contenido en varias listas con encabezados, o incluso dividirlo en páginas separadas.
La opción 2 es correcta.
La lista anidada debe estar dentro de un elemento <li> de la lista en la que está anidada.
Enlace al Wiki W3C en Listas (tomado del comentario a continuación): Listas HTML Wiki .
Enlace a la especificación de HTML5 W3C ul : HTML5 ul . Tenga en cuenta que un elemento ul puede contener exactamente cero o más elementos li . Lo mismo se aplica a HTML5 ol . La lista de descripción ( HTML5 dl ) es similar, pero permite los elementos dt y dd .
Más notas:
-
dl= lista de definiciones. -
ol= lista ordenada (números). -
ul= lista desordenada (viñetas).