Tema 10 · Tablas y Listas

Listas Ordenadas, Desordenadas y Glosarios

Domina los tres tipos de listas en HTML5: viñetas desordenadas (<ul>), listas numeradas (<ol>), listas de descripción (<dl>) y menús anidados.

Imágenes, Figuras y Favicon Tablas Semánticas y Fusión de Celdas

Los 3 Tipos de Listas en HTML

Las listas permiten agrupar conjuntos de elementos relacionados de forma limpia, estructurada y semántica. HTML ofrece tres formatos fundamentales:

Tipo de Lista Etiqueta Contenedora Elementos Hijos Uso Típico
Desordenada (Unordered) <ul> <li> (List Item) Colecciones donde el orden de los elementos no altera el significado (menús de navegación, listas de compras, características).
Ordenada (Ordered) <ol> <li> (List Item) Pasos cronológicos, recetas, clasificaciones o tutoriales donde la secuencia numérica importa.
De Descripción (Description) <dl> <dt> (Término) y <dd> (Definición) Glosarios de términos, fichas técnicas de producto o listas de pares clave-valor.

Atributos Especiales de <ol>

La etiqueta <ol> incluye atributos nativos para personalizar su numeración:

  • type="1": Números arábigos convencionales (1, 2, 3...) [por defecto].
  • type="A" o type="a": Letras mayúsculas (A, B, C...) o minúsculas (a, b, c...).
  • type="I" o type="i": Números romanos mayúsculos (I, II, III...) o minúsculos.
  • start="10": Inicia la cuenta en el número indicado en lugar de comenzar en 1.
  • reversed: Cuenta regresiva invertida (ej: de 5 hacia 1).

Listas Anidadas

Para crear sub-niveles o menús desplegables, la sub-lista debe colocarse dentro de un elemento <li>, nunca directamente entre dos <li>: 

<ul>
  <li>Desarrollo Web
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
    </ul>
  </li>
  <li>Bases de Datos</li>
</ul>

⚡ Comparativa Práctica de Listas y Glosarios

Observa cómo se renderizan listas desordenadas, listas numeradas con letras y glosarios de términos en HTML:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Listas en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .grid-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 650px; }
    .caja { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px; }
    dt { font-weight: bold; color: #0284c7; margin-top: 10px; }
    dd { margin-left: 0; color: #475569; font-size: 0.95rem; }
  </style>
</head>
<body>

  <div class="grid-listas">
    <!-- Lista Ordenada con Letras -->
    <div class="caja">
      <h3 style="margin-top: 0; color: #0f172a;">Pasos del Proyecto</h3>
      <ol type="A" start="1">
        <li>Planificación de requerimientos</li>
        <li>Diseño de maquetas visuales</li>
        <li>Codificación con HTML5 y CSS3</li>
        <li>Pruebas de accesibilidad web</li>
      </ol>
    </div>

    <!-- Lista Desordenada Anidada -->
    <div class="caja">
      <h3 style="margin-top: 0; color: #0f172a;">Tecnologías Web</h3>
      <ul>
        <li>Frontend
          <ul>
            <li>HTML5 Semántico</li>
            <li>CSS3 Moderno</li>
            <li>JavaScript ES6</li>
          </ul>
        </li>
        <li>Backend
          <ul>
            <li>PHP 8.3</li>
            <li>MySQL</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <!-- Glosario de Descripción -->
  <div class="caja" style="max-width: 650px; margin-top: 20px;">
    <h3 style="margin-top: 0; color: #0f172a;">Glosario Técnico (&lt;dl&gt;)</h3>
    <dl>
      <dt>HTML5</dt>
      <dd>Lenguaje de marcado estándar para la creación y estructuración de sitios web.</dd>
      <dt>CSS3</dt>
      <dd>Hojas de estilo en cascada encargadas del diseño visual y la adaptabilidad responsiva.</dd>
    </dl>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.