Listas (ul, ol, li)

Listas ordenadas (ol) y sus atributos

Las listas ordenadas son elementos fundamentales en HTML que permiten mostrar información secuencial con numeración automática. Se crean mediante la etiqueta <ol> (ordered list) y cada elemento de la lista se define con la etiqueta <li> (list item).

Una lista ordenada básica se estructura de la siguiente manera:

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

Este código generará una lista numerada automáticamente (1, 2, 3...) en el navegador. La numeración se aplica de forma automática, por lo que no necesitas especificar manualmente los números.

Atributos principales de las listas ordenadas

Las listas ordenadas pueden personalizarse mediante varios atributos que modifican su comportamiento y apariencia:

• 1. Atributo type: Define el tipo de marcador que se utilizará para numerar los elementos.

<ol type="1">
  <li>Elemento con numeración decimal (predeterminado: 1, 2, 3...)</li>
</ol>

<ol type="A">
  <li>Elemento con letras mayúsculas (A, B, C...)</li>
</ol>

<ol type="a">
  <li>Elemento con letras minúsculas (a, b, c...)</li>
</ol>

<ol type="I">
  <li>Elemento con números romanos mayúsculos (I, II, III...)</li>
</ol>

<ol type="i">
  <li>Elemento con números romanos minúsculos (i, ii, iii...)</li>
</ol>

• 2. Atributo start: Especifica el valor inicial de la numeración (debe ser un número entero).

<ol start="5">
  <li>Este elemento comenzará con el número 5</li>
  <li>Este elemento será el número 6</li>
  <li>Este elemento será el número 7</li>
</ol>

Incluso si utilizas otro tipo de marcador, el atributo start siempre debe ser un número:

<ol type="A" start="3">
  <li>Este elemento será C (equivalente a la posición 3)</li>
  <li>Este elemento será D</li>
</ol>

• 3. Atributo reversed: Invierte el orden de la numeración (cuenta hacia atrás).

<ol reversed>
  <li>Este será el último elemento (numerado como 3)</li>
  <li>Este será el elemento intermedio (numerado como 2)</li>
  <li>Este será el primer elemento (numerado como 1)</li>
</ol>

El atributo reversed es un atributo booleano, lo que significa que su presencia indica verdadero y su ausencia indica falso. No necesita un valor específico.

Combinación de atributos

Los atributos pueden combinarse para lograr efectos específicos:

<ol type="I" start="5" reversed>
  <li>Este elemento comenzará con V (5 en números romanos)</li>
  <li>Este elemento será IV</li>
  <li>Este elemento será III</li>
  <li>Este elemento será II</li>
  <li>Este elemento será I</li>
</ol>

Uso del atributo value en elementos de lista

Además de los atributos de la etiqueta <ol>, cada elemento <li> puede tener su propio atributo value para establecer un número específico en ese punto de la lista:

<ol>
  <li>Primer elemento (1)</li>
  <li value="4">Este elemento será el número 4</li>
  <li>Este elemento será el número 5 (continúa desde el anterior)</li>
</ol>

Este atributo es útil cuando necesitas saltar números o reiniciar la secuencia en un punto específico de la lista.

Ejemplo práctico: Lista de instrucciones

Las listas ordenadas son ideales para mostrar pasos secuenciales, como en este ejemplo de una receta:

<h2>Cómo preparar un sandwich</h2>
<ol>
  <li>Corta dos rebanadas de pan</li>
  <li>Unta mantequilla en una cara de cada rebanada</li>
  <li>Añade tus ingredientes favoritos entre las rebanadas</li>
  <li>Corta el sandwich por la mitad</li>
  <li>¡Disfruta!</li>
</ol>

Consideraciones de accesibilidad

Al trabajar con listas ordenadas, es importante considerar la accesibilidad:

• Utiliza listas ordenadas cuando el orden de los elementos es significativo
• Mantén la estructura semántica correcta (siempre usa <li> dentro de <ol>)
• No uses listas solo por su formato visual; utilízalas cuando la información sea realmente secuencial
• Los lectores de pantalla anuncian el número del elemento junto con su contenido, lo que ayuda a los usuarios a entender la secuencia

Compatibilidad con navegadores

Los atributos básicos de las listas ordenadas (type, start) tienen excelente compatibilidad con todos los navegadores modernos. El atributo reversed tiene buen soporte en navegadores actuales, pero podría no funcionar en versiones muy antiguas.

