Exemplo da Tag de Descrição de Dados HTML

Introdução

O HTML fornece um conjunto de tags que permite criar listas de definições, onde você pode definir uma lista de termos e fornecer uma descrição para cada um deles. Uma das tags usadas nessas listas é a tag <dd> (data description), que é usada para fornecer uma descrição do termo, representado usando a tag <dt>. Neste laboratório, você aprenderá como usar a tag <dd>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criando uma Lista de Definições

O primeiro passo é criar uma lista de definições com a tag <dl>. Dentro desta tag, você terá que definir um ou mais termos com a tag <dt>. Por exemplo, crie uma lista de definições com dois termos: "HTML" e "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 a Tag

Agora que você definiu alguns termos usando a tag <dt>, você pode fornecer uma descrição de cada termo usando a tag <dd>. Adicione as descrições de cada termo conforme mostrado abaixo:

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML significa Hyper Text Markup Language (Linguagem de Marcação de
        Hipertexto). É usado para criar e estruturar conteúdo na web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). É
        usado para estilizar elementos HTML e tornar as páginas web visualmente
        atraentes.
      </dd>
    </dl>
  </body>
</html>

Estilizando a Lista de Definições

Por padrão, a tag <dd> será exibida como um bloco e indentada, tornando mais fácil distinguir entre termos e descrições. No entanto, você também pode ajustar seu estilo usando CSS. Adicione os seguintes estilos ao seu código HTML para modificar a aparência da sua lista de definições:

<!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 stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

Usando a Tag dentro da Tag

Você também pode adicionar uma imagem à descrição do termo usando a tag <img>. Por exemplo, vamos adicionar uma imagem do logotipo HTML à descrição 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 stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

Resumo

A tag <dd> é usada para fornecer a descrição de um termo, definido usando a tag <dt>, dentro de uma lista de definições. Por padrão, ela é exibida como um bloco e indentada, tornando-a mais fácil de ler. Você pode ajustar seu estilo usando CSS e até mesmo adicionar uma imagem a ela usando a tag <img>.

Valor da Descrição HTML