Curso de HTML
Construye la estructura de la web.
Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.
Cuando el orden de los elementos no importa —ingredientes, características de un producto— usas una lista desordenada, con viñetas en vez de números.
Explicación
La lista desordenada reutiliza <li> para cada elemento, igual que <ol>, pero cambia el contenedor:
<ul>Contenedor de la lista desordenada. El navegador muestra una viñeta antes de cada elemento.
<li>Cada elemento, exactamente igual que en una lista ordenada.
<ul> dentro de <li>Permite anidar una sublista dentro de un elemento, igual que con <ol>.
Reto rápido
Agrega dos ingredientes más dentro de la lista.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Los menús de navegación de casi cualquier sitio web están construidos con una <ul> dentro de un <nav>, y luego se les quita la viñeta con CSS.
Dato extra
La viñeta que ves por defecto es solo el estilo del navegador: se puede cambiar o quitar por completo con la propiedad CSS list-style.
Error común
Usar <ul>/<li> solo por el estilo de viñeta que traen por defecto, en vez de porque el contenido realmente es una lista de elementos relacionados.
Siguiente paso
Ya conoces las dos listas más comunes. Ahora veamos una tercera, pensada para pares de término y descripción.
Ir a la siguiente lección