Listas de Definição

Olá galera. Bom dia, boa tarde, boa noite (boa madrugada).
Para o fim dos designs com tabelas sem estilização e acessibilidade, uma luta por páginas mais leves e dentro dos padrões W3C, onde a manutenção do código fonte da página fica mais fácil e agradável.



Vou mostrar a vocês hoje um tipo de lista (XHTML) que está sendo muito utilizada em grandes portais. Uma técnica em CSS/XHTML que irá diminuir e muito a utilização de tables para conteúdo não tabular.

Listas de Definição

Constituídas por uma série de pares termo/definição. Vamos entender melhor a marcação das listas de definição:

•     um container <code>&lt;dl&gt;</code>;
•     um termo de definição <code>&lt;dt&gt;</code>;
•     uma descrição <code>&lt;dd&gt;</code>.

Cada grupo de informação que se repete na lista é marcado com um eletemento <dt>, definindo o termo da lista e um ou mais elementos <dd> para as definições do termo, como segue o exemplo:

<pre><code>
    <dl>
        <dt>Baixo Custo</dt>
            <dd>Significa reduçAo de preço em relação ao modelo anterior</dd>
        <dt>Fácil de Usar</dt>
            <dd>Painel automático com dicas de operação</dd>
        <dt>Segurança</dt>
            <dd>Proteção contra choque elétrico</dd>
            <dd>Revestido com material inflamável</dd>
    </dl>
</code></pre>

Texto abaixo foi retirado do Blog do Maujor

Em que situações é apropriado usar listas de definição?
Existem duas opiniões sobre o uso de listas de definição. Alguns acreditam que elas devem ser usadas estritamente para marcar termos e definições. Outros acreditam que podem ser usadas para fazer corresponder entre si, quaisquer itens que tenham um relacionamento direto uns com os outros (conjuntos de nomes/valores).

Quais são as desvantagens do uso de listas de definição?
Antes de usar uma lista de definição, esteja ciente de que nem sempre esta é a melhor opção. Se o conteúdo em um <dt> não pode ser marcado como cabeçalho, a ele não será dada a importância própria de cabeçalhos dentro da hierarquia do documento. Assim, o Google e outros mecanismos de indexação não consideram as listas de definição com o mesmo peso dos conteúdos dos cabeçalhos.

Embora listas de definição possam ser estilizadas para se parecer com tabelas de dados, elas não dispõem de funcionalidades para leitores de tela tais como "labels" e "headers" para grupar informações e consequentemente incrementar a acessibilidade.

Listas como calendário de eventos

23 de Março
    Automóveis antigos
    07:00 horas
    Uma exposição de automóveis antigos, com modelos desde a década de 20. Venha com toda a família. Infra-estrutura para crianças e bebês.
13 de Junho
    Festival da laranja
    12:00 horas
    Laranjas de produtores de todo o estado. Diversos tipos de sucos e doces de laranja. Renda em favor do asilo São Judas.

    HTML

    <dl class="evento">
        <dt>23 de Março</dt>
            <dd>Automóveis antigos</dd>
            <dd>07:00 horas</dd>
            <dd>Uma exposição de automóveis antigos, com modelos desde a década de 20. Venha com toda a família. Infra-estrutura para crianças e bebês.</dd>
        <dt>13 de Junho</dt>
            <dd>Festival da laranja</dd>
            <dd>12:00 horas</dd>
            <dd>Laranjas de produtores de todo o estado. Diversos tipos de sucos e doces de laranja. Renda em favor do asilo São Judas.</dd>
    </dl>

    CSS

    dl.evento {
        margin: 2em 0;
        padding: 0;
        font-family: georgia, times, serif;
    }

    .evento dt {
        position: relative;
        left: 0;
        top: 1.8em;
        width: 8em;
        font-weight: bold;
    }

    .evento dd {
        border-left: 1px solid #000;
        margin: 0 0 0 10em;
        padding: 0 0 .5em .5em;
    }

Até a próxima dica...