Últimamente me he puesto a escribir más artículos teóricos que prácticos. Siento desilucionar a algunos quienes entran a CSSLab por soluciones a sus problemas diarios en sus proyectos web, pero me interesa bastante difundir conocimiento, para así prevenir futuros problemas. Siempre es mejor prevenir que remediar.

Bueno en este caso, volveré a tocar el tema de las queridas listas en HTML. Son bastante útiles, ya que sus propiedades intrínsecas (el que sean elemento bloque y contengan bastante rígido su contenido) las hace muy maleables al momento de estructurar menús, por ejemplo. Pero como ando semántico por estos días, quiero aclarar qué son y cómo utilizar las listas.

Comencemos por lo básico. Una lista no es lo mismo que una secuencia. Una regla mental básica puede ayudarte a delucidar cuándo una lista es una lista:

Si creamos una lista y le quitamos sus marcadores (bullets o números) con CSS, entonces probablemente no es una lista

Esto hace ver que nuestro menú con listas no son semánticos. Los elementos de este menú son secuenciales, pero no necesariamente pertenecen a una lista. Les damos estilos, les ponemos fondos, cambiamos su color con :hover, pero si le quitamos los estilos, vuelve a ser una lista (ordenada o no) de elementos. No una secuencia. Entonces sí tiene sentido que sea una lista.

En HTML existen 3 tipos de listas:

definition lists⌗

Las listas de definición corresponden a pares de término y su definición.

<dl><br />
     <dt>Beodo</dt><br />
     <dd>Un beodo es un ebrio, borracho.</dd><br />
</dl>

corresponde a un definition term, o en castellano un término a definir. Ya
es la descripción de ese término.

    unordered lists⌗

Listas desordenadas son viejas amigas. Se utilizan cuando no importa el orden de los elementos contenidos. Como por ejemplo, en los ingredientes del vital alimento del beodo:

<ul><br />
     <li>vaso</li><br />
     <li>cerveza</li><br />
     <li>sed</li><br />
</ul>

Aquí da lo mismo el orden de los factores, el que no alterará el producto final.

    ordered lists⌗

Ya las listas ordenadas sí importa en qué orden las pongamos. Por eso por defecto,

    se renderiza con números secuenciales.

    <ol><br />
     <li>Toma la cerveza y ponla a esfriar.</li><br />
     <li>Prepara tu sed, en 1 hora y media aproximadamente ya podrás saciarla.</li><br />
     <li>Vierte la cerveza helada en un vaso y empina tu brazo hacia  tu boca.</li><br />
</ol>

    Espero haya quedado claro, y con esto ayude a que sus contenidos tengan más sentido a sus usuarios y principalmente a los buscadores, lo que les asegurará mejores posicionamientos en ellos.