Ú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:
<dl> definition lists
Las listas de definición corresponden a pares de término y su definición.
<dl>
<dt>Beodo</dt>
<dd>Un beodo es un ebrio, borracho.</dd>
</dl><dt> corresponde a un definition term, o en castellano un término a definir. Ya <dd> es la descripción de ese término.
<ul> 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>
<li>vaso</li>
<li>cerveza</li>
<li>sed</li>
</ul>Aquí da lo mismo el orden de los factores, el que no alterará el producto final.
<ol> ordered lists
Ya las listas ordenadas sí importa en qué orden las pongamos. Por eso por defecto, <ol> se renderiza con números secuenciales.
<ol>
<li>Toma la cerveza y ponla a esfriar.</li>
<li>Prepara tu sed, en 1 hora y media aproximadamente ya podrás saciarla.</li>
<li>Vierte la cerveza helada en un vaso y empina tu brazo hacia tu boca.</li>
</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.
Comentarios
Finalmente no me quedo claro cual de las 3 opciones es la más recomendable para un menú. O es indiferente?
Pablo, para un menú la mejor es la lista desordenada. Una no tiene caso por que no definirás nada y una tampoco, no necesitan estar los elementos en un orden especifico de numeración.
Buen articulo 😀
[…] Otra vez con las listas Según nos cuentan en CSSLAB , siempre es mejor prevenir que remediar. Por eso recalca el tema de las 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. A continuación aclara lo qué son y cómo utilizarlas. […]
[…] Listo para las listas […]
confieso que jamás he utilizado las ¿vosotros sí? habrá que ponerse las pilas para la web semántica…
hola
tengo el siguiente problema (soy novato):
como puedo lograr esto : http://pastebin.com/m5286c1fb
pero sin que ni el hover ni el background se “coman” el texto anterior a el?
saludos
Ricardo, no entiendo lo q quieres hacer. Podrias ser un poco mas especifico?
mi problema es que al usar la clase “textback”, el fondo que le asigno al elemento de lista, se “come” el contenido del item antecesor, quedando sobre este. te dejo un ejemplo en imagen de lo que quiero : http://img515.imageshack.us/img515/2374/98695304yb8.jpg
Ricardo, quitale el line-height: 25pt; al ul y ya estaras.
http://pastebin.com/m57dc4bdb
si, pero el problema es que quiero el texto “pegadito”, por eso use line-height
entonces ajustalo hasta que quede igual al tamaño del texto. el que tenias era muy poco, dale mas.
pablo, no es indiferente cual lista usas, todo depende de lo que quieres comunicar, ha esto se le llama semántica, básicamente usa tu sentido común para diferenciar cuando necesitas:
listar cosas sin enumerarlas:
enumerar cosas:
listar temas, con su correspondiente titulo:
[…] subitems. En esta caso será un menú, pero puede ser también sólo una lista de elementos (ordenados <ol> o desordenados <ul>) sin enlaces. Bueno, a lo […]
Es bueno conocer la teoria sobre cualquier tema, porque nos ayudan a ser mas creativos con los conocimientos.. Asi que muy bueno el post!… despues de leerlo ya creo que estoy listo para crear listas aunque no yo no sea muy listo jaja..