Definition List < dl >: El tag olvidado

Para salir un poco de la rutina, disculpar los que no les interesa nada el código fuente, me gustaría conversar sobre una etiqueta de HTML que personalmente me gusta utilizar y está un poco olvidada o quizá nunca se han visto las posibilidad de este tag. Para quien no la conozca, Señoras y señores os presento la etiqueta de Definition List

<dl>Definition List</dl>

<dt>¿qué es y para qué funciona?</dt>

<dd>Sive para crear listas de definiciones</dd>

</dl>

Esta etiqueta funciona a manera de diccionario/directorio, primero se define la lista (definition list, dl), luego el término (definition term dt) y finalmente la descripción (definition description dd). Para que esta parrafada valide se debe respetar el orden dl – dl -dd. Esta etiqueta tiene un comportamiento similar a del las listas desordenadas <ul> (unordered list) y se puede customizar mucho con CSS.

Dentro de los diferentes usos que he hecho y he visto hacer de ella destacan:

  1. Listas desordenadas donde ya no quieras utilizar <li>. Ejemplo: Tienes dos listas con formatos distintos dentro del mismo div id y no quieres formatear todo de nuevo.
  2. Pie de foto (Image Caption) no es la manaera más elegante, pero con CSS y creatividad se resuelve.
  3. Para colocar elementos que no tengas priodidad semántica.
  4. Para hacer un menú
  5. Evidentemente para hacer un diccionario o lista de definiciones

Lo importante de todo esto es considerar y/o descubrir nuevas etiquetas HTML para no caer en la monotinía de <div> y el <span>, estamos saliendo de las tablas y se aproxima una nueva versión del HTML. A la hora de diseñar prestemos un poco más de atención a los tags, no todo es <h1…6> ni <p> ni <ul> <li> y mucho menos tablas

Acerca de Jorge Márquez

User experince designer

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>