Listas no ordenadas: ul y li
Cree listas con viñetas mediante los elementos ul y li.
Listas no ordenadas: ul y li es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es una lista desordenada?
Una lista desordenada muestra elementos con viñetas; el orden no importa:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>El elemento ul
El elemento <ul> (lista desordenada) contiene la lista. Solo los elementos <li> deben ser hijos directos:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->Aplicar estilos a las viñetas con CSS
Controle los marcadores de lista con CSS:
ul {
list-style-type: disc; /* default: filled circle */
/* circle, square, none */
}
/* Custom bullet with ::before */
ul li::before {
content: '→ ';
color: blue;
}
/* Remove all list styling: */
ul {
list-style: none;
padding: 0;
margin: 0;
}Navegación como ul
Semánticamente, los menús de navegación son una lista de enlaces:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>li puede contener cualquier contenido
Los elementos de lista pueden contener cualquier contenido de flujo:
<ul>
<li>
<strong>HTML</strong>
<p>The structure of the web.</p>
</li>
<li>
<strong>CSS</strong>
<p>The presentation layer.</p>
</li>
</ul>Listas en línea
Muestre horizontalmente los elementos de la lista con CSS:
<ul class="inline-list">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<!-- CSS: -->
<!--
.inline-list {
list-style: none;
padding: 0;
display: flex;
gap: 1rem;
}
-->Usos semánticos de ul
Usos semánticos habituales de las listas desordenadas:
- Menús de navegación
- Listas de características
- Nubes de etiquetas
- Enlaces relacionados
- Listas de ingredientes en recetas
ul frente a p para varios elementos
Cuando tiene varios elementos relacionados, una lista es semánticamente mejor que varios párrafos independientes:
<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>
<!-- Good: -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Marcadores de lista con list-style-image
Use una imagen personalizada como viñeta de la lista:
ul {
list-style-image: url('/icons/check.svg');
}
/* More reliable: use background-image on li::before */
ul li {
list-style: none;
padding-left: 1.5rem;
background: url('/icons/check.svg') no-repeat left center;
background-size: 1rem;
}Abreviatura list-style
La abreviatura list-style establece el tipo, la posición y la imagen:
ul {
list-style: square inside; /* type + position */
list-style: none; /* remove bullets */
}
/* list-style-position: inside vs outside */
ul {
list-style-position: inside; /* bullet inside padding box */
/* outside = default, bullet outside text block */
}Accesibilidad
Notas de accesibilidad para las listas:
- Los lectores de pantalla anuncian el tipo de lista y el número de elementos
- Usar
list-style: nonepuede hacer que algunos lectores de pantalla no la anuncien como una lista; añadarole="list"para conservar la semántica
<ul style="list-style: none" role="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>Comprobación rápida
¿Cuál es el único elemento hijo directo válido de ul?
Repaso: listas desordenadas
Aspectos esenciales de las listas desordenadas:
<ul>contiene una lista cuyo orden no importa<li>es el único hijo directo válido- Viñeta predeterminada: disc; se cambia con
list-style-type - Semánticamente, los menús de navegación son listas
<ul>de enlaces - Añada
role="list"si elimina las viñetas con CSS
Preguntas frecuentes
¿La lección «Listas no ordenadas: ul y li» es gratis?
Sí — el texto completo de «Listas no ordenadas: ul y li» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Listas no ordenadas: ul y li»?
Cree listas con viñetas mediante los elementos ul y li. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Listas no ordenadas: ul y li»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Listas no ordenadas: ul y li
- Listas ordenadas: ol, start, reversed y type
- Listas de descripción: dl, dt y dd
- Listas anidadas y estilos de listas