Cadê a semântica?
Publicado em: 2006-07-1 — 43.939 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 https://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 =))