Cadê a semântica?
Publicado em: 2006-07-1 — 44.782 visualizacoes
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.
Mas afinal, o que é 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!
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-07-1 (sábado). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/07/01/cade-a-semantica/trackback no seu site.
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!
[…] Pesquisando algumas coisas pra fazer o site vi em um blog que código validado não significa código semântico e achei interessante. Isso de código semântico nem foi muito falado nas nossas aulas, então fica a dica pra estudo. E mais este e este blog falam do assunto. Escrito por zin Arquivado css, dicas, link, trabalho pessoal ·Etiquetas: css, dicas, link, trabalho pessoal […]
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?
[…] Alegam estes leitores, que os códigos não são acessíveis, não são semânticos, contrariam isto e aquilo das Web Standards. Vocês querem saber qual a minha opinião a respeito? Eu também acho isto tudo e concordo com estas colocações mas, não entendo a falta de visão destes que assim argumentam. Será que não dá para perceber que estes desafios visam a desenvolver habilidades no trato com a dupla (X)HTML + CSS, fixando conceitos e descobrindo modos e maneiras de obter efeitos? Ora bolas! Faça-me um favor quem tiver procurando semântica nos desafios. Passe longe! Vá explorar o site do W3C! […]
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!
Ótimo artigo Maujor.
Parabéns.
Hélio
Prezado amigo,
Graças aos seus artigos é que pude entender um pouco mais sobre o que é de fato Webstandards e Semântica. Obrigado por mais esta aula de conhecimento acessível e objetivo. Obrigado por compartilhar!
Muito obrigado pelo post… agora eu ” sei ” o significado da semantica web
Um abraço
Caro amigo Maujor…
mt bom este post…e eu tb ja passei por essta mesmice….
mas enfim….hj estou melhor …
acontece ….
agora eu faço do meu jeito…
cansei de certas coisas…
nao qro mais complicação pra minha cabecinha q ja anda cheia…
SEJA LIVRE!!
abraço
Minha opinião é um pouco diferente:
De acordo com a W3C as DIVs e SPANs servem para agrupar elementos.
Normalmente você não tem um grupo>grupo>grupo>grupo, sendo que só há conteúdo dentro do último grupo (os outros são “vazios de conteúdo”, têm apenas um grupo filho).
Mas é claro que em caso de problemeas de layout é válido usar as divs extras, não sou xiita.
SEI que estou “indo contra a semântica”, sei que está semanticamente errado, mas aceito o “meio em justificativa ao fim”.
Gostaria de saber porque eu tenho que deixar de usar o table e usar divs???
Gostei da materia!
As pessoas hoje em dia tem mania de inventar conceitos e acabam embaralhando e complicando oq era p/ser tranquilo!
boa maurício… problema às vezes eh q o pessoal utiliza o div onde naum deve… coisas do passado q ainda interferem hj…
e eh sempre bom dar uma estudada mais afundo sobre todas as tags… pra ver o q utilizar…
kkkkkkkkkkk…
Concordo com o Dirceu… daqui uns tempos surgirá a campanha Divless… heheheh
Mas cade a semântica??? hehehehe rs…
Brincadeira
Parabéns por esse e todos os outros atrigos, sites e blogs que vc ajuda a popularizar css, tableless e web standards.
Acompanho sempre o seu site.
Muito bom o post. Realmente, ser tão “purista” só leva a pessoa a se estressar sem motivo, e achar um meio termo também é importante: se todos ficarmos entupindo o código de div’s apenas para acomodar um layout, daqui a pouco alguém começa um movimento “Divless” ;).
Parabéns pelo blog. Abraços!
Gostei do artigo também.
É normal, principalmente no início da carreira, nos primeiros contatos com “novas tendências” que algumas pessoas fiquem fascinadas, deixando o real entendimento de lado, certas vezes erguendo bandeiras e afins.
Abraços!!
É bem por ae mesmo…a fissura por ter um código tao clean tao semantico acaba virando neurose….Gostei do artigo…parabéns
Realmente esse assunto muitas vezes enxem o saco… tipo… tem gente q aprendeu a escrever a palavra “semântica” um dia desse e pronto… sai achando q a sua simples maneira de enxergar o código é que é a certa…
Curti o artigo meio q de desabafo… hehehe…
[ ]’s
Espero ver-te em meu blog tbm!
É isso aí!
Belo post Maujor…
Confesso quando comecei a trabalhar com padrões web eu tive parte dessa frebe e até hoje ainda escorrego em algumas armadilhas… Mas a cada dia vamos aprendendo algo novo né…
Mas tá valendo…
Abração
Todo mundo que está iniciando nesse mundo acho que já passou por isso, e só o tempo faz a pessoa abrir os olhos, eu também já passei por isso, no momento estou me vacinando!!!!
olá maujor,
muito interessante esse post, esse assunto é uma grande dor de cabeça para quem está ingressando nas standards. Quando passamos para o outro lado (webstandards), iniciamos uma procura incansável pelo código limpo, bem estruturado, indentado e outras coisas mais.
Obrigado
Parabéns
Caramba… Ótimo artigo!!
Muito bom MESMO!!
A gente vê essa “febre” por aí e fica chato essa confusão entre “semântica” e “minimalismo” do código… Beem proveitoso o texto mesmo =))