Falar em código semântico, tableless, css e como tudo isso se envolve com a W3C pode ser para alguns um grande quebra-cabeça. Na verdade é, mas com um pouco de vontade, teoria e paciência, esses itens podem se transformar numa verdadeira filosofia de trabalho e depois de um aprendizado bem realizado, tornar a produtividade do dia-a-dia um verdadeiro desafio estimulante.

Resumidamente, compreender a utilização correta dos elementos é um passo extremamente saudável para relembrarmos como tudo foi concebido originalmente para ser utilizado e tornar o trabalho simples e mais claro para todos.

O assunto pode ser um verdadeiro martírio para desenvolvedores, que por muitas vezes se auto absolvem da adequação aos padrões web, construindo aplicações e sites que poderiam ser mais leves, mais responsivos, fáceis de usar, e por conseqüência, mais fáceis de atualizar.

Um exemplo muito utilizado atualmente para mostrar como é possível construir mais simples são os menus para sites, sejam horizontais ou verticais, existe uma maneira muito limpa, verdadeiramente semântica e intuitiva para mecanismos de buscas como o Google.

Uma recomendação que faço para a construção de sites e aplicações é começar pela informação e não layout, pois iniciando seu projeto pela estrutura da informação, a possibilidade do projeto perder o foco é muito menor,além disso, como sabemos, hoje o conceito tableless permite a aplicação de layouts como uma camada sobre o seu código.

Falarei aqui sobre a criação de menus utilizando listas, e listas obviamente tem uma série de utilidades que devem ser tratadas de forma específica caso a caso, o que significa que se usada corretamente, torna seu código naturalmente semântico.

Compreendendo Listas

Para compreender listas é importante saber que existem várias opções de utilização para elas, como vemos abaixo:

1.Listas ordenadas

<ol>
	<li>Ricardo</li>
	<li>Felipe</li>
	<li>Manoela</li>
</ol>

O resultado para a lista acima é:

1. Ricardo

3. Manoela

Note que pelo fato de termos utilizado as tags corretas, os itens foram automaticamente ordenados e numerados (esse comportamento é padrão, podendo ser personalizado por CSS).

2. Listas não ordenadas

<ul>
	<li>Ricardo</li>
	<li>Felipe</li>
	<li>Manoela</li>
</ul>

O resultado agora é:

o Ricardo

o Manoela

Note que esse modelo não numera automaticamente os itens, mas por padrão os marca como itens de uma lista (também é comportamento padrão que pode ser alterado por css).

3. Listas de descrição

<dl>
	<dt>Livro</dt>
	<dd>Descrição do livro</dd>
</dl>

O resultado:

Livro

Utilizando listas para construir menus

Até aqui você já tomou conhecimento de como as listas funcionam dentro do código html, então não vai ter problemas para entender o código abaixo, pois na verdade o segredo estará no css que aplicaremos a lista.

O modelo vertical de menu:

<ul class="menu_vertical">
	<li><a href="#">Home</a></li>
	<li><a href="#">História</a></li>
	<li><a href="#">Filosofia</a></li>
	<li><a href="#">Produtos</a></li>
	<li><a href="#">Contato</a></li>
</ul>

Note que definimos em ul utilizará a classe menu_vertical, vamos ao código CSS que faz tudo acontecer como desejamos:

<style type="text/css">
ul.menu_vertical {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.menu_vertical li a{ 
	display: block;
	padding: 10px;
	color: #333;
	background: #eee;
	border-bottom: 1px solid #fff;
	text-decoration: none;
}
ul.menu_vertical li a:hover {
	background: #ccc;
}
</style>

Note que o código CSS é bem simples, mas tem parâmetros chaves importantíssimos que são em "ul" a redução de margin e padding para 0 (zero), pois essa tag tem por padrão valores positivos setados nela; o display: block na tag "a" permite que a área de clique seja maximizada para toda a área disponível dentro da tag li a qual ela está contida.

O resultado visual deste menu é o seguinte:

É importante lembrar que o menu terá automaticamente a largura máxima do seu objeto pai, porém é possível limitar sua largura a um valor específico setando o parâmetro width no CSS da tag ul.

O modelo horizontal de menu:

Este modelo utiliza praticamente o mesmo código, com pequenas modificações, veja:

<ul class="menu_horizontal">
	<li><a href="#">Home</a></li>
	<li><a href="#">História</a></li>
	<li><a href="#">Filosofia</a></li>
	<li><a href="#">Produtos</a></li>
	<li><a href="#">Contato</a></li>
</ul>

Só mudei o nome da classe, note que o html continua exatamente o mesmo. Vamos ao CSS:

ul.menu_horizontal {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.menu_horizontal li {display: inline;}
ul.menu_horizontal li a{ 
	float: left;
	display: block;
	padding: 10px;
	color: #333;
	background: #eee;
	text-decoration: none;
}
ul.menu_horizontal li a:hover {
	background: #ccc;
}

O resultado final:

Observe que é ai que entra o conceito moderno de personalização de layouts através de tableless, pois o html não foi alterado, apenas sua classe, e o código CSS foi o responsável pela mudança da aparência, deixando claro um conceito de camadas, cada uma com sua respectiva função.

As alterações no CSS que permitiram ao mesmo menu ter a aparência horizontal foi que na tag "li" aplicamos display: inline, pois assim ele deixa de ser nativamente um elemento de bloco e passa a ser um elemento de linha, não criando mais quebras de linha antes e depois dele mesmo (padrão a todo elemento de bloco), em seguida determinamos para "a" float: left, o que significa que as tags "a" estarão posicionados lado a lado, a partir da esquerda para a direita.

Os trechos CSS apresentados acima podem ser personalizados eternamente a gosto e necessidade da sua aplicação. Não se esqueça que o CSS dá a você o controle sobre a aparência da sua página ou aplicação.

O importante no conceito tableless é escrever simples, sem complicação, sem redundância e sempre, mas sempre que possível procure rever seu código a busca de limpeza e redução de conteúdo desnecessário.

Para saber mais as incríveis variações de CSS que se pode fazer com listas, você não pode deixar de visitar este site: Listamatic (http://css.maxdesign.com.au/listamatic/).

Seja simples, faça um trabalho limpo e torne-se mais produtivo, antes que seus concorrentes o façam.

Até a próxima!