Listas en HTML

Seguramente recuerden el menú Numeración y Viñetas en Microsoft World. Quizás no tan común pero igualmente visibles son las listas en HTML, al diseñar páginas web. Como en el resto de las especificaciones, hay tags o etiquetas asociadas: <li>, <ul>, <ol>, <dl>, <dd>, <dt> y otras dependiendo del tipo de lista que queramos. Propongo en este artículo revisar las distintas posibilidades.

Listas ordenadas o numeradas

El comienzo y el final de la lista se marca con la etiqueta <ol> de la siguiente forma: <ol> …LISTA… </ol>. Cada ítem de la lista, irá entre etiquetas <li> resultando:

<ol>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
</ol>

Listas sin órden ni numeración

Las listas sin órden ni numeración son igual a las primeras con la diferencia de que la etiqueta <ol> será sustituída por <ul>. Por ejemplo:

<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
</ul>

Listas con definiciones

Las listas con definiciones son un caso más particular de listas. Son englobadas por la etiqueta <dl>. A diferencia de las anteriores, donde se utilizan las etiquetas <li></li>,  cada ítem estará compuesto por el nombre del ítem (entre etiquetas <dt>) y su definición (entre etiquetas <dd>). Por ejemplo:

<dl>
<dt>Ítem 1</dt>
<dd>Definición del ítem 1</dd>
<dt>Ítem 2</dt>
<dd>Definición del ítem 2</dd>
<dt>Ítem 3</dt>
<dd>Definición del ítem 3</dd>
</dl>

Las listas a su vez pueden anidarse, esto es colocarse unas dentro de otras. Los márgenes de cada lista, los tipos de letra, numeración, colores, etc. podrán ser ajustados desde una hoja de estilos CSS. Eso lo veremos próximamente.