Ú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.