O ministério de doenças da Web adverte: Não se deixe contagiar pela febre semantiótica.
A semanticite ataca humanos envolvidos com desenvolvimento web, recém ingressos nas maravilhas das Web Standards. Contudo, os não recém, não estão imunes a esta praga. A pessoa atacada pela doença apresenta os sinais típicos de extrema ansiedade e stress que só são aliviados quando encontrado algo ‘não semântico’.
Esta bobagem toda aí em cima seria cômica se não fosse trágica.
A motivação para escrever esta matéria veio de leituras que tenho feito em fóruns em comentários e em blogs e que são mais ou menos assim:
O cidadão acaba de ler uma matéria mostrando uma construção com folhas de estilo, onde o desenvolvedor usou 4 DIVs para obter o efeito “box com cantos arredondados”. Aí, lembra que leu em algum lugar uma técnica com 2 DIVs e sem mais nem menos, na maioria dos casos sem nem ter entendido direito a matéria, deixa lá sua pergunta genial: “E onde fica a semântica?”.
Ou: A matéria mostra a obtenção de um efeito gráfico com folhas de estilos, onde o desenvolvedor usou 3 DIVs aninhadas para simular um desenho. Pronto, lá vem de novo: “Cadê a semântica?”
Bem, antes de prosseguir quero esclarecer que estou escrevendo sobre código (X)HTML semântico que nada tem com Web Semântica.
Uma consulta a um dicionário da língua portuguesa retornará uma definição parecida com a transcrita abaixo:
Semântica é a parte da lingüística que estuda os significados das palavras.
Isto traduzido para a Web ganha a seguinte interpretação:
Código semântico e aquele que usa os elementos da linguagem de marcação em conformidade com o seu (dos elementos) significado.
Por exemplo: elementos H e seus 6 níveis destinam-se a marcar cabeçalhos, elementos P devem ser usados para marcar parágrafos, elementos BLOCKQUOTE não devem ser usados para indentar (recuar) textos, pois destinam-se a blocos de citações e assim por diante, todos os elementos do HTML com o seu significado e finalidade exceto os elementos DIV e SPAN que não têm valor semântico algum.
Então, em um exercício de lógica bem simples pergunto:
Se DIV e SPAN não têm valor semântico, posso usar quantos eu queira, sem violentar o código?
Teoricamente sim! Contudo aqui entra um outro conceito das web standards que é a “clareza e limpeza” do código. Projetar um código limpo é não inchá-lo com elementos desnecessários. É o conceito do código minimalista.
Este conceito carrega consigo outra doença que é a “minimalice”, cujo sintoma é a busca estressante e doentia por reduzir o número de elementos na marcação ao máximo e em casos mais graves a um só!
Minimalismo é tão doentio quanto semântica
A virtude está no meio.
É um dito popular que se encaixa como uma luva nesta questão. Semântica e minimalismo são conceitos importantes no projeto web standards, mas não devem em absoluto ser motivo de patrulhamento doentio e estressante quando formos escrever nosso código.
Um DIV extra aqui e ali é a solução para um problema de layout que está complicado e você não consegue resolver? Não se estresse à toa, inclua o DIV extra e às favas com o patrulhamento semântico e minimalista. As web standards estão aí para simplificar e não para complicar.
Vamos usar os elementos necessários para marcar e facilitar soluções, sem medo de semântica, contudo não vamos cair na DivMania. e muito menos construir as colunas do nosso layout com elementos para listas.
Nota em 12/07/2013:
A chegada da HTML5 trouxe de volta a discussão sobre uso de DIVs havendo inclusive uma corrente de pensamento que advoga a eliminação total dos DIVs da marcação.
A especificação para a HTML5 reconhece e considera perfeitamente válido o elemento DIV.
Ela, inclusive, prevê que esse elemento pode ser usado em conjunto com atributos tais como class
, lang
, xml:lang
, e title
para definir semântica e estrutura adicional a um conteúdo. Tem também a finalidade de servir como container âncora (ou referência) para estilização.
Portanto use DIVs, desde que não exista um elemento mais apropriado, sem medo de ser feliz! 🙂
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Os atributos também carregam valor semântico, não apenas as tags. Isso ajuda a gente a pensar em melhores códigos no futuro. Nisso, a análise do Mestre está corretíssima.
Opa, mt bom.
Parabéns!!!
Ótima Matéria....
engraçado como o pressão por padronizar não mais depende dos desenvolvedores e sim dos usuários.... ainda precisamos nos preocupar com alguns que ainda usam o IE 6!
valeu o post!
Tema muito bem colocado, muito bom!
Web Standards = simplificar
O pessoal não acredita que as novas tendências de desenvolvimento possam ser simples, criam tanta complexidade que chega até a impedir o aprendizado.
puts... adorei! eu tava escrevendo um post no meu blog... que tem o objetivo de ajudar pessoas como eu... que começaram a programar e implementar... utilizando sites como o seu! que são ótimos.. e agora esse post falou tudo! vlw! :)
Ola major, após ler este artigo me vi tentado a fazer uma pergunta que me atormenta sobre um prática antiga, mas até onde sei totalmente fora de semântica: O uso de tabela no layout (aiii... acho que vou apanhar). Bom é o seguinte, com a tabela tenho um efeito natural bastante interessante que quando uma célula aumenta de altura as demais células da mesma linha acompanham este tamanho e não consegui fazer este mesmo efeito com nenhum outro elemento, nem mesmo utilizando os estilos como "display:table" e por ai vai. Bom, será que seria muito feio utilizar desta prática para este fim?
muito bom, serve para tirar algumas dúvidas e se situar nessa questão que as pessoas comentam e você não entende porque?
Muito bom Maujor,
li isso e entendi muita coisa que ouvia falar mas não sabia o que era.
Parabéns!
Incrível como essa matéria se encaixa com minha forma de pensar.
Parabéns!