Vamos falar um pouco de listas em xHTML. No mundo do html existem três tipos de listas: ordenadas, desordenadas e definição. Devemos usar cada uma com base em seus fundamentos. É assim que implantamos a semântica no html, não se preocupe se a lista aparece estrana no seu layout, o CSS é seu amigo e vai reestruturar a lista como você desejar. Também não se preocupe com os itens que aparecem antes de cada item, eles também podem ser trocados via CSS.
Os tipos diferentes de listas que podemos ter em HTML
Para realizarmos estas listas usamos as tags OL, UL, LI, DL, DT e DL.
Desmistificando…
As listas desordenadas são utilizadas quando ela não deve ser utilizada na sequência em que foi passada, sendo assim podemos efetuar as ações de uma determinada lista em qualquer ordem que ela continuará fazendo sentido. Para esta lista, usamos a tag UL, que em inglês, é o resumo de “Unordened List“. Sendo assim, para cada item da lista usamos a tag LI, que seria o resumo de “List Item” em inglês.
Um código de exemplo, mantendo o que estou falando é:
<ul> <li>Catar as roupas</li> <li>Varrer o chão</li> <li>Cozinhar o almoço</li> </ul>
O mesmo ocorre com as listas ordenadas, a diferença é que elas devem ser executadas ou lidas nessa determinada ordem, senão o sentido da lista pode mudar completamente, ficando inintendível. Um belo exemplo de lista ordenada é quando nos deparamos com o índice de um livro: que tem uma ordem a ser seguida.
Para este tipo de lista usa-se a tag OL que é uma abreviação para “Ordened List” em inglês. E para cada item, assim como em listas desordenadas, usa-se “List Item“, ou seja, LI.
<ol> <lt>Tire as penas da galinha</li> <li>Coloque-a na panela fervendo</li> <li>Adicione água até cobrir ela por inteiro</li> <li>Cozinhe por 30 minutos</li> </ol>
Estas duas são as listas mais comuns no nosso dia-a-dia, mas ainda temos as listas de definição. As listas de definição são separadas para escrever itens com seus respectivos detalhes. A lista de definição mais comum que encontramos hoje é o dicionário, mas podemos nos aproveitar dessa lista de diversas formas. É muito interessante quando quisermos descrever uma série de itens, como os cômodos de uma casa ou vários itens de uma loja virtual.
Para uma lista de definição, usamos a tag DL, ou seja, “Definition List” e para cada item a tag DT que em inglês, é uma abreviação para “Definition Term“. Para os detalhes desse termo, a tag DD é quem se encarrega dessa tarefa, ela significa “Definition Description“.
<dl> <dt>Lista</dt> <dd>relação ordenada de nomes ou de quaisquer objectos que tenham de ser inventariados</dd> <dt>Música</dt> <dd>arte e ciência de combinar harmoniosamente os sons</dd> </dl>
Algumas notas: Podemos ter mais de uma descrição para um mesmo termos, assim como dois ou mais termos podem ter a mesma descrição. Você pode fazer os agrupamentos como desejar, logo pode colocar dois ou mais DDs em sequência, assim como dois ou mais DTs em sequência. Outra forma de uso, menos comum, é o log de um chat, onde o termo é o nick do usuário e sua descrição são as mensagens enviadas por ele.
<dl> <dt>Centro</dt> <dt>Meio</dt> <dd>ponto que se encontra a igual distância de todos os pontos da circunferência ou da superfície da esfera;</dd> <dd>ponto que divide ao meio as rectas que, por sua vez, dividem a figura geométrica em duas partes iguais;</dd> <dd>o meio de qualquer espaço;</dd> </dl>
nly-child.