Semântica de listagens

A melhor maneira de saber qual tag deve ser usada em uma situação, é definindo o tipo de informação que você quer inserir. Sempre faça a seguinte pergunta para você mesmo: qual é a característica dessa informação? Depois de respondida esta pergunta básica, você possuiu um leque de tags disponíveis para inserir no seu documento XHTML. Você deve escolher exatamente aquela que se enquadra no tipo de informação que você quer exibir. Se for um endereço, uma listagem, uma tabela de campeonato de futebol, uma receita de bolo etc.

Para a utilização de listagens, o processo é o mesmo: qual é a característica de listagem que você quer inserir? A W3C possuiu três tipos semânticos básicos de listas:

 

  1. Lista Ordenada (ordered list) – <ol>
  2. Lista Sem Ordem (unordered list) – <ul>
  3. Lista de Definições (definition list) – <dl>

 

Lista Ordenada (ordered list) – <ol>

A função desta lista é simples: sempre que você precisar utilizar uma lista de itens em ordem, como por exemplo, ordem de chegada, ordem de classificação em um concurso público, ordem de um índice de livros e assim por diante.

A maneira correta de escrever esta lista é assim:


<ol>

      <li>Exemplo</li>
      <li>Exemplo</li>

      <li>Exemplo</li>
      <li>Exemplo</li>
</ol>

Isto resultaria nisto:

 

  1. Exemplo
  2. Exemplo
  3. Exemplo
  4. Exemplo

 

Por padrão, todas as listas (na verdade todas as tags) possuem características padrões como margens, paddings, tamanhos etc. Elas também possuem variações de browsers para browser. Você pode corrigir estas diferenças por CSS, controlando sempre as margens, paddings (enchimento), tamanhos da fonte etc. As listas possuem o list-style-type (tipo de estilos de lista) que podem ser controladas por CSS da seguinte maneira:


list-style-type: atributo

A lista ordenada possuiu por padrão uma listagem numérica em ordem crescente. Conceitualmente você utiliza este tipo de lista, para exibir uma listagem em ordem. Se você quer trocar o tipo de estilo da lista, como por exemplo, numeração por algarismos romanos, ordem alfabética, círculos, maiúsculas, minúsculas etc, você pode alterar tudo por CSS.

Veja alguns exemplos:

 

  • list-style-type: lower-alpha; (a, b, c, d, e etc)
  • list-style-type: upper-roman ; (I, II, III, IV, V, etc.)
  • list-style-type: decimal-leading-zero ; (01, 02, 03, etc.)
  • list-style-type: none (nenhum estilos de lista aparece)

 

Lista Sem Ordem (unordered list) – <ul>

 

O significado desta lista é simplesmente exibir uma listagem que não necessariamente possua uma ordem específica, como por exemplo, uma lista de itens que você não pode esquecer de levar para sua viagem, lista de materiais escolares ou de CDs que você quer adquirir etc. Lembre-se, que o critério para o uso deste tipo de listagem é não ter uma ordem específica.

Ela se escreve da seguinte maneira:


<ul>
      <li>Exemplo</li>
      <li>Exemplo</li>
      <li>Exemplo</li>
      <li>Exemplo</li>
</ul>

Isto, resultaria nisto:

 

  • Exemplo
  • Exemplo
  • Exemplo
  • Exemplo

 

Todos estes três tipos de listas que estou descrevendo aqui, podem ser alteradas por CSS, usando o list-style-type. Basta você escolher qual tipo de estilo de lista você quer usar (ou se nenhum estilo use o atributo "none") e aplicar por CSS.

 

Lista de Definições (definition list) – <dl>

 

Dos três tipos de listas propostos pela W3C, esta é menos utilizada, talvez por ser mal compreendida. O conceito desta listagem é exibir uma lista de itens e suas respectivas definições. Ela se diferencia das outras listagens por possuir duas partes distintas. O termo a ser definido ou descrito – <dt> – e a definição ou descrição propriamente dita – <dd>. Você pode utilizar este tipo de lista, por exemplo, em um glossário de termos técnicos com a definição do significado das palavras mais incomuns, ou ainda, exibir uma lista de atributos de CSS ou tags XHTML e seus respectivos significados, e assim por diante.

Essa lista de definições se escreve da seguinte maneira:


<dl>
   <dt>Sem&acirc;ntica</dt>
   <dd>Estudo das mudan&ccedil;as ou transla&ccedil;&otilde;es sofridas, no tempo e no espa&ccedil;o, pela significa&ccedil;&atilde;o das palavras; semasiologia, sematologia, semi&oacute;tica.</dd>


   <dt>Semi&oacute;tica</dt>
   <dd>Denomina&ccedil;&atilde;o utilizada, principalmente pelos autores norte-americanos, para a ci&ecirc;ncia geral do signo; semiologia.</dd>


   <dt>Signo</dt>
   <dd>Todo objeto, forma ou fen&ocirc;meno que representa algo distinto de si mesmo: a cruz significando &quot;cristianismo&quot;; a cor vermelha significando &quot;pare&quot; (c&oacute;digo de tr&acirc;nsito); uma pegada indicando a 'passagem' de algu&eacute;m; as palavras designando 'coisas (ou classe de coisas)' do mundo real; etc.</dd>
</dl>

O que resultaria nisso:

Semântica
Estudo das mudanças ou translações sofridas, no tempo e no espaço, pela significação das palavras; semasiologia, sematologia, semiótica.
Semiótica
Denominação utilizada, principalmente pelos autores norte-americanos, para a ciência geral do signo; semiologia.
Signo
Todo objeto, forma ou fenômeno que representa algo distinto de si mesmo: a cruz significando "cristianismo"; a cor vermelha significando "pare" (código de trânsito); uma pegada indicando a ‘passagem’ de alguém; as palavras designando ‘coisas (ou classe de coisas)’ do mundo real; etc.

 

Se você não conseguir ver certos estilos descritos aqui, tente ver esta página sem a folha de estilos padrão, pelo Mozilla, por exemplo. A melhor forma de saber qual tag você deve usar, seja ela uma lista ou não, começa definindo a característica da informação que você quer exibir. Feito isto, fica mais fácil encontrar qual é a tag semanticamente correta a ser utilizada.

Com esta série de artigos, estou pretendendo escrever sobre todas as tags XHTML. Claro que até que eu chegue ao fim, levará um bom tempo. Se você tem preferência por alguma em específico, poste aqui quais as tags (ou assuntos) você acha que merece ocupar os próximos posts.

 

Para se aprofundar mais, nada melhor do que ir na fonte.

  • Diogo Chaves

    Muito boa explicação, foi a explicação mais simples que encontrei das listas 'dl,dt', agora até eu entendi :p

    Uma 'tag' que tenho dúvida é: : ajuda em alguma coisa nos mecanismos de busca? Ou serve apenas para deixar o código semânticamente correto? Devemos usar só quando exibir um endereço físico ou um "address" de algum outro site também?

    Assim que você puder abordar sobre este assunto ficarei agradecido, valeu :)

  • Oreste

    Aeeeee!

    muito bom, valeu! agora eu sei sobre dl, dt

  • Pingback: Para que servem as estruturas aninhadas? » Revolução()

  • Pingback: Microformats » Revolução()

  • Pingback: Microformats: XOXO » Revolução()