Para proyectos que requieran compatibilidad con navegadores obsoletos, considera usar CSS para estilizar las listas en lugar de confiar únicamente en los atributos HTML.

Listas no ordenadas (ul) y tipos de viñetas

Las listas no ordenadas son elementos HTML que muestran colecciones de elementos sin una secuencia numérica, utilizando viñetas o marcadores para identificar cada ítem. A diferencia de las listas ordenadas, estas se utilizan cuando el orden de los elementos no es relevante para su comprensión.

Para crear una lista no ordenada se utiliza la etiqueta <ul> (unordered list) y, al igual que en las listas ordenadas, cada elemento se define con la etiqueta <li> (list item):

<ul>
  <li>Manzanas</li>
  <li>Naranjas</li>
  <li>Plátanos</li>
</ul>

Este código generará una lista con viñetas circulares (predeterminadas) junto a cada elemento.

Tipos de viñetas con el atributo type

HTML permite personalizar el estilo de las viñetas mediante el atributo type. Aunque este atributo está obsoleto en HTML5 (se recomienda usar CSS en su lugar), es importante conocerlo:

<ul type="disc">
  <li>Viñeta circular rellena (predeterminado)</li>
</ul>

<ul type="circle">
  <li>Viñeta circular hueca</li>
</ul>

<ul type="square">
  <li>Viñeta cuadrada</li>
</ul>

Personalización con CSS

La forma moderna y recomendada para personalizar las viñetas es mediante CSS, utilizando la propiedad list-style-type:

<style>
  .custom-disc {
    list-style-type: disc;
  }
  
  .custom-circle {
    list-style-type: circle;
  }
  
  .custom-square {
    list-style-type: square;
  }
  
  .custom-none {
    list-style-type: none;
  }
</style>

<ul class="custom-disc">
  <li>Elemento con viñeta circular rellena</li>
</ul>

<ul class="custom-circle">
  <li>Elemento con viñeta circular hueca</li>
</ul>

<ul class="custom-square">
  <li>Elemento con viñeta cuadrada</li>
</ul>

<ul class="custom-none">
  <li>Elemento sin viñeta</li>
</ul>

CSS ofrece muchas más opciones de viñetas que las básicas de HTML:

<style>
  .emoji {
    list-style-type: "🔥";
  }
  
  .dash {
    list-style-type: "- ";
  }
  
  .arrow {
    list-style-type: "➤ ";
  }
</style>

<ul class="emoji">
  <li>Elemento con emoji como viñeta</li>
</ul>

<ul class="dash">
  <li>Elemento con guion como viñeta</li>
</ul>

<ul class="arrow">
  <li>Elemento con flecha como viñeta</li>
</ul>

Viñetas personalizadas con imágenes

También puedes usar imágenes como viñetas mediante la propiedad CSS list-style-image:

<style>
  .custom-bullet {
    list-style-image: url('bullet.png');
  }
</style>

<ul class="custom-bullet">
  <li>Elemento con imagen personalizada como viñeta</li>
  <li>Otro elemento con la misma viñeta</li>
</ul>

Para un mayor control sobre la posición y tamaño de las viñetas de imagen, es mejor usar un enfoque alternativo:

