El día de hoy hablaremos un poco sobre las listas que se sitúan en los sitios web. Se verá además la anidación de listas, que trascenderá a un recurso sugestivo para estructurar datos un poco más complejos o contar elementos con una jerarquía. De esa forma, poder distribuir mejor el contenido.
Listas de definición
Las listas de definición se usan para lograr un conjunto de elementos con pares concepto-descripción. O sea, se detallarán distintos términos por su nombre y se redactará una definición para cada una. Cada elemento es mostrado junto con su concepto, uno detrás de otro.
Para hacer una lista de definición, la etiqueta primordial es <dl> y </dl> (definition list). La etiquetas del elemento y su conceptuación son <dt> (definition term) y <dd> (definition definition) proporcionalmente.
Es por eso que acá les dejamos un código que podrá aclarar el sistema:
<p>Catálogo de belleza</p>
<dl>
<dt>Perfumes
<dd>Rocío de jazmín
<dt>Todo en ropa
<dd>Ropa de gala
</dl>
El efecto producido:
Catálogo de Belleza
Perfumes
Rocío de jazmín
Todo en ropa
Ropa de gala
Si se fijan en que cada línea <dd> esta desplazada hacia la izquierda. Este tipo de etiquetas son empleadas usualmente con la intención de crear textos más o menos desplazados hacia la izquierda.
El código:
<dl>
<dd>Primer nivel de desplazamiento
<dl>
<dd>Segundo nivel de desplazamiento
<dl>
<dd>Tercer nivel de desplazamiento
</dl>
</dl>
</dl>
El resultado:
Primer nivel de desplazamiento
Segundo nivel de desplazamiento
Tercer nivel de desplazamiento
Anidando listas
Ahora bien, nada os impedirá manejar todas estas etiquetas de manera anidada como se ha visto en otros casos. De esa forma, se pueden lograr listas mixtas como por ejemplo:
<p>Países del mundo</p>
<ul>
<li>Venezuela
<ol>
<li>Zulia
<li>Maracaibo
</ol>
<li>México
<ol>
<li>México DF
<li>Monterrey
</ol>
</ul>
De esta manera se hace una lista como esta:
Ciudades del mundo
- Venezuela
- Zulia
- Maracaibo
- México
- México DF
- Monterrey
