Las listas en HTML permiten agrupar elementos relacionados. Utiliza ul cuando el orden no cambie el significado, ol cuando la secuencia sea importante y li para cada elemento de esas listas.
Una lista de ingredientes y una serie de instrucciones tienen necesidades distintas. En esta guía aprenderás a elegir la estructura adecuada, anidar elementos y modificar su presentación sin perder el significado del contenido.
Cómo crear una lista desordenada con ul
Una lista desordenada suele mostrarse con viñetas. Es apropiada para características de un producto, materiales o recursos: cambiar el orden no altera lo que expresan.
<ul>
<li>Editor de código</li>
<li>Navegador web</li>
<li>Carpeta para el proyecto</li>
</ul>Cada elemento debe estar dentro de li. Evita simular viñetas escribiendo guiones y saltos de línea: el resultado puede parecer una lista, pero su estructura no lo será.
Cómo crear una lista ordenada con ol
Utiliza una lista numerada para pasos, clasificaciones o instrucciones cuya posición importa.
<ol>
<li>Crea un archivo index.html.</li>
<li>Escribe la estructura del documento.</li>
<li>Abre el archivo en el navegador.</li>
</ol>Continuar la numeración o cambiar su formato
<ol start="4">
<li>Añade los estilos.</li>
<li>Revisa el resultado en móvil.</li>
</ol>
<ol type="A">
<li>Opción principal</li>
<li>Opción alternativa</li>
</ol>start indica el valor inicial. type permite elegir números, letras o numeración romana. Para una cuenta descendente puedes usar reversed. No escribas números manualmente dentro de cada elemento: dejarían de actualizarse al reorganizarlo.
Cómo hacer listas anidadas en HTML
Una lista secundaria debe ir dentro del elemento li al que pertenece, antes de cerrarlo:
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>Puedes combinar listas ordenadas y desordenadas. Por ejemplo, cada paso de una instalación puede contener una lista de archivos necesarios. Limita la profundidad para que el contenido siga siendo fácil de recorrer en pantallas pequeñas.
Listas de descripción con dl, dt y dd
Cuando necesitas relacionar términos con sus definiciones, utiliza otra estructura:
<dl>
<dt>HTML</dt>
<dd>Define la estructura y el significado del contenido.</dd>
<dt>CSS</dt>
<dd>Controla la presentación visual.</dd>
</dl>dt contiene el término y dd su descripción. Esta opción encaja en glosarios y en algunos bloques de datos con nombre y valor; no sustituye automáticamente a una tabla comparativa.
Cómo cambiar las viñetas y el espacio con CSS
.recursos {
padding-left: 1.5rem;
list-style-type: square;
}
.recursos li { margin-block: .6rem; }
.recursos li::marker { color: #2563eb; }Aplica la clase a <ul class="recursos">. ::marker permite personalizar el marcador. Si eliminas las viñetas en un menú, comprueba también su comportamiento con las tecnologías de asistencia de los dispositivos a los que te diriges.
Cómo elegir entre lista y tabla
Una lista agrupa elementos. Una tabla relaciona datos por filas y columnas. Para comparar precio, duración y nivel de varios cursos, utiliza una tabla; para enumerar qué aprenderás en un curso, una lista suele bastar. Consulta los recursos de HTML.
Preguntas frecuentes
¿Puedo colocar enlaces dentro de una lista?
Sí. Cada li puede contener un enlace, texto y otros elementos compatibles con su contenido.
¿Por qué aparecen dos tipos de viñetas?
Los navegadores pueden aplicar estilos distintos según el nivel de anidación. Puedes ajustarlos con CSS.
¿Necesito cerrar li?
HTML permite omitir su cierre en algunos contextos, pero escribirlo facilita la lectura y evita confusiones al anidar contenido.
Practica creando una lista de materiales y otra con los pasos de tu proyecto. Si necesitas un editor, consulta nuestra introducción a Visual Studio Code.
Referencia técnica: documentación de ul en MDN.
