Etiqueta dl en HTML

¿Qué es la etiqueta <dl> en HTML?

La etiqueta <dl> en HTML5 se utiliza para crear una lista de definición. Esta lista se compone de una serie de términos y sus definiciones correspondientes.

La estructura básica de una lista de definición es la siguiente:


<dl>
  <dt>Término 1</dt>
  <dd>Definición 1</dd>
  <dt>Término 2</dt>
  <dd>Definición 2</dd>
  <dt>Término 3</dt>
  <dd>Definición 3</dd>
</dl>

Lenguaje del código: HTML, XML (xml)

Aquí, <dt> representa un término en la lista de definición, y <dd> representa la definición correspondiente. Puedes agregar tantos términos y definiciones como desees en la lista.

Además, puedes anidar otros elementos HTML dentro de las etiquetas <dt> y <dd>. Por ejemplo, podrías agregar un enlace o una imagen dentro de una definición.

Es importante tener en cuenta que la etiqueta <dl> solo debe usarse para definiciones reales, y no para otros tipos de listas. Si deseas crear una lista con viñetas o numerada, debes usar las etiquetas <ul> o <ol> en su lugar.

Ejemplo de uso

Aquí tienes un ejemplo de cómo usar la etiqueta <dl> en HTML5:


<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de lista de definición en HTML5</title>
  </head>
  <body>
    <h1>Lista de definición</h1>
    <dl>
      <dt>HTML</dt>
      <dd>Lenguaje de marcado de hipertexto utilizado para crear páginas web.</dd>
      <dt>CSS</dt>
      <dd>Lenguaje de hojas de estilo utilizado para dar estilo y diseño a las páginas web.</dd>
      <dt>JavaScript</dt>
      <dd>Lenguaje de programación utilizado para crear interactividad y dinamismo en las páginas web.</dd>
    </dl>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, creamos una lista de definición que incluye tres términos: HTML, CSS y JavaScript. Cada término tiene una definición correspondiente que se muestra debajo de él.

Al visualizar este código HTML en un navegador web, verás una lista de definición en la página web que muestra los términos y definiciones que hemos especificado en el código.

Atributos

En HTML5, la etiqueta <dl> (lista de definición) admite los siguientes atributos:

  • compact: este atributo se utiliza para especificar que la lista de definición debe renderizarse de manera más compacta, lo que significa que los espacios en blanco entre los términos y las definiciones se reducen. Este atributo es opcional y se utiliza de la siguiente manera:

<dl compact>
  ...
</dl>

Lenguaje del código: HTML, XML (xml)

Es importante tener en cuenta que el uso de este atributo es obsoleto en HTML5 y se recomienda en su lugar utilizar CSS para controlar el estilo y diseño de la lista.

  • id y class: estos atributos se utilizan para agregar identificadores y clases CSS a la lista de definición, lo que permite seleccionar y aplicar estilos a la lista utilizando CSS. Por ejemplo:

<dl id="mi-lista" class="lista-definicion">
  ...
</dl>

Lenguaje del código: HTML, XML (xml)
  • title: este atributo se utiliza para proporcionar un título o una descripción de la lista de definición. El texto del título se muestra cuando el usuario coloca el cursor sobre la lista. Por ejemplo:

<dl title="Una lista de definición de términos relacionados con HTML">
  ...
</dl>

Lenguaje del código: HTML, XML (xml)

Es importante tener en cuenta que estos atributos son opcionales y no necesarios para crear una lista de definición válida. La mayoría de las veces, la etiqueta <dl> se usa sin atributos.

Más ejemplos

Aquí te muestro tres ejemplos avanzados de cómo usar la etiqueta <dl> en HTML5:

Ejemplo 1

Lista de definición con múltiples términos y definiciones


