Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Cadê a semântica?

Publicado em: 2006-07-1 — 37.429 visualizacoes

Homem com vela procurando a semântica

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.

30 comentários na matéria: “Cadê a semântica?”

  1. Mateus Avila IsidoroNo Gravatar disse:

    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.

  2. JairoNo Gravatar disse:

    Opa, mt bom.

  3. Léo NovaisNo Gravatar disse:

    Parabéns!!!
    Ótima Matéria….

  4. adrianoNo Gravatar disse:

    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!

  5. GiseleNo Gravatar disse:

    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.

  6. WylkonNo Gravatar disse:

    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! 🙂

  7. Por falar em Css « Blog da turma de design digital INFNET disse:

    […] 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 […]

  8. SchizoNo Gravatar disse:

    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?

  9. GiseleNo Gravatar disse:

    muito bom, serve para tirar algumas dúvidas e se situar nessa questão que as pessoas comentam e você não entende porque?

  10. Tutoriais CSS | Web Standards | Acessibilidade | Tableless disse:

    […] 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! […]

  11. WalterNo Gravatar disse:

    Muito bom Maujor,
    li isso e entendi muita coisa que ouvia falar mas não sabia o que era.
    Parabéns!

  12. AldreyNo Gravatar disse:

    Incrível como essa matéria se encaixa com minha forma de pensar.

    Parabéns!

  13. HélioNo Gravatar disse:

    Ótimo artigo Maujor.

    Parabéns.

    Hélio

  14. Flávio RodriguesNo Gravatar disse:

    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!

  15. Andre LimaNo Gravatar disse:

    Muito obrigado pelo post… agora eu ” sei ” o significado da semantica web

    Um abraço

  16. Rodrigo FerrarjNo Gravatar disse:

    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

  17. Marco GomesNo Gravatar disse:

    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”.

  18. MarceloNo Gravatar disse:

    Gostaria de saber porque eu tenho que deixar de usar o table e usar divs???

  19. Leonardo ProcópioNo Gravatar disse:

    Gostei da materia!
    As pessoas hoje em dia tem mania de inventar conceitos e acabam embaralhando e complicando oq era p/ser tranquilo!

  20. Bruno DulcettiNo Gravatar disse:

    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… 😉

  21. JoaresNo Gravatar disse:

    kkkkkkkkkkk…

    Concordo com o Dirceu… daqui uns tempos surgirá a campanha Divless… heheheh

  22. FelipeNo Gravatar disse:

    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.

  23. Dirceu Pereira TiegsNo Gravatar disse:

    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!

  24. Felipe RanieriNo Gravatar disse:

    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!!

  25. Lucas AlvesNo Gravatar disse:

    É bem por ae mesmo…a fissura por ter um código tao clean tao semantico acaba virando neurose….Gostei do artigo…parabéns

  26. JoaresNo Gravatar disse:

    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!

  27. Sandro OliveiraNo Gravatar disse:

    É 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

  28. Pedro RogérioNo Gravatar disse:

    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!!!!

  29. billy blayNo Gravatar disse:

    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

  30. Carlos EduardoNo Gravatar disse:

    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 =))

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo