Listas y enlaces: estructura navegable y contenido útil

Domina ul/ol/dl, anidación y enlaces internos/externos con buenas prácticas de accesibilidad, SEO y seguridad.

📘 Teoría

Listas HTML sin líos: ul, ol y dl

Cada lista tiene intención semántica. Elegir bien te evita problemas después.

`ul` se usa cuando el orden no importa (por ejemplo, características de un producto). `ol` cuando sí importa (pasos de un tutorial). `dl` para pares término-definición (glosarios, fichas técnicas, FAQ breve).

No uses listas solo por estética. Si lo que tienes es navegación, tabla de contenidos o pasos, lista; si no, otro elemento puede encajar mejor.

🟢 ul

Elementos sin orden estricto.

Menús secundarios
Listas de features
Tags o categorías

🔵 ol

Elementos con secuencia lógica.

Paso 1, 2, 3
Ranking
Checklist secuencial

🟠 dl

Término y definición.

Glosarios
Diccionarios de variables
FAQ corta

Ejemplo de los 3 tipos

<h2>Lista no ordenada</h2>
<ul>
  <li>HTML semántico</li>
  <li>Accesibilidad</li>
  <li>SEO técnico</li>
</ul>

<h2>Lista ordenada</h2>
<ol>
  <li>Definir objetivo</li>
  <li>Escribir estructura base</li>
  <li>Revisar accesibilidad</li>
</ol>

<h2>Lista de definición</h2>
<dl>
  <dt>DOM</dt>
  <dd>Estructura en memoria del documento HTML.</dd>
  <dt>Semántica</dt>
  <dd>Elección de etiquetas por significado, no por aspecto.</dd>
</dl>

Anidación de listas sin perder legibilidad

Anidar sí, pero con propósito y jerarquía clara.

Una lista anidada es útil cuando un elemento tiene subelementos naturales. Ejemplo clásico: temario > módulo > lección.

Evita niveles innecesarios. Si tienes más de 3 niveles, seguramente necesitas reorganizar la información.

Mantén sangrías consistentes para no romper lectura del código.
Cada nivel debe aportar contexto real, no solo decoración.
En navegación, no mezcles enlaces de distinto nivel sin estructura visual clara.

Enlaces bien hechos: internos, externos y anclas

Un buen enlace explica destino, contexto y comportamiento.

`href` define el destino. Para enlaces externos en nueva pestaña (`target="_blank"`), añade `rel="noopener noreferrer"` para seguridad y rendimiento.

Los enlaces internos con hash (`#id`) son clave para navegación larga (índices, tabla de contenido, FAQ).

Patrones recomendados

<a href="/curso/html">Ir al curso de HTML</a>

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">
  Abrir documentación oficial
</a>

<a href="#preguntas-frecuentes">Saltar a FAQ</a>

<section id="preguntas-frecuentes">
  <h2>Preguntas frecuentes</h2>
</section>