Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Cadê a semântica?

Publicado em: 2006-07-1 — 17.536 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 quantas 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.
Uma 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 a 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.

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

capa livro html      capa livro html      capa livro html      capa livro html     

Enquete

  • Lamento. Não há enquetes no momento.

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.



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

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

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

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

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

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

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

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

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

  9. FelipeNo Gravatar disse:

    Mas cade a semântica??? hehehehe rs…

    Brincadeira :D

    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.

  10. JoaresNo Gravatar disse:

    kkkkkkkkkkk…

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

  11. 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… ;)

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

  13. MarceloNo Gravatar disse:

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

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

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

  16. Andre LimaNo Gravatar disse:

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

    Um abraço

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

  18. HélioNo Gravatar disse:

    Ótimo artigo Maujor.

    Parabéns.

    Hélio

  19. AldreyNo Gravatar disse:

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

    Parabéns!

  20. WalterNo Gravatar disse:

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

  21. 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! [...]

  22. 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?

  23. 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?

  24. 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 [...]

  25. 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! :)

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

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

  28. Léo NovaisNo Gravatar disse:

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

  29. JairoNo Gravatar disse:

    Opa, mt bom.

Comentário:






Subscrição de comentários sem comentar

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

Voltar ao topo

PR Tool


ir topo

Switch to our mobile site