<style>
  .advanced-bullet {
    list-style-type: none;
    padding-left: 2em;
  }
  
  .advanced-bullet li {
    position: relative;
  }
  
  .advanced-bullet li::before {
    content: '';
    position: absolute;
    left: -1.5em;
    top: 0.25em;
    width: 1em;
    height: 1em;
    background-image: url('bullet.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
</style>

<ul class="advanced-bullet">
  <li>Elemento con viñeta de imagen controlada</li>
  <li>Otro elemento con viñeta personalizada</li>
</ul>

Posición de las viñetas

La propiedad CSS list-style-position controla si las viñetas aparecen dentro o fuera del flujo del contenido:

<style>
  .outside {
    list-style-position: outside; /* Predeterminado */
  }
  
  .inside {
    list-style-position: inside;
  }
</style>

<ul class="outside">
  <li>Viñeta fuera del bloque de texto (predeterminado)</li>
</ul>

<ul class="inside">
  <li>Viñeta dentro del bloque de texto</li>
</ul>

Atajo para todas las propiedades de lista

CSS ofrece la propiedad abreviada list-style para definir todas las propiedades de lista en una sola declaración:

<style>
  .compact {
    list-style: square inside;
  }
  
  .image-list {
    list-style: url('bullet.png') outside;
  }
</style>

<ul class="compact">
  <li>Viñeta cuadrada dentro del texto</li>
</ul>

<ul class="image-list">
  <li>Viñeta de imagen fuera del texto</li>
</ul>

Ejemplo práctico: Menú de navegación

Las listas no ordenadas son ideales para crear menús de navegación:

<style>
  .nav-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .nav-menu li {
    display: inline-block;
    margin-right: 20px;
  }
  
  .nav-menu li a {
    text-decoration: none;
    color: #333;
  }
  
  .nav-menu li a:hover {
    color: #0066cc;
  }
</style>

<ul class="nav-menu">
  <li><a href="#home">Inicio</a></li>
  <li><a href="#products">Productos</a></li>
  <li><a href="#services">Servicios</a></li>
  <li><a href="#contact">Contacto</a></li>
</ul>

Consideraciones de accesibilidad

Al trabajar con listas no ordenadas, es importante tener en cuenta:

• Utiliza listas no ordenadas cuando el orden de los elementos no sea significativo
• Mantén la estructura semántica correcta (siempre usa <li> dentro de <ul>)
• Si eliminas las viñetas con CSS (list-style-type: none), asegúrate de proporcionar indicadores visuales alternativos para usuarios con discapacidad cognitiva
• Los lectores de pantalla anuncian los elementos de lista, lo que ayuda a los usuarios a entender la estructura del contenido

Casos de uso comunes

Las listas no ordenadas son perfectas para:

• Menús de navegación
• Listas de características o beneficios
• Colecciones de elementos relacionados sin jerarquía
• Etiquetas o categorías
• Galerías de imágenes o productos

Al elegir entre listas ordenadas y no ordenadas, considera si la secuencia de los elementos es importante para la comprensión del contenido. Si el orden no importa, una lista no ordenada es la elección correcta.

Listas de definición (dl, dt, dd)

Las listas de definición son un tipo especial de lista en HTML diseñada específicamente para presentar términos y sus correspondientes definiciones o descripciones. A diferencia de las listas ordenadas y no ordenadas, las listas de definición utilizan tres etiquetas diferentes para crear su estructura.

La estructura básica de una lista de definición se compone de:

<dl>
  <dt>Término</dt>
  <dd>Definición o descripción del término</dd>
</dl>

Donde cada etiqueta cumple una función específica:

• <dl> (Definition List): Es el contenedor principal que engloba toda la lista de definición.
• <dt> (Definition Term): Define el término o concepto que se va a describir.
• <dd> (Definition Description): Proporciona la definición o descripción del término anterior.

Estructura básica y uso

Una lista de definición simple podría verse así:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado utilizado para crear páginas web.</dd>
  
  <dt>CSS</dt>
  <dd>Lenguaje de estilo que define la presentación de documentos HTML.</dd>
  
  <dt>JavaScript</dt>
  <dd>Lenguaje de programación que permite crear contenido dinámico en páginas web.</dd>
</dl>

El navegador normalmente muestra los términos (<dt>) sin sangría y las definiciones (<dd>) con una sangría, creando una clara distinción visual entre ambos.

Múltiples términos y definiciones

Una característica potente de las listas de definición es que permiten asociar múltiples términos a una definición o múltiples definiciones a un término:

<dl>
  <dt>HTML</dt>
  <dt>HyperText Markup Language</dt>
  <dd>Lenguaje estándar para crear y diseñar páginas web.</dd>
  
  <dt>CSS</dt>
  <dd>Define el aspecto visual de los elementos HTML.</dd>
  <dd>Permite separar el contenido de la presentación.</dd>
</dl>

En este ejemplo, "HTML" y "HyperText Markup Language" comparten la misma definición, mientras que "CSS" tiene dos definiciones diferentes pero relacionadas.

Uso de elementos adicionales dentro de listas de definición

Las listas de definición permiten incluir otros elementos HTML dentro de sus términos y definiciones:

<dl>
  <dt>Navegadores web populares</dt>
  <dd>
    <ul>
      <li>Chrome</li>
      <li>Firefox</li>
      <li>Safari</li>
      <li>Edge</li>
    </ul>
  </dd>
  
  <dt>Editores de código</dt>
  <dd>
    <p>Los editores de código son herramientas esenciales para desarrolladores.</p>
    <p>Algunos ejemplos populares incluyen:</p>
    <ul>
      <li>Visual Studio Code</li>
      <li>Sublime Text</li>
      <li>Atom</li>
    </ul>
  </dd>
</dl>

Esta flexibilidad permite crear estructuras de información complejas y bien organizadas.

Estilización con CSS

Por defecto, las listas de definición tienen un estilo muy básico. Con CSS podemos mejorar su apariencia:

<style>
  dl {
    font-family: Arial, sans-serif;
    margin: 20px 0;
  }
  
  dt {
    font-weight: bold;
    color: #2c3e50;
    margin-top: 10px;
  }
  
  dd {
    margin-left: 20px;
    color: #34495e;
    line-height: 1.5;
    margin-bottom: 10px;
  }
</style>

<dl>
  <dt>Frontend</dt>
  <dd>Parte de una aplicación web que interactúa directamente con el usuario.</dd>
  
  <dt>Backend</dt>
  <dd>Parte de una aplicación web que procesa la entrada desde el frontend y normalmente se comunica con bases de datos.</dd>
</dl>

Para crear diseños más avanzados, podemos usar un enfoque de diseño en columnas:

<style>
  .horizontal-dl {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
    max-width: 800px;
  }
  
  .horizontal-dl dt {
    grid-column: 1;
    font-weight: bold;
    padding: 5px;
    background-color: #f0f0f0;
    border-radius: 4px;
  }
  
  .horizontal-dl dd {
    grid-column: 2;
    margin: 0;
    padding: 5px;
  }
</style>

<dl class="horizontal-dl">
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para páginas web.</dd>
  
  <dt>CSS</dt>
  <dd>Lenguaje de estilo para documentos HTML.</dd>
  
  <dt>JavaScript</dt>
  <dd>Lenguaje de programación para web.</dd>
</dl>

Este enfoque crea una presentación en dos columnas donde los términos aparecen a la izquierda y las definiciones a la derecha.

Casos de uso prácticos

Las listas de definición son ideales para varios escenarios:

• Glosarios de términos técnicos:

<h2>Glosario de términos web</h2>
<dl>
  <dt>API</dt>
  <dd>Application Programming Interface. Conjunto de reglas que permite que diferentes aplicaciones se comuniquen entre sí.</dd>
  
  <dt>DOM</dt>
  <dd>Document Object Model. Representación en memoria de la estructura de un documento HTML.</dd>
</dl>

• FAQs (Preguntas frecuentes):

<h2>Preguntas frecuentes</h2>
<dl>
  <dt>¿Cómo puedo restablecer mi contraseña?</dt>
  <dd>Haz clic en "Olvidé mi contraseña" en la página de inicio de sesión y sigue las instrucciones enviadas a tu correo electrónico.</dd>
  
  <dt>¿Cuánto tiempo tarda el envío?</dt>
  <dd>Los envíos nacionales suelen tardar entre 2-3 días laborables. Los envíos internacionales pueden tardar entre 7-14 días.</dd>
</dl>

• Metadatos o información de contacto:

<dl>
  <dt>Autor</dt>
  <dd>Ana García</dd>
  
  <dt>Publicado</dt>
  <dd>15 de marzo de 2023</dd>
  
  <dt>Contacto</dt>
  <dd>
    <a href="mailto:ana@ejemplo.com">ana@ejemplo.com</a>
    <br>
    <a href="tel:+34600123456">+34 600 123 456</a>
  </dd>
</dl>

Consideraciones de accesibilidad

Para garantizar que las listas de definición sean accesibles:

• Mantén la estructura semántica correcta (<dl>, <dt>, <dd>)
• No uses listas de definición solo por su formato visual; utilízalas cuando realmente estés presentando términos y sus definiciones
• Los lectores de pantalla anuncian los elementos como "término" y "definición", lo que ayuda a los usuarios a entender la relación entre ellos
• Si estilizas las listas con CSS, asegúrate de mantener clara la relación visual entre términos y definiciones

Compatibilidad con navegadores

Las listas de definición tienen excelente compatibilidad con todos los navegadores modernos. La estructura básica de <dl>, <dt> y <dd> es compatible incluso con navegadores antiguos, lo que hace que esta característica sea muy confiable para su uso en cualquier proyecto web.

Anidación de listas y estructuras complejas

La anidación de listas es una técnica poderosa en HTML que permite crear estructuras jerárquicas complejas al colocar una lista dentro de otra. Esta funcionalidad es esencial para representar relaciones padre-hijo entre elementos o crear menús multinivel.

Para anidar listas, simplemente insertamos una lista completa (<ul>, <ol> o <dl>) dentro de un elemento <li> de otra lista. El navegador automáticamente ajustará la indentación y los marcadores para reflejar los diferentes niveles.

Anidación básica de listas

La forma más común de anidar listas es colocar una lista completa dentro de un elemento de otra lista:

<ul>
  <li>Frutas
    <ul>
      <li>Cítricos
        <ul>
          <li>Naranja</li>
          <li>Limón</li>
          <li>Lima</li>
        </ul>
      </li>
      <li>Frutas tropicales
        <ul>
          <li>Mango</li>
          <li>Piña</li>
          <li>Papaya</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Verduras
    <ul>
      <li>Hortalizas de hoja
        <ul>
          <li>Lechuga</li>
          <li>Espinaca</li>
        </ul>
      </li>
      <li>Tubérculos
        <ul>
          <li>Patata</li>
          <li>Zanahoria</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

En este ejemplo, creamos una estructura de tres niveles que representa categorías y subcategorías de alimentos. Los navegadores mostrarán diferentes tipos de viñetas para cada nivel, facilitando la distinción visual entre ellos.

Combinación de diferentes tipos de listas

Una característica potente de HTML es la posibilidad de combinar diferentes tipos de listas (ordenadas, no ordenadas y de definición) en una estructura anidada:

<ol>
  <li>Preparar los ingredientes
    <ul>
      <li>Harina</li>
      <li>Huevos</li>
      <li>Leche</li>
      <li>Azúcar</li>
    </ul>
  </li>
  <li>Mezclar los ingredientes secos
    <ul>
      <li>Tamizar la harina</li>
      <li>Añadir el azúcar</li>
    </ul>
  </li>
  <li>Añadir los ingredientes líquidos
    <dl>
      <dt>Huevos</dt>
      <dd>Batir previamente</dd>
      <dt>Leche</dt>
      <dd>Añadir gradualmente mientras se mezcla</dd>
    </dl>
  </li>
  <li>Hornear a 180°C durante 30 minutos</li>
</ol>

En este ejemplo, combinamos una lista ordenada principal (para los pasos de la receta), listas no ordenadas para los ingredientes y detalles, y una lista de definición para instrucciones específicas.

Estructuras de navegación multinivel

Las listas anidadas son ideales para crear menús de navegación con submenús:

<nav>
  <ul class="menu">
    <li><a href="#home">Inicio</a></li>
    <li>
      <a href="#products">Productos</a>
      <ul class="submenu">
        <li><a href="#electronics">Electrónica</a>
          <ul class="sub-submenu">
            <li><a href="#smartphones">Smartphones</a></li>
            <li><a href="#laptops">Portátiles</a></li>
            <li><a href="#tablets">Tablets</a></li>
          </ul>
        </li>
        <li><a href="#clothing">Ropa</a></li>
        <li><a href="#books">Libros</a></li>
      </ul>
    </li>
    <li><a href="#about">Sobre nosotros</a></li>
    <li><a href="#contact">Contacto</a></li>
  </ul>
</nav>

Este código crea un menú de navegación con tres niveles de profundidad. Con CSS adecuado, podemos transformar esta estructura en un menú desplegable interactivo.

Estilización de listas anidadas

El estilo predeterminado de las listas anidadas puede mejorarse significativamente con CSS:

<style>
  /* Estilo básico para todas las listas */
  ul {
    list-style-type: disc;
    padding-left: 20px;
  }
  
  /* Estilo para el segundo nivel */
  ul ul {
    list-style-type: circle;
  }
  
  /* Estilo para el tercer nivel */
  ul ul ul {
    list-style-type: square;
  }
  
  /* Añadir espacio entre elementos de lista con sublistas */
  li {
    margin-bottom: 5px;
  }
  
  /* Eliminar margen inferior para elementos dentro de sublistas */
  li li {
    margin-bottom: 0;
  }
</style>

Para menús de navegación más avanzados, podemos usar CSS para crear efectos interactivos:

<style>
  .menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #f8f9fa;
  }
  
  .menu li {
    position: relative;
    display: inline-block;
  }
  
  .menu a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
  }
  
  .submenu, .sub-submenu {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    min-width: 150px;
    list-style-type: none;
    padding: 0;
    z-index: 1;
  }
  
  .submenu {
    top: 100%;
    left: 0;
  }
  
  .sub-submenu {
    top: 0;
    left: 100%;
  }
  
  .menu li:hover > .submenu,
  .submenu li:hover > .sub-submenu {
    display: block;
  }
  
  .menu li:hover > a {
    background-color: #e9ecef;
  }
