Para anidar correctamente listas HTML, coloca cada sublista dentro del elemento de lista al que pertenece, antes de la etiqueta de cierre de ese elemento. Esta guía muestra cómo crear, guardar y previsualizar un ejemplo de tres niveles con TextEdit y Safari en un Mac.

¿Dónde debe ir una lista HTML anidada?

Una lista HTML tiene dos partes estructurales: un contenedor de lista y sus elementos. Usa <ul> para una lista sin ordenar y <ol> para una lista ordenada. Cada elemento normal está delimitado por <li> y </li>. Una lista anidada debe ir dentro de uno de esos elementos. La guía de listas de Google muestra exactamente este patrón de anidamiento.

La secuencia esencial es: abrir el elemento principal, escribir su etiqueta, insertar la sublista completa y, después, cerrar el elemento principal. Mantener visible la etiqueta de cierre facilita comprobar la relación.

Este fragmento HTML correcto da al Grupo A dos elementos secundarios y mantiene al Grupo B en el nivel externo:

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

Lee las etiquetas de cierre desde dentro hacia fuera. Primero se cierra cada elemento secundario. Después, la lista interna se cierra con </ul>. Luego se cierra el Grupo A con </li>. Solo entonces comienza el Grupo B. Así puedes comprobarlo de forma práctica: localiza las etiquetas de apertura y cierre del elemento principal y confirma que toda la sublista queda entre ellas.

El Estándar HTML permite que los elementos <li> contengan contenido de flujo, incluidas listas. El modelo de contenido de <ul> y <ol> permite elementos de lista y elementos de soporte para scripts; no permite colocar otro contenedor de lista directamente dentro del contenedor externo. Consulta las definiciones de contenido de agrupación del Estándar HTML.

Elige el tipo de lista por separado en cada nivel

Pregúntate si cambiar el orden de los elementos cambiaría su significado. Si es así, elige <ol>. Si los elementos forman una colección cuyo significado no depende de la secuencia, elige <ul>. Aplica esta pregunta por separado a cada sublista. La documentación de listas ordenadas de Mozilla explica tanto el criterio del orden como la combinación de tipos de lista.

En el ejemplo desarrollado a continuación, el Grupo A y el Grupo B son categorías neutras, por lo que su lista externa no está ordenada. El Elemento A1 y el Elemento A2 también forman una colección sin orden. Bajo el Elemento A2, abrir un documento de muestra va antes que cambiarle el nombre, así que esas dos instrucciones usan una lista ordenada.

Relación entre contenidos Tipo de lista Ubicación
Una colección de grupos <ul> Alrededor de los elementos de grupo
Elementos que pertenecen al Grupo A <ul> Dentro del <li> del Grupo A
Una secuencia que pertenece al Elemento A2 <ol> Dentro del <li> del Elemento A2
Elementos que pertenecen al Grupo B <ul> Dentro del <li> independiente del Grupo B

Cambiar las viñetas por números no requiere una técnica de anidamiento distinta. El elemento principal sigue conteniendo toda la lista secundaria. La documentación de Mozilla admite explícitamente el anidamiento de listas ordenadas y sin ordenar en varios niveles. Notas de uso de listas ordenadas

Crea un documento completo con listas anidadas en TextEdit

El siguiente ejemplo es un documento HTML completo. Usa etiquetas de muestra y no requiere recursos descargados ni código adicional. Su estructura contiene cuatro listas y ocho elementos de lista: dos grupos externos, cuatro elementos repartidos entre esos grupos y dos instrucciones bajo el Elemento A2.

En TextEdit, elige File > New y, después, Format > Make Plain Text. Pega el ejemplo completo que aparece a continuación. Apple documenta este flujo de trabajo en texto sin formato para crear archivos HTML en su guía de HTML de 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>

Elige File > Save, ponle el nombre nested-lists.html y guárdalo en un lugar fácil de encontrar. Si TextEdit te pregunta qué extensión usar, elige Use .html. Estos son los pasos para guardar HTML documentados por Apple. Copia solo el código del bloque delimitado; omite las líneas de delimitación de Markdown.

En Finder, selecciona el archivo guardado y elige File > Open With > Safari. Apple documenta cómo seleccionar una aplicación mediante File > Open With en Elegir una app para abrir un archivo en el Mac.

