1. ¿Qué es una lista en HTML?

Una lista es un conjunto de ítems (<li>) agrupados bajo un contenedor que define su tipo:

• <ol> – Lista ordenada (numerada, alfabética, romana, etc.).
• <ul> – Lista desordenada (viñetas).
• <dl> – Lista de definición (término y descripción).

El uso correcto de cada tipo mejora la semántica y permite a los lectores de pantalla interpretar la información de forma adecuada.

2. Listas ordenadas (<ol>)

El elemento <ol> genera una serie de ítems numerados automáticamente. Sus atributos más útiles son:

Ejemplo básico:

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

Ejemplo con atributos:

<ol type="A" start="3" reversed>
  <li>Elemento C</li>
  <li>Elemento B</li>
  <li>Elemento A</li>
</ol>

Resultado visual:

3. Elemento C
4. Elemento B
5. Elemento A

Listas anidadas

Las listas pueden anidarse arbitrariamente. Es importante mantener la legibilidad y evitar más de 3 niveles de profundidad en la mayoría de los casos.

<ol>
  <li>Primer nivel
    <ul>
      <li>Segundo nivel</li>
      <li>Otro ítem</li>
    </ul>
  </li>
  <li>Otro primer nivel</li>
</ol>

3. Listas desordenadas (<ul>)

El elemento <ul> muestra ítems precedidos por viñetas. Los atributos principales son limitados, pero se pueden personalizar mediante CSS:

• type (obsoleto en HTML5) – antes definía el estilo de viñeta.
• list-style-type (CSS) – controla la forma de la viñeta (disc, circle, square, etc.).

Ejemplo básico:

<ul>
  <li>Primer ítem</li>
  <li>Segundo ítem</li>
  <li>Tercer ítem</li>
</ul>

Ejemplo con estilo CSS personalizado:

<style>
  .custom-list { list-style-type: square; }
</style>
<ul class="custom-list">
  <li>Elemento A</li>
  <li>Elemento B</li>
</ul>

Resultado visual:

• Elemento A
• Elemento B

Listas inline (Bootstrap)

Para menús horizontales o etiquetas, Bootstrap ofrece la clase .list-inline:

<ul class="list-inline">
  <li class="list-inline-item">Inicio</li>
  <li class="list-inline-item">Productos</li>
  <li class="list-inline-item">Contacto</li>
</ul>

• Inicio
• Productos
• Contacto

4. Comparativa rápida: <ol> vs <ul>

5. Buenas prácticas, accesibilidad y SEO

5.1. Accesibilidad (ARIA)

Los lectores de pantalla ya reconocen <ol> y <ul> como listas, pero es recomendable:

• Usar role="list" solo cuando se rompe la semántica (p. ej., listas creadas con <div>).
• Proveer descripciones breves antes de la lista mediante <p> o <h2>.

5.2. SEO

Google valora la estructura lógica. Para listas de pasos, <ol> ayuda a identificar contenido tipo "how‑to". Además:

• Incluye palabras clave en los <li> cuando sea natural.
• Asegúrate de que cada <li> tenga contenido significativo (evita ítems vacíos).

5.3. Rendimiento y escalabilidad

Las listas son muy ligeras; sin embargo, al generar listas muy largas (más de 10 000 ítems) es recomendable:

• Renderizar de forma paginada o virtualizada (p. ej., IntersectionObserver).
• Minimizar el número de nodos DOM mediante fragmentos (DocumentFragment) al crear listas dinámicamente con JavaScript.

6. Solución de problemas habitual

• Ítems que no aparecen numerados: Verifica que los <li> estén dentro del <ol> y que no haya etiquetas intermedias mal cerradas.
• Viñetas desaparecen después de aplicar Bootstrap: Asegúrate de no haber sobrescrito list-style con .list-unstyled por accidente.
• Indentación inesperada: Revisa el CSS de margen/padding; Bootstrap usa .ms-3 para margen izquierdo en listas anidadas.

Conclusión

Dominar <ol> y <ul> es esencial para crear contenido estructurado, accesible y amigable para SEO. Con los atributos adecuados, estilos CSS y las clases de Bootstrap, puedes adaptar listas a cualquier diseño, desde menús horizontales hasta pasos numerados de tutoriales complejos.

Aplica las buenas prácticas aquí descritas y notarás una mejora tanto en la experiencia de usuario como en el posicionamiento de tus páginas.