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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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