Assinar
Semântica no HTML - Abolição da Escravatura
Um problema social no mundo das linguagens pra internet que anda ocorrendo com frequência é a escravização do HTML, mesmo já idoso e com seus anos de experiência. Dá até tema de novela, o irmão que nasceu pra completar o HTML acabou por escravizá-lo: O CSS.
Brincadeiras à parte, isso acabou se tornando mesmo uma realidade. Utilizamos o CSS para duramente escravizar o HTML, alguns exemplos com os quais você pode se identificar:
- O cliente afirma “Quero um site com a lista de links e o campo de busca na coluna da direita” e você prontamente ajeita o chicote do seu CSS e cria um div no HTML chamado “coluna-direita” com tudo que ele quer dentro.
- A direção da empresa mudou e decidem que agora a lista de links fica no rodapé. Rapidamente você pega e coloca o HTML no tronco, criando um div chamado “rodape” e movendo o código do “coluna-direita” pra lá.
Aparentemente não há nada de errado com esses procedimentos, você provavelmente já fez algo parecido antes. Mas e se tivesse um jeito melhor?
A sinhazinha mais famosa na década passada era a tabela, ela jogava o conteúdo pra lá e pra cá só pra atender aos desejos do layout. Esse é um dos piores aspectos da web sem padrões, e ainda continua. A senzala mudou de dono, agora quem manda é o CSS.
E se desde o começo você decidisse que a lista de links entraria no div “lista de links” e quando fosse necessário mudar a posição da mesma, alteraria apenas o CSS? O mesmo para o campo de busca, ele entraria no div “busca”, e assim por diante. Cada elemento da página entraria em um elemento que é capaz de descrevê-lo, e todos os demais seriam eliminados. Isso é semântica!
Esqueça coisas no HTML como “coluna-direita”, “cabeçalho” e “rodape”, crie elementos que realmente mostram o que eles são no conteúdo e não no visual.
O HTML e o CSS tem que ser irmãos, e se respeitar. Layout respeita conteúdo. Há dúvidas de que tudo funciona melhor assim?
4/5/2007 às 4:39 am
Gostei do Post, porem acho que ficou meio vago.., mas blz.. vou esperar o segundo da serie….. vai ter né ???
4/5/2007 às 12:47 pm
Condordo plenamente, as vezes parece que só trocaram a tag “table” pela tag “div”, o que não é o sentido real da semântica.
HTML para é conteúdo, usando as tags de acordo, e CSS para layout. A mudança de layout não deve atrapalhar o conteudo.
5/5/2007 às 9:52 pm
É concordo, mas com o tempo as coisas começam a evoluir, o importante é que as pessoas que começarem agora aprendam a utilizar a semântica corretamente.
7/5/2007 às 9:19 pm
[...] Você tem que pensar no motivo que te leva a identificar ou classificar um elemento, e não no resultado visual que deseja atribuir usando CSS. Não escravize o HTML. [...]
8/5/2007 às 9:46 pm
[...] Não escravize o HTML, o <div> não existe só pra que você possa usar CSS. Eu insisto muito nesse ponto, crie os ids e classes de maneira descritiva. [...]