Compara la vista previa con las siguientes relaciones esperadas:

  • El Grupo A y el Grupo B son elementos hermanos en el nivel externo.
  • El Elemento A1 y el Elemento A2 pertenecen al Grupo A.
  • Las dos instrucciones numeradas pertenecen únicamente al Elemento A2.
  • El Elemento B1 y el Elemento B2 pertenecen al Grupo B.

Comprueba esas relaciones tanto en el código fuente como en la visualización. Las etiquetas explícitas y las relaciones entre las listas y sus elementos principales del ejemplo se comprobaron mediante programación; aquí no se probó su aspecto en Safari.

Diagnostica una sublista asociada al elemento incorrecto

Sigue esta secuencia cuando un documento existente contiene las palabras correctas, pero la jerarquía es incorrecta. Trabaja con un elemento principal y sus elementos secundarios directos a la vez, empezando por la lista externa.

1. Busca un elemento principal que se cierre demasiado pronto

Este fragmento incorrecto cierra el Grupo A antes de que empiece su sublista:

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

Aquí, el <ul> interno es un elemento hijo directo del <ul> externo. Mueve el </li> del Grupo A debajo del </ul> interno para que el elemento principal contenga la sublista. Esta corrección sigue la regla de ubicación que se ilustra en el ejemplo de listas anidadas de Google.

2. Comprueba si la estructura es válida, pero tiene el elemento principal incorrecto

Una lista puede cumplir las reglas de anidamiento y aun así describir una relación incorrecta. Por ejemplo, colocar las instrucciones numeradas dentro del Elemento A1 las asociaría con el Elemento A1, aunque la etiqueta prevista fuera el Elemento A2. Una sintaxis correcta por sí sola no establece la agrupación que pretendes.

Para cada sublista, pregúntate: «¿La etiqueta de apertura de qué elemento contiene esta lista completa?». Compara la etiqueta de ese elemento con la del elemento principal previsto. En el ejemplo completo, al seguir hacia fuera desde las instrucciones numeradas se debería llegar al Elemento A2 y, después, al Grupo A. Si llegas a otra etiqueta, reubica la sublista completa antes de ajustar su apariencia.

3. Haz explícitas las etiquetas de cierre mientras editas

En ciertas condiciones, HTML permite omitir la etiqueta de cierre </li> de un elemento, por ejemplo, cuando le sigue inmediatamente otro elemento. No hace falta recurrir a esa abreviatura. Mientras aprendes o corriges el anidamiento, escribe todas las etiquetas de cierre de los elementos para que cada límite quede visible. Mozilla enumera las condiciones exactas para omitirlas en su resumen técnico de los elementos de lista.

Usa una sangría uniforme como ayuda de edición: sangra la lista secundaria debajo de la etiqueta del elemento principal y alinea las etiquetas de apertura y cierre de las listas correspondientes. Después, comprueba los límites reales de las etiquetas. La sangría facilita leer la relación prevista; los elementos contenedores son los que la establecen.

4. Mantén los párrafos dentro de sus propios límites

Si la etiqueta de un elemento principal necesita un párrafo, cierra ese párrafo antes de abrir la sublista y mantén ambos dentro del elemento principal. El Estándar HTML establece que los contenedores de lista no pueden ser elementos hijos de elementos <p>. Reglas de contenido de los párrafos en HTML

Este fragmento válido mantiene juntos el párrafo de la etiqueta y la lista secundaria dentro del Grupo A:

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

Vuelve a abrir el código fuente y conserva la jerarquía al hacer cambios

Si al volver a abrir el archivo en TextEdit ves contenido con formato en lugar de etiquetas, elige File > Open, selecciona el archivo, haz clic en Show Options, selecciona Ignore rich text commands y haz clic en Open. Para los archivos futuros, Apple también ofrece TextEdit > Settings > Open and Save y la opción Display HTML files as HTML code instead of formatted text. Ver HTML como código en TextEdit

Al mover un elemento, mueve su bloque <li> completo, incluidas las sublistas que contenga. Por ejemplo, si mueves el Elemento A2, también debes llevarte sus dos instrucciones. Si mueves solo la etiqueta, las instrucciones se quedarán atrás y cambiará la agrupación prevista del documento.

Antes de guardar una revisión, comprueba tres cosas: que cada lista secundaria esté contenida por el elemento principal previsto; que los elementos hermanos mantengan el orden requerido; y que cada lista use viñetas o numeración según importe o no su secuencia. Guarda el archivo, vuelve a abrirlo en Safari y compara los grupos visibles con el esquema previsto. Mantener cada elemento principal junto con todo su subárbol facilita comprobar los cambios futuros.

Fuentes