HTML
Cómo representar listas ordenadas, no ordenadas y grupos de términos y descripciones con ul, ol, li, dl, dt y dd.
HTML ofrece listas para representar conjuntos, secuencias y grupos de términos con descripciones.
<ul>
<li>JavaScript</li>
<li>TypeScript</li>
<li>HTML</li>
</ul>Representa una lista donde el orden no cambia el significado.
<ul>
<li>React</li>
<li>Next.js</li>
<li>Node.js</li>
</ul>El navegador y las tecnologías de asistencia pueden comunicar cantidad y posición de items.
Representa una secuencia donde el orden importa:
<ol>
<li>Define el alcance.</li>
<li>Diseña la solución.</li>
<li>Implementa y valida.</li>
</ol><ol start="4">
<li>Despliega.</li>
<li>Monitorea.</li>
</ol>El valor debe ser entero. Es útil cuando una lista continúa una secuencia anterior.
<ol reversed>
<li>Tercer lugar</li>
<li>Segundo lugar</li>
<li>Primer lugar</li>
</ol>Invierte la numeración conceptual.
<ol>
<li value="10">Décimo punto</li>
<li>Siguiente punto</li>
</ol>Permite establecer el número ordinal de un item dentro de ol.
<li>
<h3>DomiSys</h3>
<p>Sistema de gestión para negocios.</p>
</li>Un item puede contener flow content, no solamente una línea de texto.
<ul>
<li>
Frontend
<ul>
<li>React</li>
<li>TypeScript</li>
</ul>
</li>
</ul>La lista interna debe pertenecer al li, no ser hermana directa dentro de ul.
<nav aria-label="Principal">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/portfolio">Proyectos</a></li>
</ul>
</nav>La lista comunica que los enlaces forman un conjunto. No es obligatorio utilizar lista en toda navegación, pero suele ser apropiado cuando existe un grupo claro.
menu representa una lista de comandos. En HTML moderno su modelo es parecido al de ul y contiene li.
<menu>
<li><button type="button">Editar</button></li>
<li><button type="button">Eliminar</button></li>
</menu>No crea automáticamente un menú desplegable ni navegación de teclado de un menu ARIA.
Representa grupos de términos y descripciones:
<dl>
<dt>Estado</dt>
<dd>En desarrollo</dd>
<dt>Tecnologías</dt>
<dd>Next.js, TypeScript y PostgreSQL</dd>
</dl><dl>
<dt>HTML</dt>
<dt>HyperText Markup Language</dt>
<dd>Lenguaje de marcado para documentos web.</dd>
</dl>Un grupo puede contener varios dt y dd relacionados.
Para datos bidimensionales con encabezados y relaciones por filas/columnas utiliza table.
dl aporta para:
CSS controla marcadores, posición y layout. Eliminar marcadores no elimina la semántica en HTML, pero ciertos patrones de CSS pueden afectar cómo algunas tecnologías anuncian listas; prueba el resultado.
nav ul { list-style: none; }Sigue siendo una lista estructural. Evita añadir roles redundantes salvo un problema de interoperabilidad demostrado.
Tres cards repetidas pueden formar una lista conceptual:
<ul class="project-grid">
<li><article>...</article></li>
<li><article>...</article></li>
</ul>Pero si el wrapper solo existe para layout y cada article ya es una unidad independiente, un div también puede ser razonable. La relación del contenido decide.
<section aria-labelledby="stack-title">
<h2 id="stack-title">Tecnologías principales</h2>
<ul>
<li>React y Next.js para interfaces.</li>
<li>Node.js y Express para servicios.</li>
<li>PostgreSQL y MongoDB para persistencia.</li>
</ul>
</section>¿Cuándo una lista de pasos debe utilizar ol en lugar de ul?
Cuando la secuencia o posición de los pasos forma parte del significado y cambiar el orden alteraría el proceso.
Citas, código, datos, tiempo y ediciones marca fragmentos con significado especializado.