Para agrupar vários termos e descrições, coloque um ou mais elementos dt antes de um ou mais elementos dd dentro de um dl. Este guia mostra como escolher o agrupamento adequado, criar um pequeno glossário no TextEdit em um Mac e verificar se as relações permanecem claras.

Como uma lista de descrições HTML agrupa termos?

Uma lista de descrições representa associações entre nomes e valores. Cada grupo contém pelo menos um termo e pelo menos uma descrição, com todos os termos aparecendo antes das descrições. O termo seguinte após uma descrição inicia outro grupo. Essas relações vêm da ordem do documento. Padrão HTML: o elemento dl

Em um glossário, um termo pode ser uma palavra de diagramação, e sua descrição pode explicar essa palavra. Vários termos consecutivos podem compartilhar uma descrição. Não é necessário repetir a mesma explicação após cada nome alternativo. MDN: Elemento de termo de descrição

A questão prática é determinar o que pertence ao mesmo grupo. Antes de escrever a marcação, anote cada associação pretendida em linguagem comum. Neste exemplo sintético, “Espaço” e “Calha” compartilham uma explicação, enquanto “Bloco” tem dois significados alternativos.

Relação pretendida Estrutura dentro de um grupo
Um termo com uma descrição Um dt, seguido por um dd
Vários termos que compartilham uma descrição Todos os elementos dt, seguidos por um dd
Um termo com descrições alternativas Um dt, seguido por vários elementos dd
Vários termos que compartilham descrições alternativas Todos os elementos dt, seguidos por todos os elementos dd
Uma descrição com vários parágrafos Um dd contendo os parágrafos

Esses padrões seguem as regras de agrupamento do padrão. Em particular, descrições separadas representam valores alternativos; parágrafos que pertencem a um mesmo valor permanecem dentro do mesmo dd. Padrão HTML: semântica de listas de descrições

Quais descrições devem compartilhar um grupo?

Use este critério: todas as descrições do grupo proposto podem ser aplicadas razoavelmente a todos os termos desse grupo? Se a resposta for não, divida o conteúdo em grupos separados. Essa é uma verificação editorial baseada no modelo de associação e ajuda a detectar combinações acidentais antes de elas chegarem à página.

Vários termos com uma descrição compartilhada

Este trecho dá a dois termos sintéticos de glossário uma explicação compartilhada. Ambos os termos aparecem antes da descrição, de acordo com o padrão documentado pela MDN para vários termos. MDN: Vários termos, uma única descrição

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

Não interprete isso como duas entradas separadas cujas descrições simplesmente estão faltando. O exemplo trata deliberadamente os dois nomes como um único grupo. Se o seu glossário atribuir significados diferentes a eles, dê a cada nome sua própria descrição.

Um termo com descrições alternativas

Uma descrição pode vir após outra descrição dentro do mesmo grupo. Aqui, o glossário inventado usa “Bloco” para dois conceitos diferentes. MDN: Elemento de detalhes da descrição

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

Para vários nomes que compartilham essas mesmas alternativas, coloque os termos adicionais antes da primeira descrição. Evite presumir que o primeiro termo se relaciona apenas com a primeira descrição e o segundo termo apenas com a segunda: isso exigiria grupos separados. A MDN documenta explicitamente a combinação de vários termos e descrições. MDN: Vários termos e descrições

Uma descrição com vários parágrafos

Se o segundo parágrafo desenvolve a primeira explicação, mantenha ambos dentro de um único dd. Um dd aceita conteúdo de fluxo, incluindo parágrafos. Isso preserva uma única descrição e permite uma estrutura interna legível. MDN: Resumo técnico do elemento de detalhes da descrição

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

Crie um exemplo completo no TextEdit do seu Mac

Comece com um arquivo novo para examinar o resultado sem alterar um documento existente. No TextEdit, escolha Arquivo > Novo e, em seguida, Formato > Converter em Texto Simples. A Apple documenta esse procedimento como ponto de partida para criar um arquivo HTML. Apple: Trabalhar com documentos HTML no TextEdit do Mac

Cole o documento completo abaixo. Ele combina as três decisões acima em um pequeno glossário. Cada grupo tem seu próprio elemento de contêiner div, uma estrutura compatível para aplicar estilos ou atributos a um grupo inteiro. MDN: Agrupar conjuntos de nome e valor

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

Escolha Arquivo > Salvar, dê ao arquivo o nome layout-glossary.html e clique em Salvar. Se o TextEdit perguntar qual extensão usar, escolha Usar .html. Estas são as etapas de salvamento documentadas pela Apple para um arquivo HTML escrito à mão. Apple: Criar um arquivo HTML

Abra o arquivo salvo no navegador. Compare o texto exibido com três associações esperadas: “Espaço” e “Calha” compartilham uma explicação; “Bloco” tem duas descrições; “Tela” tem uma descrição com dois parágrafos. Use essa comparação para verificar as relações pretendidas entre os conteúdos, mesmo que o espaçamento padrão do navegador seja diferente do design desejado.

Mantenha o agrupamento intacto ao editar

O HTML permite grupos de termos e descrições diretamente dentro de dl ou grupos envoltos em elementos div. Escolha uma estrutura para usar em toda a lista. Na versão envolta acima, mantenha os termos e as descrições de cada grupo diretamente dentro do respectivo contêiner; não envolva termos e descrições em contêineres separados. Padrão HTML: modelo de conteúdo de listas de descrições

Ao revisar o exemplo, use esta breve verificação:

  1. Encontre o grupo que pretende alterar.
  2. Mantenha todo o conjunto de termos antes das descrições.
  3. Decida se o novo texto explicativo é outro valor ou outro parágrafo do valor atual.
  4. Ao introduzir um termo sem relação com os demais, adicione um novo grupo completo.
  5. Salve o documento e recarregue a prévia no navegador.

Por exemplo, adicionar “Painel” entre as duas descrições de “Bloco” interromperia a relação pretendida: a descrição seguinte pertenceria ao grupo recém-iniciado. Coloque o novo termo e sua descrição em um contêiner próprio. Isso segue a regra do padrão segundo a qual um termo encontrado após uma descrição inicia outro grupo. Padrão HTML: algoritmo de agrupamento

Se o TextEdit reabrir o arquivo como texto formatado, use Arquivo > Abrir, selecione o documento, clique em Mostrar Opções e selecione Ignorar comandos de texto rico antes de abri-lo. Para arquivos futuros, selecione Exibir arquivos HTML como código HTML, em vez de texto formatado em TextEdit > Ajustes > Abrir e Salvar. Apple: Ver um documento HTML como código

Concentre a revisão final no significado: identifique os termos, identifique as descrições compartilhadas e confirme que as quebras de parágrafo não se tornam valores separados por acidente. Quando essas associações estiverem corretas, o glossário estará pronto para receber os estilos de apresentação necessários ao documento.

Fontes