Ejemplo de etiqueta de descripción de datos de HTML

Introducción

HTML proporciona un conjunto de etiquetas que te permite crear listas de definiciones, donde puedes definir una lista de términos y proporcionar una descripción para cada uno de ellos. Una de las etiquetas utilizadas en estas listas es la etiqueta <dd> (descripción de datos) que se utiliza para proporcionar una descripción del término, representado utilizando la etiqueta <dt>. En este laboratorio, aprenderás a utilizar la etiqueta <dd>.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Creando una lista de definiciones

El primer paso es crear una lista de definiciones con la etiqueta <dl>. Dentro de esta etiqueta, tendrás que definir uno o más términos con la etiqueta <dt>. Por ejemplo, crea una lista de definiciones con dos términos: "HTML" y "CSS".

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>Description of HTML</dd>
      <dt>CSS</dt>
      <dd>Description of CSS</dd>
    </dl>
  </body>
</html>

Usando la etiqueta

Ahora que has definido algunos términos usando la etiqueta <dt>, puedes proporcionar una descripción de cada término usando la etiqueta <dd>. Agrega las descripciones de cada término como se muestra a continuación:

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML significa Hyper Text Markup Language. Se utiliza para crear y
        estructurar el contenido en la web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS significa Cascading Style Sheets. Se utiliza para dar estilo a los
        elementos HTML y hacer que las páginas web se vean visualmente
        atractivas.
      </dd>
    </dl>
  </body>
</html>

Dar estilo a la lista de definiciones

Por defecto, la etiqueta <dd> se mostrará como un bloque y con sangría, lo que la hace más fácil de distinguir entre los términos y las descripciones. Sin embargo, también puedes ajustar su estilo utilizando CSS. Agrega los siguientes estilos a tu código HTML para modificar la apariencia de tu lista de definiciones:

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML significa Hyper Text Markup Language. Se utiliza para crear y
        estructurar el contenido en la web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS significa Cascading Style Sheets. Se utiliza para dar estilo a los
        elementos HTML y hacer que las páginas web se vean visualmente
        atractivas.
      </dd>
    </dl>
  </body>
</html>

Usando la etiqueta dentro de la etiqueta

También puedes agregar una imagen a la descripción del término usando la etiqueta <img>. Por ejemplo, agreguemos una imagen del logo de HTML a la descripción de HTML:

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        <img
          src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"
          alt="HTML5 Logo"
        />
        HTML significa Hyper Text Markup Language. Se utiliza para crear y
        estructurar el contenido en la web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS significa Cascading Style Sheets. Se utiliza para dar estilo a los
        elementos HTML y hacer que las páginas web se vean visualmente
        atractivas.
      </dd>
    </dl>
  </body>
</html>

Resumen

La etiqueta <dd> se utiliza para proporcionar la descripción de un término, definido usando la etiqueta <dt>, dentro de una lista de definiciones. Por defecto, se muestra como un bloque y con sangría, lo que la hace más fácil de leer. Puedes ajustar su estilo utilizando CSS e incluso agregar una imagen a ella usando la etiqueta <img>.

Valor de descripción de HTML