</style>

Listas anidadas para representar estructuras de árbol

Las listas anidadas son perfectas para representar estructuras jerárquicas como árboles de directorios:

<ul class="file-tree">
  <li>proyecto/
    <ul>
      <li>src/
        <ul>
          <li>components/
            <ul>
              <li>Header.js</li>
              <li>Footer.js</li>
              <li>Sidebar.js</li>
            </ul>
          </li>
          <li>pages/
            <ul>
              <li>Home.js</li>
              <li>About.js</li>
              <li>Contact.js</li>
            </ul>
          </li>
          <li>App.js</li>
          <li>index.js</li>
        </ul>
      </li>
      <li>public/
        <ul>
          <li>index.html</li>
          <li>favicon.ico</li>
          <li>images/
            <ul>
              <li>logo.png</li>
              <li>banner.jpg</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>package.json</li>
      <li>README.md</li>
    </ul>
  </li>
</ul>

Con un poco de CSS, podemos mejorar la visualización de esta estructura:

<style>
  .file-tree {
    font-family: monospace;
    line-height: 1.5;
  }
  
  .file-tree ul {
    list-style-type: none;
    padding-left: 20px;
  }
  
  .file-tree li {
    position: relative;
  }
  
  .file-tree li::before {
    content: "├── ";
    position: absolute;
    left: -20px;
  }
  
  .file-tree > li::before {
    content: "";
  }
  
  .file-tree li:last-child::before {
    content: "└── ";
  }
