Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Semântica, em um modo geral, se refere ao significado das palavras, mas na Web, quando falamos em semântica, estamos nos referindo ao significado das etiquetas com que estamos marcando o nosso código, ou seja, XHTML é uma linguagem de marcação estrutural, cada elemento tem uma relação e um significado dentro do nosso documento.

Mas voltando as listas, em XHTML 1.0 (e 1.1), existem 3 tipos de listas:desordenadas, ordenadas e de definição, além disso, existem outras etiquetas que servem para indicar o uso dessas listas:

Etiqueta <li>

É uma etiqueta comum em listas desordenadas e ordenadas, e não pode ser usada em listas de definição, sua função é marcar um elemento de uma lista (por isso a definição: list item). Veja um exemplo:

<li>ASW</li>
<li>Acerbis</li>
<li>Smith</li>
<li>Wirtz</li>
<li>One</li>

Como podem ver, nosso exemplo não está completo, é agora que definimos se nossa lista é ordenada ou desordenada

Listas Desordenadas

As listas desordenadas (unordered lists) são aquelas que a ordem de seus elementos não é relevante, por exemplo, se não existe nenhum critério pré-determinado, pode ser usado uma lista desordenada no exemplo anterior, que se referem a marcas de produtos de motocross. A etiqueta a se usar é <ul>. Exemplo:

<ul>
  <li>ASW</li>
  <li>Acerbis</li>
  <li>Smith</li>
  <li>Wirtz</li>
  <li>One</li>
</ul>

Listas Ordenadas

As listas ordenadas (ordened lists) são aquelas onde há importância na ordem dos elementos, são aquelas listas que classicamente aparecem numeradas, mas mediante CSS é possível controlar a apresentação desses elementos para que ao invés de números apareçam números romanos, letras gregas, etc.

O critério para decidir se uma lista é ordenada ou desordenada depende em última instância de quem está escrevendo o código, por exemplo, na lista anterior, eu só listei algumas marcas referentes a Motocross. Mas vamos tomar agora como exemplo uma lista onde a ordem dos elementos tem importância:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

O resultado você pode ver nesse exemplo.

Listas de definição

As listas de definição tem uma estrutura distinta das listas ordenadas e desordenadas, pois neste caso fazemos o uso de 3 etiquetas: <dl>, <dt> e <dd>, onde temos a lista de definição (definition list), termo a definir (definition term) e a descrição da definição (definition description) respectivamente. Para uma melhor compeensão, veja abaixo um exemplo:

<dl>
 <dt>http://parlenda.blogspot.com</dt>
   <dd>Conteúdo variado sobre tecnologia, segurança, redes e sistemas operacionais</dd>
 <dt>http://blog.joaovagner.com.br</dt>
   <dd>Design, tecnologia da informação, programação e linux</dd>
<dt>http://www.brunoalves.eti.br</dt>
   <dd>Tecnologia em geral, com foco em Linux, Software Livre, Blogs, Wordpress e servidores</dd>
</dl>

Um exemplo em funcionamento você pode ver a seguir.