Fundamentos Frontend

Listas en HTML

Cómo agrupar y organizar contenido web correctamente

Las listas en HTML son fundamentales para estructurar información en la web. Se utilizan en menús de navegación, pasos secuenciales, características de productos y glosarios. En esta lección aprenderás qué tipos de listas existen, cuándo usar cada una y cómo anidarlas respetando la semántica del HTML.

Las listas en HTML permiten organizar información relacionada de forma clara, jerárquica y accesible.

La Unidad Básica de una Lista: <li>

Antes de hablar de tipos de listas, debemos entender el elemento fundamental que las compone: el `<li>` (List Item). Cada `<li>` representa un ítem individual dentro de una lista y **nunca puede existir solo**.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- ❌ Ejemplo incorrecto: un <li> no puede existir sin una lista padre -->
<li>Un elemento suelto</li>

<!-- ✅ Ejemplo correcto: los <li> siempre van dentro de <ul> o <ol> -->
<ul>
  <!-- Cada <li> representa un ítem de la lista -->
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

<!-- ❌ Ejemplo incorrecto: un <li> no puede existir sin una lista padre -->
<li>Un elemento suelto</li>

<!-- ✅ Ejemplo correcto: los <li> siempre van dentro de <ul> o <ol> -->
<ul>
  <!-- Cada <li> representa un ítem de la lista -->
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

Estructura correcta de una lista HTML con ul y li — El elemento <li> siempre debe estar contenido dentro de una lista <ul> o <ol>.

Listas Desordenadas (<ul>)

Las listas desordenadas se usan cuando el orden de los elementos no es importante. Son ideales para menús, características, categorías o colecciones de ítems relacionados.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Título que introduce la lista -->
<h3>Ingredientes para Pizza:</h3>

<!-- <ul> crea una lista sin orden numérico -->
<ul>
  <!-- Cada ingrediente es un <li> -->
  <li>Harina</li>
  <li>Levadura</li>
  <li>Salsa de tomate</li>
  <li>Queso Mozzarella</li>
</ul>

<!-- Título que introduce la lista -->
<h3>Ingredientes para Pizza:</h3>

<!-- <ul> crea una lista sin orden numérico -->
<ul>
  <!-- Cada ingrediente es un <li> -->
  <li>Harina</li>
  <li>Levadura</li>
  <li>Salsa de tomate</li>
  <li>Queso Mozzarella</li>
</ul>

Lista HTML desordenada renderizada con viñetas — Las listas <ul> se muestran con viñetas por defecto, indicando que el orden no es relevante.

Listas Ordenadas (<ol>)

Las listas ordenadas se usan cuando el orden de los pasos o elementos es fundamental para comprender el contenido.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Título descriptivo de los pasos -->
<h3>Instrucciones de Montaje:</h3>

<!-- <ol> crea una lista numerada automáticamente -->
<ol>
  <!-- Cada <li> representa un paso secuencial -->
  <li>Abrir la caja con cuidado.</li>
  <li>Identificar todas las piezas.</li>
  <li>Ensamblar la base con los tornillos.</li>
  <li>Colocar la tapa superior.</li>
</ol>

<!-- Título descriptivo de los pasos -->
<h3>Instrucciones de Montaje:</h3>

<!-- <ol> crea una lista numerada automáticamente -->
<ol>
  <!-- Cada <li> representa un paso secuencial -->
  <li>Abrir la caja con cuidado.</li>
  <li>Identificar todas las piezas.</li>
  <li>Ensamblar la base con los tornillos.</li>
  <li>Colocar la tapa superior.</li>
</ol>

Lista HTML ordenada con numeración automática — Las listas <ol> indican una secuencia lógica o temporal de pasos.

Listas de Definición (<dl>)

Las listas de definición se usan para asociar términos con sus descripciones. Son ideales para glosarios, conceptos técnicos o pares clave–valor.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- <dl> define una lista de términos y descripciones -->
<dl>
  <!-- <dt> es el término a definir -->
  <dt>HTML</dt>
  <!-- <dd> es la definición del término -->
  <dd>Lenguaje de marcado para estructurar contenido web.</dd>

  <dt>CSS</dt>
  <dd>Lenguaje utilizado para dar estilo y diseño a la web.</dd>
</dl>

<!-- <dl> define una lista de términos y descripciones -->
<dl>
  <!-- <dt> es el término a definir -->
  <dt>HTML</dt>
  <!-- <dd> es la definición del término -->
  <dd>Lenguaje de marcado para estructurar contenido web.</dd>

  <dt>CSS</dt>
  <dd>Lenguaje utilizado para dar estilo y diseño a la web.</dd>
</dl>

Ejemplo visual de lista de definición en HTML — Las listas <dl> relacionan conceptos con sus definiciones de forma semántica.

Anidamiento de Listas (Sublistas)

Las listas pueden contener otras listas para representar jerarquías. La sublista siempre debe estar dentro del `<li>` padre.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Lista principal -->
<ul>
  <!-- Ítem padre -->
  <li>Tecnología Frontend
    <!-- Sublista correctamente anidada -->
    <ul>
      <li>React</li>
      <li>Vue</li>
      <li>Angular</li>
    </ul>
  </li>

  <li>Tecnología Backend</li>
</ul>

<!-- Lista principal -->
<ul>
  <!-- Ítem padre -->
  <li>Tecnología Frontend
    <!-- Sublista correctamente anidada -->
    <ul>
      <li>React</li>
      <li>Vue</li>
      <li>Angular</li>
    </ul>
  </li>

  <li>Tecnología Backend</li>
</ul>

Diagrama de listas HTML anidadas correctamente — La sublista debe estar dentro del <li> del ítem padre para mantener la semántica.

Atributos Especiales de las Listas Ordenadas

Las listas `<ol>` permiten controlar la numeración usando atributos HTML sin necesidad de CSS.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- La lista comienza desde el número 10 -->
<ol start="10">
  <li>Paso avanzado</li>
  <li>Paso experto</li>
</ol>

<!-- reversed invierte el orden de la numeración -->
<ol reversed>
  <li>Medalla de Bronce</li>
  <li>Medalla de Plata</li>
  <li>Medalla de Oro</li>
</ol>

<!-- La lista comienza desde el número 10 -->
<ol start="10">
  <li>Paso avanzado</li>
  <li>Paso experto</li>
</ol>

<!-- reversed invierte el orden de la numeración -->
<ol reversed>
  <li>Medalla de Bronce</li>
  <li>Medalla de Plata</li>
  <li>Medalla de Oro</li>
</ol>

Ejemplo de listas ordenadas con atributos start y reversed — Los atributos start y reversed permiten controlar la numeración de las listas ordenadas.

htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, ~~sin videos fríos~~ ni ~~cursos masivos~~.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

¿Puedo cambiar los puntos por cuadrados o quitar las viñetas?

Sí, esto es tarea de CSS. Usando la propiedad `list-style-type`, puedes cambiar los puntos por `square`, `circle`, números romanos, o usar `none` para quitarlos (común en menús).

¿Cuál es el error más común al anidar listas?

El error clásico es cerrar el `</li>` padre antes de abrir la nueva `<ul>`. La sublista quedaría 'flotando' fuera del ítem al que pertenece, rompiendo la semántica y la accesibilidad.

¿Puedo mezclar listas ordenadas dentro de desordenadas?

Absolutamente. Puedes tener una lista principal con viñetas (`<ul>`) y que uno de sus ítems contenga una lista numerada de pasos (`<ol>`). Es totalmente válido y útil.

¿Por qué los menús de navegación se hacen con `<ul>`?

Porque semánticamente un menú es una 'lista de enlaces'. Esto permite a los lectores de pantalla anunciar 'Lista de 5 elementos', ayudando al usuario ciego a entender la estructura de navegación.

¿Existe límite de anidamiento?

Técnicamente no hay límite, puedes anidar infinitamente. Sin embargo, por usabilidad y diseño (el margen izquierdo se va acumulando), no se recomienda pasar de 3 o 4 niveles de profundidad.

¿Para qué sirve el atributo `type` en `<ol>`?

Permite cambiar el tipo de contador sin CSS. `type="A"` usa letras mayúsculas, `type="a"` minúsculas, `type="I"` números romanos, etc. Aunque hoy en día se prefiere controlar esto desde CSS.

¿Qué pasa si uso `<li>` fuera de una lista?

Es HTML inválido. El navegador intentará renderizarlo, pero perderá las características de lista (sangría, viñeta) y fallará en herramientas de accesibilidad y validadores W3C.

¿Cómo hago una lista horizontal?

Las listas son elementos de bloque vertical por defecto. Para hacerlas horizontales (como un menú superior), debes aplicar CSS: `display: flex;` al contenedor `<ul>` o `display: inline-block;` a los `<li>`.

¿Puedo poner imágenes o párrafos dentro de un `<li>`?

Sí. Un `<li>` es un contenedor capaz de alojar cualquier elemento de bloque o línea: imágenes, divs, párrafos enteros, o incluso formularios, siempre que esté dentro de la estructura de lista.

¿Qué es una lista de descripción `<dl>`?

Es una estructura diseñada para pares clave-valor. A diferencia de `<ul>` que es un solo ítem por línea, `<dl>` vincula un término (`<dt>`) con su definición (`<dd>`).

¿Puedo tener varios `<dd>` para un solo `<dt>`?

Sí. Puedes definir un término y darle múltiples acepciones o descripciones seguidas. Ejemplo: `<dt>Color</dt> <dd>Rojo</dd> <dd>Azul</dd>`.

¿Las listas afectan al SEO?

Sí, positivamente. Google prefiere contenido estructurado. Si usas listas para enumerar características o pasos, es más probable que Google genere un 'Rich Snippet' o lista destacada en los resultados de búsqueda.

¿Cómo quito el margen izquierdo (padding) que traen las listas?

Los navegadores aplican un `padding-left` de unos 40px por defecto. Para 'resetearla', usa CSS: `ul { padding-left: 0; margin: 0; list-style: none; }`.

¿Qué es el atributo `value` en un `<li>`?

Es un atributo raro usado solo en listas ordenadas `<ol>`. Permite forzar el número de un ítem específico. `<li value="7">` hará que ese ítem sea el número 7, y el siguiente el 8.

¿Es semántico usar listas para maquetar el layout completo?

No. Antiguamente se usaban tablas, y a veces listas, para maquetar. Hoy en día se usan `<div>`, `<section>`, `<grid>` y `<flexbox>`. Las listas son estrictamente para enumerar o agrupar ítems relacionados.