</style>

Combinación de listas con otros elementos HTML

Para crear estructuras aún más complejas, podemos combinar listas anidadas con otros elementos HTML:

<div class="product-category">
  <h2>Catálogo de productos</h2>
  <ul>
    <li>
      <h3>Electrónica</h3>
      <p>Dispositivos y accesorios electrónicos de última generación.</p>
      <ul>
        <li>
          <div class="product">
            <h4>Smartphone XYZ</h4>
            <img src="smartphone.jpg" alt="Smartphone XYZ">
            <p>Pantalla OLED de 6.5", 8GB RAM, 128GB almacenamiento.</p>
            <p class="price">599€</p>
            <button>Añadir al carrito</button>
          </div>
        </li>
        <li>
          <div class="product">
            <h4>Tablet ABC</h4>
            <img src="tablet.jpg" alt="Tablet ABC">
            <p>Pantalla de 10", procesador octa-core, batería de larga duración.</p>
            <p class="price">349€</p>
            <button>Añadir al carrito</button>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <h3>Hogar</h3>
      <p>Artículos para mejorar tu espacio vital.</p>
      <!-- Más productos aquí -->
    </li>
  </ul>
</div>

Consideraciones de accesibilidad

Al trabajar con listas anidadas, es importante considerar la accesibilidad:

