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

2. Felipe

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 Felipe

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

Descrição do 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!