<!DOCTYPE html>
<html>
  <head>
    <title>Lista de definición avanzada</title>
  </head>
  <body>
    <h1>Lista de definición avanzada</h1>
    <dl>
      <dt>HTML</dt>
      <dd>Lenguaje de marcado de hipertexto utilizado para crear páginas web.</dd>
      <dt>CSS</dt>
      <dd>Lenguaje de hojas de estilo utilizado para dar estilo y diseño a las páginas web.</dd>
      <dt>JavaScript</dt>
      <dd>Lenguaje de programación utilizado para crear interactividad y dinamismo en las páginas web.</dd>
      <dt>Bootstrap</dt>
      <dd>Framework de diseño web que incluye CSS y JavaScript predefinidos para crear sitios web con un estilo uniforme y coherente.</dd>
      <dt>jQuery</dt>
      <dd>Biblioteca de JavaScript que simplifica la manipulación de elementos HTML, eventos y animaciones en las páginas web.</dd>
    </dl>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, creamos una lista de definición que incluye cinco términos y sus definiciones correspondientes.

Cada término tiene una definición debajo de él, y se muestra de manera clara la relación entre el término y su definición.

Ejemplo 2

Lista de definición con anidamiento de elementos HTML


<!DOCTYPE html>
<html>
  <head>
    <title>Lista de definición avanzada con anidamiento</title>
  </head>
  <body>
    <h1>Lista de definición avanzada con anidamiento</h1>
    <dl>
      <dt>HTML</dt>
      <dd>
        <p>Lenguaje de marcado de hipertexto utilizado para crear páginas web.</p>
        <p>Para obtener más información, consulte <a href="https://developer.mozilla.org/es/docs/Web/HTML">la documentación de HTML</a>.</p>
      </dd>
      <dt>CSS</dt>
      <dd>
        <p>Lenguaje de hojas de estilo utilizado para dar estilo y diseño a las páginas web.</p>
        <p>Para obtener más información, consulte <a href="https://developer.mozilla.org/es/docs/Web/CSS">la documentación de CSS</a>.</p>
      </dd>
      <dt>JavaScript</dt>
      <dd>
        <p>Lenguaje de programación utilizado para crear interactividad y dinamismo en las páginas web.</p>
        <p>Para obtener más información, consulte <a href="https://developer.mozilla.org/es/docs/Web/JavaScript">la documentación de JavaScript</a>.</p>
      </dd>
    </dl>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, creamos una lista de definición similar al primer ejemplo, pero con la diferencia de que hemos anidado elementos HTML dentro de las etiquetas <dd>.

Cada definición incluye dos párrafos y un enlace a la documentación correspondiente. Esto demuestra cómo se pueden usar las etiquetas <dt> y <dd> para estructurar el contenido de una lista de definición de manera más avanzada.

Ejemplo 3

Lista de definición con atributos personalizados


<!DOCTYPE html>
<html>
  <head>
    <title>Lista de definición avanzada con atributos personalizados</title>
  </head>
  <body>
    <h1>Lista de definición avanzada con atributos personalizados</h1>
    <dl>
      <dt data-category="lenguaje">HTML</dt>
      <dd data-example="pagina-web">Lenguaje de marcado de hipertexto utilizado para crear páginas web.</dd>
      <dt data-category="lenguaje">CSS</dt>
      <dd data-example="diseno-web">Lenguaje de hojas de estilo utilizado para dar estilo y diseño a las páginas web.</dd>
      <dt data-category="lenguaje">JavaScript</dt>
      <dd data-example="interactividad-web">Lenguaje de programación utilizado para crear interactividad y dinamismo en las páginas web.</dd>
      <dt data-category="framework">Bootstrap</dt>
      <dd data-example="diseno-web">Framework de diseño web que incluye CSS y JavaScript predefinidos para crear sitios web con un estilo uniforme y coherente.</dd>
      <dt data-category="biblioteca">jQuery</dt>
      <dd data-example="manipulacion-elementos">Biblioteca de JavaScript que simplifica la manipulación de elementos HTML, eventos y animaciones en las páginas web.</dd>
    </dl>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos creado una lista de definición que incluye cinco términos y sus definiciones correspondientes, pero con la diferencia de que hemos agregado atributos personalizados a cada etiqueta <dt> y <dd>.

Los atributos personalizados se usan para agregar información adicional a cada término y definición, en este caso, para clasificar cada elemento en una categoría y para indicar un ejemplo de uso.

Es importante destacar que los atributos personalizados no son parte de la especificación oficial de HTML5, pero se pueden utilizar para agregar información adicional útil para los desarrolladores y los motores de búsqueda.

Curso de HTML Desde Cero

Inscríbete Ahora