5.3. Listas de definición

Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada elemento de la lista.

Etiqueta <dl>
Atributos comunes básicos, internacionalización y eventos
Atributos propios -
Tipo de elemento Bloque
Descripción Se emplea para definir listas de definición
Etiqueta <dt>
Atributos comunes básicos, internacionalización y eventos
Atributos propios -
Tipo de elemento Bloque
Descripción Se emplea para definir los términos de los elementos de una lista de definición
Etiqueta <dd>
Atributos comunes básicos, internacionalización y eventos
Atributos propios -
Tipo de elemento Bloque
Descripción Se emplea para indicar las definiciones de los elementos de una lista de definición

El siguiente código HTML muestra un ejemplo sencillo de lista de definición:

<html>
<head><title>Ejemplo de etiqueta DL</title></head>
<body>
<h1>Metalenguajes</h1>
 
<dl>
  <dt>SGML</dt>
  <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
 
  <dt>XML</dt>
  <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
 
  <dt>RSS</dt>
  <dt>GML</dt>
  <dt>XHTML</dt>
  <dt>SVG</dt>
  <dt>XUL</dt>
  <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>
 
</body>
</html>
Ejemplo de uso de la etiqueta dl

Figura 5.3 Ejemplo de uso de la etiqueta dl

Los navegadores formatean las listas de definición de forma similar a las otras listas, tabulando la definición y alineando a la izquierda los términos. Aunque no es habitual, cada término puede tener asociada más de una definición y cada definición puede tener asociada varios términos.

Ejercicio 8

Determinar el código HTML que corresponde a la siguiente lista anidada simple

Ejemplo de lista anidada simple de dos niveles

Figura 5.4 Ejemplo de lista anidada simple de dos niveles

Ver solución

Ejercicio 9

Determinar el código HTML que corresponde a la siguiente lista anidada compleja

Ejemplo de lista anidada compleja de dos niveles

Figura 5.5 Ejemplo de lista anidada compleja de dos niveles

Ver solución