Ricardo Delgado

Muitos glossários na Internet são feitos usando, principalmente, uma combinação dos elementos <p> (parágrafo) e <strong> (negrito) – como se fossem “texto normal”.

Por exemplo:

<p><strong>Termo</strong></p>
<p>1. Sentido do termo aqui</p>
<p>2. Outro sentido</p>

Algo que teria o seguinte resultado:

Às vezes também usam os elementos <ul> (lista não ordenada) e <ol> (lista ordenada), por exemplo:

<ul>
      <li>
            <strong>Termo</strong>
            <ol>
                  <li>Sentido do termo</li>
                  <li>Outro sentido</li>
            </ol>
      </li>
</ul>

Que teria o resultado:

Como devia ser Feito

A verdade é que existe um padrão de XHTML para criar listas de termos e as suas definições.

Esse elemento é o <dl> i.e. “Definition List” ou “Lista de Definições / Sentidos” em Português.

As partes dele são:

Aqui segue um exemplo
(O texto em verde entre <!-- e --> é um comentário para esclarecer o código):

<dl>
   <di> <!-- Este elemento é opcional.-->
       <dt>Autor</dt>
       <dd>Alguém que escreve livros</dd>
       <dd>Alguém que escreve artigos</dd>
           <!-- é possível usar zero ou mais do elemento <dd> dentro
           do elemento <di> e seguindo o elemento <dt> -->
   </di>
   <di>
       <dt>C#</dt>
       <dt>C Sharp</dt>
           <!-- é possível usar mais que um <dt> dentro do elemento
           <di> mas tem que haver pelo menos uma ocorrência dele -->
       <dd>Um língua de programação</dd>
       <dd>Alternativa maneira de escrever C#</dd>
   </di>
   <di> 
       <dt>Programador</dt>
       <dd>Alguém que escreve programas / software</dd>
   </di>
   <di>
       <dt>Web Designer</dt>
       <dd>Uma pessoa que faz design de web sites - 
            não necessariamente um programador de web sites.</dd>
   </di>
</dl>

E o resultado?

Utilizar Estilos

O formato do exemplo em cima usou (em parte) o seguinte estilo de CSS.

dt {
	font-weight:bold;
	padding-left:10px;
}

dd {
	padding-left:25px;
	background:url('a-sua-imagem-aqui.png') no-repeat left top;
}

Claro que você é capaz de criar estilos muito melhores que esse .

Links Externos

Se quiser ler o documento oficial sobre este padrão, pode encontrá-lo (em Inglês) no site do W3C.

Se pretende ler esse artigo, sugiro também aprender um bocado sobre DTD (Definição do Tipo de Documento). Algo que facilitará entender os símbolos usados nessa página .

Informação sobre DTD pode ser encontrada no site do W3Schools aqui.