Un ejemplo visual.
Echemos un vistazo a un ejemplo de un poco de contenido:
Semánticamente, una forma de pensar sobre este contenido es en dos partes relacionadas. Una parte se llama “Seguimiento de sus gastos” y tiene algunos datos descriptivos, la otra se llama “Feeds RSS” y tiene algunos datos descriptivos. Tenlo en cuenta y luego mira este código:
<div class="chunk">
<h4>Track your expenses</h4>
<img src="https://css-tricks.com/images/paper_small.gif" alt="" class="left"/>
<p>Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</p>
</div>
<div class="chunk">
<h4>RSS Feeds</h4>
<img src="https://css-tricks.com/images/rss_big.jpg" alt="" class="left"/>
<p>Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</p>
</div>Semánticamente, esto es incorrecto.
Aunque este código es bastante limpio y funcionará bien, semánticamente es una desviación de nuestros pensamientos originales. Hay dos cosas mal. Por un lado, los div separan los trozos de forma independiente en lugar de mantenerlos juntos. Dos, la “descripción” se ha dividido en un elemento y un elemento
, en lugar de mantenerse juntos.
Lista de definiciones al rescate.
BIEN BIEN. Arreglamos el ejemplo. Este resulta ser un escenario perfecto para una lista de definiciones. Las listas de definiciones constan de tres etiquetas diferentes:
-
- : contenedor
-
- : Término de definición (como un título)
-
- : Definición Descripción
Ahora intentemos reescribir este contenido usando listas de definiciones. Sabemos que podemos envolver todo en un recipiente ahora manteniendo todo junto. Sabemos que podemos establecer los títulos como términos de definición. Pero, ¿qué pasa con esa descripción? La mejor manera, semánticamente, sería incluir todo eso en un solo elemento de Descripción de Definición … ¡y podemos! El único inconveniente es que las imágenes cambian entre fragmentos, por lo que necesitaremos aplicar una clase única a los elementos
<dl>
<dt>Track your expenses</dt>
<dd class="chunk_divide">Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</dd>
<dt>RSS Feeds</dt>
<dd class="chunk_rss">Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</dd>
</dl>Estas etiquetas le dan mucho estilo en su CSS.
dt {
font-weight: bold;
}
dd {
background:none no-repeat left top;
padding-left: 50px;
}
dd.catchPhrase1 {
background-image:url('../img/paper_small.gif');
}
dd.catchPhrase2 {
background-image:url('../img/stats.gif');
}¿No podría hacer esto con una lista desordenada?
Seguro que puedes. Pero las listas solo pueden contener elementos de lista, por lo que el título y la descripción no se describirán semánticamente, así como con una lista de definición. Diablos, podría hacer esto con una tabla, con div, con cualquier número de elementos HTML, pero ninguno de ellos tendrá tanto sentido semántico como una lista de definiciones en este caso.
¿Qué mas pueden hacer?
Me alegra que lo hayas preguntado, porque este ejemplo no aprovecha todo lo que ofrecen las listas de definiciones. Otra fortaleza importante es que dentro de una lista de definiciones puede usar varios términos o descripciones, ¡no importa! Pensemos en algunos ejemplos.
DT: Enlace de página web
DD: Descripción del sitio web
DT: Próximo concierto
DD: fecha
DD: lugar
DD: Carga de cobertura
DT: Seudónimo # 1
DT: Seudónimo # 2
DD: lo que significa
DT: Receta
DD: ingrediente
DD: ingrediente
DD: Instrucciones
Una vez que empiezas a pensar realmente en ello, hay tantos ejemplos prácticos de listas de definiciones que es sorprendente que no los veas en el código con mucha frecuencia.
¿Por qué las listas de definiciones no son de uso más extendido?
Es difícil de decir … Creo que probablemente la razón más importante es la optimización de motores de búsqueda. La gente sabe (o cree saber) que las etiquetas de encabezado dan más peso e importancia al contenido. Si se usa correctamente, su etiqueta de término reemplaza la necesidad de una etiqueta de encabezado. Supongo que las personas piensan que eso significa que obtendrán menos energía de los motores de búsqueda de su contenido. No voy a hablar de ninguna manera sobre este tema, ya que no soy un genio del SEO, pero mi intuición es que nunca serás penalizado por un código bien marcado.
Otra limitación es que no puede usar elementos a nivel de bloque dentro del <dt> elemento. Es como elementos de encabezado (p. Ej. <h1>) de ese modo. (punta de sombrero Paul O’Brien)
Otras lecturas.
Listas de definiciones: ¿mal utilizadas o mal entendidas?
Demo y descarga
Ver demostración Descargar archivos