Listas
Listas no ordenadas: <ul>
La etiqueta <ul> (unordered list) agrupa elementos sin un orden significativo. Cada elemento se marca con <li>:
<ul>
<li>Leche</li>
<li>Pan</li>
<li>Huevos</li>
</ul>El navegador muestra cada <li> con una viñeta (por defecto, un disco relleno) y añade sangrado. Tanto el tipo de viñeta como el sangrado son estilos por defecto del navegador: se pueden modificar o eliminar completamente con CSS.
Las listas son elementos de bloque: no pueden colocarse dentro de un <p>. Esto es un error que el navegador corrige silenciosamente pero que produce HTML inválido:
<!-- Incorrecto -->
<p>Necesito: <ul><li>Leche</li></ul></p>
<!-- Correcto -->
<p>Necesito:</p>
<ul>
<li>Leche</li>
</ul>Listas ordenadas: <ol>
La etiqueta <ol> (ordered list) crea una lista numerada. Usa también <li> para cada elemento:
<ol>
<li>Precalentar el horno a 180°</li>
<li>Mezclar los ingredientes</li>
<li>Hornear durante 25 minutos</li>
</ol>El navegador numera automáticamente los elementos desde 1. Dos atributos HTML5 permiten ajustar ese comportamiento.
start indica el número inicial:
<ol start="5">
<li>Este elemento aparece como 5</li>
<li>Este como 6</li>
</ol>reversed invierte el orden de numeración, contando hacia atrás:
<ol reversed>
<li>Tercer lugar</li>
<li>Segundo lugar</li>
<li>Primer lugar</li>
</ol>El tipo de marcador (números, letras, romanos) se controla con CSS, como veremos más adelante.
Listas de definición: <dl>
La etiqueta <dl> (description list) asocia términos con sus descripciones. Usa <dt> para el término y <dd> para la descripción:
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcas para estructurar el contenido web.</dd>
<dt>CSS</dt>
<dd>Lenguaje de estilos que controla la presentación visual.</dd>
</dl>Un <dt> puede tener varias <dd> asociadas, y varios <dt> consecutivos pueden compartir una <dd>. Es la estructura adecuada para glosarios, FAQs o cualquier lista de pares clave-valor.
El navegador aplica un sangrado por defecto a <dd>, que como siempre se controla con CSS. <dl> no tiene marcadores visuales propios.
Listas anidadas
Una lista puede contener otra lista dentro de un <li>. La lista interior debe ir siempre dentro del <li>, nunca fuera:
<ul>
<li>Frutas
<ul>
<li>Manzana</li>
<li>Pera</li>
</ul>
</li>
<li>Verduras
<ul>
<li>Zanahoria</li>
<li>Espinaca</li>
</ul>
</li>
</ul>Se pueden anidar listas de distinto tipo: una <ul> dentro de un <li> de <ol>, o viceversa. El navegador aplica marcadores diferentes en cada nivel de anidamiento, aunque CSS puede cambiarlo.
list-style-type
La propiedad list-style-type controla el tipo de marcador de los elementos <li>:
ul { list-style-type: disc; } /* predeterminado: disco relleno */
ul { list-style-type: circle; } /* círculo hueco */
ul { list-style-type: square; } /* cuadrado */
ul { list-style-type: none; } /* sin marcador */
ol { list-style-type: decimal; } /* predeterminado: 1, 2, 3 */
ol { list-style-type: lower-roman; } /* i, ii, iii */
ol { list-style-type: upper-roman; } /* I, II, III */
ol { list-style-type: lower-alpha; } /* a, b, c */
ol { list-style-type: upper-alpha; } /* A, B, C */CSS3 permite usar directamente una cadena de texto como marcador, incluidos emojis:
ul {
list-style-type: "→ ";
}
ul.destacada {
list-style-type: "⭐ ";
}El soporte para cadenas personalizadas es bueno en navegadores modernos. Para compatibilidad más amplia, ::marker (que veremos a continuación) es más robusto.
list-style-position
list-style-position controla si el marcador queda fuera o dentro del área de contenido del <li>:
ul { list-style-position: outside; } /* por defecto: el marcador queda en el margen */
ul { list-style-position: inside; } /* el marcador forma parte del flujo del texto */La diferencia es visible sobre todo cuando el texto de un <li> ocupa varias líneas: con outside, las líneas siguientes se alinean con la primera letra, dejando el marcador en el margen. Con inside, el texto envuelve al marcador desde la segunda línea.
list-style-image
Permite usar una imagen como marcador:
ul {
list-style-image: url("/images/viñeta.svg");
list-style-type: disc; /* respaldo si la imagen no carga */
}El control sobre el tamaño y la alineación de la imagen es limitado con esta propiedad. Para más control, es mejor eliminar el marcador y añadir la imagen mediante ::before:
ul {
list-style: none;
padding-left: 0;
}
ul li::before {
content: url("/images/viñeta.svg");
margin-right: 0.5em;
}La propiedad list-style
La forma abreviada combina tipo, posición e imagen en una sola declaración. El orden no es estrictamente obligatorio, pero la convención es tipo, posición e imagen:
ul {
list-style: square inside;
}
ol {
list-style: lower-roman outside;
}El pseudo-elemento ::marker
::marker permite estilizar directamente el marcador de cada <li>, con más control que list-style-type y sin necesidad de trucos con ::before:
ul li::marker {
color: #84ba3f;
font-size: 1.2em;
}
ol li::marker {
color: #3366cc;
font-weight: bold;
}El conjunto de propiedades que acepta ::marker es limitado: básicamente color, fuente y contenido. No se puede controlar el posicionamiento. Para efectos más complejos, la técnica con list-style: none y ::before sigue siendo necesaria.
Listas sin marcador
Uno de los usos más frecuentes de list-style: none es la navegación. Los menús son semánticamente listas de enlaces, pero visualmente no tienen viñetas ni numeración:
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/about">Sobre mí</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}El trío list-style: none; margin: 0; padding: 0 es el reset estándar para cualquier lista que vaya a estilizarse completamente con CSS. Los navegadores aplican margen y relleno por defecto a <ul> y <ol>; si no los eliminas, el diseño no coincidirá con lo que esperas.
Material histórico
El atributo type en <ul> (type="disc", type="circle", type="square") fue declarado obsoleto en HTML5. Hoy se usa list-style-type en CSS.
En <ol>, type sigue siendo técnicamente válido en HTML5 cuando el tipo de numeración forma parte del contenido y no es solo presentación (por ejemplo, en documentos legales con secciones numeradas en romano). Aun así, la práctica habitual es usar CSS para mantener la separación de responsabilidades.
El uso de <dl> para crear sangrados visuales sin relación semántica entre términos y descripciones era habitual en los primeros años de HTML, cuando las opciones de maquetación eran escasas. Hoy es un antipatrón: si lo que necesitas es sangrar texto, usa margin-left en CSS.
Tu proyecto
Añade una sección de servicios a proyecto.html usando una lista no ordenada, y estilízala en estilos.css para que los marcadores desaparezcan y quede como un listado limpio:
<h2 id="servicios">Servicios</h2>
<ul class="lista-servicios">
<li>Proyecto de arquitectura</li>
<li>Interiorismo y reforma</li>
<li>Consulta y asesoría técnica</li>
</ul>.lista-servicios {
list-style: none;
padding: 0;
margin: 0;
}
.lista-servicios li {
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}Añade también el enlace a esta sección en el <nav> que creaste en la lección de selectores.
Recapitulación
<ul>para listas sin orden,<ol>para listas ordenadas,<dl>con<dt>y<dd>para listas de definición.<ol>aceptastart(número inicial) yreversed(cuenta atrás), ambos válidos en HTML5.- Las listas son elementos de bloque: nunca dentro de
<p>. list-style-typecontrola el marcador.list-style-positioncontrola si queda fuera o dentro del contenido.list-style-imagepermite imágenes como marcador.list-stylelos combina en una sola declaración.- CSS3 permite cadenas de texto y emojis como marcador con
list-style-type: "→ ". ::markerestiliza directamente el marcador (color, fuente) sin trucos adicionales.- El reset
list-style: none; margin: 0; padding: 0es el punto de partida para listas estilizadas con CSS, especialmente en navegación. - El atributo
typeen<ul>es obsoleto. En<ol>sigue siendo válido pero se prefiere CSS.
En la próxima lección: tablas: cuándo usarlas, cómo estructurarlas correctamente, y cómo estilizarlas con CSS.