Dominando Listas de Descrição em HTML: Guia Completo

Introdução

No HTML, existe uma tag especial chamada <dl> que é usada para definir uma lista de descrição (description list). Este tipo de lista é geralmente criado para explicar termos e suas definições, ou para dar uma breve explicação de um produto ou serviço. Neste laboratório, você aprenderá como usar a tag <dl> para criar sua própria lista de descrição em HTML.

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.

Configurar o arquivo HTML

Crie um novo arquivo HTML chamado index.html. Inclua a estrutura básica do HTML e um título para sua página.

<!doctype html>
<html>
  <head>
    <title>My Description List</title>
  </head>
  <body></body>
</html>

Criar uma lista de descrição usando a tag

Dentro do corpo do seu arquivo HTML, crie uma lista de descrição usando a tag <dl>. A tag <dl> deve ser combinada com a tag <dt>, que representa o termo a ser definido, e a tag <dd>, que representa a definição do termo.

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

Adicionar estilos à lista de descrição

Para deixar a lista de descrição com uma aparência melhor, adicione um pouco de estilo CSS a ela. Neste exemplo, removeremos as margens e o preenchimento (padding) definindo-os como zero e, em seguida, adicionaremos algum preenchimento à tag <dt> para destacá-la.

<style>
  dl {
    margin: 0;
    padding: 0;
  }
  dt {
    padding: 10px;
    font-weight: bold;
  }
</style>

Adicionar conteúdo à lista de descrição

Agora que você tem uma lista de descrição básica configurada, pode começar a adicionar seu próprio conteúdo a ela. Simplesmente adicione novos pares <dt> e <dd> à lista para cada termo e definição.

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language, a linguagem de marcação padrão usada para criar
    páginas web
  </dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets, uma linguagem usada para descrever a apresentação de
    um documento escrito em HTML
  </dd>
  <dt>JavaScript</dt>
  <dd>
    Uma linguagem de programação usada principalmente para desenvolver
    aplicações web
  </dd>
</dl>

Salve seu arquivo index.html e, em seguida, abra-o em um navegador web para visualizar sua nova lista de descrição.

Resumo

Neste laboratório, você aprendeu como usar a tag <dl> em HTML para criar uma lista de descrição com termos e definições. Ao usar as tags <dt> e <dd>, você foi capaz de definir seus termos e fornecer explicações para cada um. Você também aprendeu como adicionar um pouco de estilo CSS simples à sua lista de descrição para deixá-la com uma aparência melhor na página web.

Lista de Descrição em HTML