HTML tiene tres tipos de listas, cada una con un significado semántico. Usar la correcta ayuda con la accesibilidad (los lectores de pantalla anuncian "lista, 3 elementos") y la estructura.
Apples
Bananas
Cherries
Se renderiza con viñetas por defecto. Úsalas para menús de navegación, listas de características, etiquetas — cualquier cosa donde la secuencia no sea significativa.
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
Se renderiza con números. Úsalas para pasos, rankings, instrucciones. Atributos: type (1, a, A, i, I), start (primer número), reversed.
<dl>
<dt>HTML</dt>
<dd>The markup language for web pages.</dd>
<dt>CSS</dt>
<dd>The styling language for web pages.</dd>
</dl>
<dt> es el término, <dd> su descripción — excelente para glosarios, metadatos y pares clave/valor.
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
Los menús de navegación se marcan convencionalmente como una <ul> dentro de <nav>.
Las listas no son solo para viñetas — le dan estructura al contenido que los lectores de pantalla anuncian y que puedes estilizar libremente (los marcadores predeterminados se eliminan fácilmente con CSS).
Elegir <ul> vs <ol> vs <dl> comunica significado: sin orden, secuencial, o término-definición.