Listas
Una cantidad sorprendente de una página web es realmente una lista: menús de navegación, resultados de búsqueda, cuadrículas de productos, los ingredientes de una receta, los pasos para restablecer una contraseña. Siempre que el contenido es un conjunto de elementos relacionados, HTML tiene un elemento que lo dice, y usarlo significa que el navegador, y cualquiera que lea con software de asistencia, sabe que los elementos pertenecen juntos.
Listas sin orden
Cuando el orden de los elementos no importa, usas una lista sin orden. Piensa en una lista de compras: leche, pan, huevos. No importa cuál escribas primero, son un montón de cosas agrupadas juntas.
Construyes una con dos etiquetas. La etiqueta <ul> envuelve toda la lista, y cada elemento va dentro de su propia etiqueta <li> ("elemento de lista"):
<ul>
<li>Leche</li>
<li>Pan</li>
<li>Huevos</li>
</ul>El navegador muestra cada elemento en su propia línea con un punto de viñeta al frente. No agregaste las viñetas ni los saltos de línea tú mismo, el navegador lo hace porque le dijiste que esto es una lista.
<ul> para una lista donde el orden no importa, y envuelve cada elemento en su propio <li>. El navegador agrega las viñetas y los saltos de línea para ti, así que nunca escribes esos a mano. Me tomó un tiempo confiar en eso, seguía queriendo agregar los puntos yo mismo. Listas ordenadas y sus atributos
A veces el orden es todo el punto. Pasos en una receta, posiciones en una carrera, instrucciones que sigues una tras otra. Para esas usas una lista ordenada, que numera los elementos para ti.
Funciona exactamente como una lista sin orden, pero el contenedor es <ol> en lugar de <ul>:
<ol>
<li>Precalienta el horno a 180°C</li>
<li>Mezcla la harina y el azúcar</li>
<li>Vierte en el molde y hornea durante 25 minutos</li>
</ol>Ahora el navegador pone 1, 2, 3 al frente de los elementos en lugar de viñetas. Si agregas un nuevo paso en el medio más adelante, los números se renumeran a sí mismos. Nunca escribes los números, y ese es el punto de usar <ol>.
<ol> cuando el orden importa, como pasos en una receta, y el navegador numera los elementos para ti. Agrega o elimina un paso y los números se arreglan a sí mismos, así que nunca escribes 1. o 2. a mano. Los mismos elementos <li> que antes, solo un contenedor diferente. Listas de descripción
Hay un tercer tipo de lista para cuando cada elemento es realmente un par: una palabra y su significado, una etiqueta y su valor. Un glosario es el ejemplo más claro, cada término seguido de lo que significa.
Esta es una lista de descripción, y usa tres etiquetas. <dl> envuelve todo, <dt> contiene cada término, y <dd> contiene la descripción que va con él:
<dl>
<dt>HTML</dt>
<dd>El lenguaje que describe la estructura de una página.</dd>
<dt>CSS</dt>
<dd>El lenguaje que describe cómo se ve la página.</dd>
</dl>El navegador muestra cada descripción sangrada bajo su término, así que el emparejamiento es claro de un vistazo. Piensa en "dt" como la palabra que estás definiendo y "dd" como la definición.
<dl> alrededor de todo, <dt> para cada término, y <dd> para la descripción que lo sigue. Un glosario es la imagen para mantener en tu cabeza, palabra luego definición, palabra luego definición. Listas anidadas
Las listas pueden ir dentro de otras listas. Un menú podría tener "Bebidas" con opciones calientes y frías debajo, y cada una de esas con sus propias opciones. Poner una lista dentro de otra se llama anidamiento.
Lo clave para acertar: la lista interna va dentro de un <li>, no flotando entre elementos. Pones todo el <ul> (u <ol>) dentro del elemento de lista al que pertenece:
<ul>
<li>Bebidas
<ul>
<li>Café</li>
<li>Té</li>
</ul>
</li>
<li>Refrigerios</li>
</ul>"Café" y "Té" son parte de "Bebidas", así que su pequeña lista vive dentro del elemento "Bebidas". El navegador sangra un poco más la lista interna, así que puedes ver que pertenece al elemento arriba.
<li> al que pertenece, no suelta entre elementos. El navegador la sangra así que puedes ver que es parte del elemento arriba. Esa regla dentro de <li> es la única cosa para recordar aquí.