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

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

  • por Muniz
  • Web

  • A56

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

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

  • Muito bom!!

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

  • 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 ;)

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

  • Boa Bruno :)

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais