FUNDAMENTOS FRONTEND

Listas en HTML

Cómo agrupar y organizar contenido web correctamente

Organiza contenido con listas HTML. Domina ul, ol y dl para crear menús y estructuras claras. Aprende anidamiento y semántica para una web accesible y profesional.

1

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**.

<!-- ❌ 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>.
2

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.

<!-- 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.
3

Listas Ordenadas (ol)

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

<!-- 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.
4

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.

<!-- <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.
5

Anidamiento de Listas (Sublistas)

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

<!-- 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.
6

Atributos Especiales de las Listas Ordenadas

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

<!-- 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.
Publicidad
html-css-online-course-responsive-web-design-from-scratch

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 expertosVer próximas fechas

Lección anterior

Ejemplo visual de imágenes, favicons e iframes usados en HTML
Los elementos multimedia permiten enriquecer visualmente una página web y mejorar la experiencia del usuario.

Multimedia en HTML

Enriquece tu web con multimedia. Aprende a insertar imágenes, optimizar con atributos alt, añadir favicons e incrustar iframes respetando accesibilidad y rendimiento.

Comenzar Lección

Lección actual

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

Listas en HTML

Organiza contenido con listas HTML. Domina ul, ol y dl para crear menús y estructuras claras. Aprende anidamiento y semántica para una web accesible y profesional.

Lección actual

Lección siguiente

Interfaz de formulario moderno con validaciones y teclado móvil activo
Vista previa de interfaces de formularios optimizadas para validación en tiempo real y usabilidad móvil.

Formularios HTML5: Lección Técnica Definitiva

Domina los formularios HTML5: estructura, métodos GET/POST, inputs semánticos y validaciones nativas. Aprende accesibilidad y optimización móvil para una mejor experiencia.

Comenzar Lección
¿Puedo cambiar los puntos por cuadrados o quitar las viñetas?VSí, 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?VEl 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?VAbsolutamente. 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>`?VPorque 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?VTé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>`?VPermite 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?VEs 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?VLas 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>`?VSí. 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>`?VEs 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>`).