• Mantén una estructura lógica que refleje la jerarquía real de la información
• No anides listas excesivamente (más de 3-4 niveles puede ser difícil de navegar)
• Asegúrate de que la relación entre elementos padre e hijo sea clara tanto visual como semánticamente
• Para menús de navegación complejos, considera añadir atributos ARIA para mejorar la experiencia con lectores de pantalla:

<nav>
  <ul role="menubar">
    <li role="menuitem" aria-haspopup="true">
      Productos
      <ul role="menu">
        <li role="menuitem">Categoría 1</li>
        <li role="menuitem" aria-haspopup="true">
          Categoría 2
          <ul role="menu">
            <li role="menuitem">Subcategoría A</li>
            <li role="menuitem">Subcategoría B</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Rendimiento y mantenibilidad

Para estructuras muy complejas, considera estas recomendaciones:

• Divide el código en componentes más pequeños si estás utilizando un framework
• Usa clases CSS específicas para cada nivel de anidación para facilitar el mantenimiento
• Para menús muy grandes, considera cargar los subniveles de forma dinámica con JavaScript
• Utiliza comentarios para marcar el cierre de secciones largas:

<ul>
  <li>Nivel 1
    <ul>
      <li>Nivel 2
        <ul>
          <li>Nivel 3.1</li>
          <li>Nivel 3.2</li>
        </ul>
      </li> <!-- Fin de Nivel 2 -->
    </ul>
  </li> <!-- Fin de Nivel 1 -->
</ul>

Las listas anidadas son una herramienta fundamental para organizar información compleja en HTML, permitiéndote crear desde simples menús multinivel hasta sofisticadas representaciones de estructuras jerárquicas. Dominar esta técnica te ayudará a comunicar relaciones complejas entre datos de manera clara y accesible.