Pular links da navegação e ir direto para o conteúdo

Publicado em 15 de Jun de 2007 às 09:42

A semântica das tags ‹div› e ‹span›

Desenvolvedores, é semântico usar uma tag ‹div› dentro da outra para fazer cantos arredondados? Ou usar ‹span› numa palavra de um link só para fazer uma arte tipográfica?

Muitos diriam que não, eu até entendo a preocupação com os exageros no uso de divs aninhadas, mas ninguém pensa que as tags ‹div› e ‹span› são elementos sem valor semântico. Pense: O que é a tag ‹ul›? Lista não ordenada. O que é a tag ‹form›? Formulário. E o que é uma ‹div›? Nada :) É uma divisão que quebra linha (block) e só.

Divs e spans estão aí exatamente para que se possa fazer um layout flexível e rebuscado sem influenciar na semântica do documento HTML. Isso significa que se você precisa de duas ou três divs para um box com cantos arredondados num layout líquido, faça isso!

But KISS, KISS and KISS

Para mim o KISS não é mais só a sigla de Keep It Simple, Stupid/Sweetheart, é aquela voz que fica na cabeça na hora da codificação de um XHTML Strict em que você tem em mãos um super layout cheio de detalhes e para fazer um determinado efeito vai precisa usar tanto a ‹div› pai, quanto a ‹ul› filha e ainda criar outra ‹div› filha só para fazer um detalhe. E essa voz lhe encoraja a fazer essa segunda ‹div›, mas lhe faz pensar um pouco mais para evitar a criação de uma terceira ‹div›, pois você pode usar a ‹ul› que está bem ali pronta esperando o CSS. E isso é ótimo!

Desenvolver um HTML de forma semântica é exatamente isso, usar o bom senso para estruturar o documento e sentir-se à vontade usando tags sem valor semântico, mas ainda pensando na simplicidade da estrutura e sem fazer o que muitos já fizeram com tabelas dentro de tabelas dentro de tabelas

Vamos usar as divs sem medo, mas com o KISS na cabeça. :)

Compare Preços de: MP3, iPod, celulares, notebooks, câmeras no Buscapé.

Popularity: 21% [?]

  • por Muniz
  • Web

6 Respostas para “A semântica das tags ‹div› e ‹span›”

  1. A56 em 15 de Jun de 2007 às 09:57 disse:

    A verdade é que somos malditos aficcionados pela beleza e enquanto não agradamos aos nossos olhos, não conseguimos pensar com clareza!

  2. Rafael Oliveira em 15 de Jun de 2007 às 12:57 disse:

    Muito bem dito.

    A grande questão é analisar se há necessidade disso ou daquilo, pensar e procurar os melhores meios para chegar-se ao resultado final, mantendo uma estrutura simples, organizada e semântica. E isso não é nada difícil, é só uma questão de conhecer a sua ferramenta, no caso a dobradinha (x)HTML e CSS, e saber como usá-la.

    Mas as CSS3 vem aí pra acabar com o “excesso” de divs também, a opção de usar múltiplos fundos em um elemento vai ajudar bastante nesse quesito. Só falta rezar para que os navegadores se atualizem rapidamente.

    Até. x)

  3. Rodrigo Fante em 15 de Jun de 2007 às 14:50 disse:

    Muito bom!!

    To bebendo da mesma coisa que vc, pq ando ouvindo muito essa voz ultimamente!!

  4. Carlos Eduardo em 15 de Jun de 2007 às 17:23 disse:

    Concordo! Acho muito legal termos posts desse tipo, pois muita gente acha que div e span não podem ser utilizadas para estes efeitos, mas podem sim! Claro, tudo com moderação ;)

  5. Bruno Dulcetti em 20 de Jun de 2007 às 12:32 disse:

    Boa… É só manter um bom senso, colocar milhares de divs/spans, só trocando as tables, trs e tds por div, que tah tudo certo :D

    Tentar sempre manter o código mais limpo, semântico e curto possível.

    E eu trocaria o “desordenado” por “não ordenado”… Achei o “desordenado” meio como “bagunçado”, “espalhado” ;)

    Aquele abraço.

  6. Muniz em 20 de Jun de 2007 às 12:33 disse:

    Boa Bruno :)

Deixe seu comentário