Analizando las listas definidas en una web

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
    1. Zulia
    2. Maracaibo
  • México
    1. México DF
    2. Monterrey