Terminamos o assunto das listas estudando as listas de definição. Veremos também a combinação de listas.

Listas de definição

Cada elemento é apresentado junto com sua definição. A definição principal é <dl> e </dl> (definition list). As etiquetas do elemento e sua definição são <dt> (difinition term) e <dd> (definition definition) respectivamente.

Aqui lhe propomos um código que poderá clarear este sistema:

<p>Dicionário da Língua Portuguesa</p>
<dl>
   <dt>Açougue</dt>
   <dd>Estabelecimento onde se vendem carnes frescas</dd>
   <dt>Colheita</dt>
<dd>Ato de colher os produtos agrícolas</dd>
</dl>

O efeito produzido:

Dicionário da Língua Portuguesa

Açougue

Estabelecimento onde se vendem carnes frescas

Colheita

Ato de colher os produtos agrícolas

Observe que em cada linha <dd> está deslocada da direção da esquerda. Este tipo de etiquetas é usado muitas vezes com o propósito de criar textos mais ou menos deslocados da direção da esquerda.

O código:

<dl>
<dd>Primeiro nível de deslocamento
   <dl>
    <dd>Segundo nível de deslocamento
   <dl>
    <dd>Terceiro nível de deslocamento
   </dl>
   </dl>
</dl>

O resultado:

Primeiro nível de deslocamento

Segundo nível de deslocamento

Terceiro nível de deslocamento

Combinando listas

Nada nos impede de utilizar todas estas etiquetas de forma combinada como vimos em outros casos. Dessa forma, podemos conseguir listas mistas como, por exemplo:

<p>Cidades do mundo</p>
<ul>
   <li>Brasil
    <ol>
    <li>Rio de Janeiro
    <li>Salvador
    </ol>
   <li>Espanha
   <ol>
    <li>Madrid
    <li>Barcelona
   </ol>
</ul>

Dessa forma criamos uma lista como esta:

Cidades do mundo

• Brasil
1. Rio de Janeiro
2. Salvador
• Espanha
1. Madrid
2. Barcelona