menos div, mais semântica (mas pode ser: a semântica da caixinha…)

Janeiro 27th, 2007

Observe a caixinha que segue e que tem o seguinte código:

Bem, vamos melhorar um pouco a semântica da caixinha fazendo apenas uma pequena modificação no código que você pode conferir aqui e que provocou o seguinte resultado:

A modificação é o seguinte: ao invés de usar div para fazer o título eu usei h2. Isso mesmo, h2 porque esportes é o título da minha caixinha. Dependendo do conteúdo do site que estiver fazendo, use h3, h4, etc. Você precisa saber decidir isso baseado no conteúdo do seu trabalho.

Observe que, como troquei div por h2, uma margem natural dos elementos em nível de bloco (são elementos que podem conter outros elementos em nível de bloco e elementos em nível de linha) foi acrescentada e gerou o resultado acima.

Para corrigir isso, basta, no css, voce inserir a seguinte regra:

margin:0;

Essa regra remove qualquer margem de h2 resolve a situação como você pode conferir aqui.

O que eu quis mostrar com esse exemplo é que em uma situação onde você vai usar muitas caixinhas semelhantes a essa, ou seja, um título e um texto logo abaixo, além de chamar a atenção dos buscadores para os seus títulos você está reduzindo a quantidade de divs usadas para o layout. Isso evita (como diz o Zeldman) a divite que é uma espécie de doença que acomete quem está migrando para os padrões da web.

Geralmente descobrimos a div e ela passa, na nossa cabeça, a ser uma substituta natural para as coisas que fazíamos (aliás nem fazíamos, quem fazia era o nosso editor WYSIWYG) com as tabelas.

Use a abuse dessa idéia se você está trabalhando no layout de um portal, um jornal, uma revista ou seja lá o que for que possua muitas seções como: música, esporte, lazer, horóscopo, finanças e etc.

Pois é, para caprichar mais um pouco, use o atributo title nos seus títulos e atraia mais ainda a atenção dos buscadores.

Categoria(s): XHTML, CSS