A semântica do span e do div

Recentemente me deparei com uma nota publicada no Berea Street que me fez lembrar de um grande dilema que assombra muitos desenvolvedores iniciantes (e outros não tão iniciantes assim). Qual o significado semântico das tags <div> e <span>? Este é um assunto delicado que só os bem iniciados no assunto deveriam participar. De qualquer maneira sua contribuição para esta discussão será muito bem vinda. Vamos então aos fatos.

A W3C define div e span da seguinte maneira:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Elementos de bloco podem conter elementos inline e outros elementos de bloco. Elementos inline devem conter apenas dados, (textos propriamente dito) e outros elementos inline. Inerente a este distinção estrutural temos a idéia de que elementos de bloco criam estruturas maiores do que os elementos inline. Ou seja, tanto o div quanto o span são elementos estruturais (generic mechanism for adding structure to documents) em seus respectivos contextos. Até aqui nada demais.

Como escreve Lachlan Hunt e o Roger Johansson endossa, basicamente o span e o div são elementos estruturais com o propósito de aplicar "semântica autoral" onde não há nenhum outro elemento semântico disponível. Ou seja, se você possuiu um conjunto de elementos que precisam ser agrupados (como header e footer por exemplo), o div é a tag estrutural específica para isso. Este é o princípio semântico.

Por "semântica autoral" ("author-defined semantics" nas palavras dele), Lachlan se refere ao tipo de semântica que se pode alcançar juntamente com atributos como o id e o class (Microformats te lembra alguma coisa?). Nesta altura você já deve saber utilizar class com semântica em mente, saber que nomes de classes podem ser utilizados para qualquer propósito que os user agents queiram inclusive com propósitos semânticos e tudo mais certo? Dúvidas em relação a isso, favor ler os referidos links.

Vai um dilema ai?

Para esquentar a discussão, em um outro texto sob o domínio da W3C sobre unordered lists (o que acaba fazendo uma referência ao famoso divless que eu acho tão semântico quanto fazer sites estruturados em tabelas), o autor Brian Hisman escreve em poucas palavras:

Elements such as <div> and <span> are semantically empty, implying no meaning other than grouping content into blocks.

Em outras palavras, <div> e <span> não possuem significado (são vazios em si) até que você dê um a eles. Por isso que a velha discussão de que um site tableless (que usa divs no lugar tabelas para estruturar um site) pode ser tão vazio semânticamente quanto um site estruturado com a tag font. Mesmo que estes elementos sejam vazios, não significa que devam continuar assim. Meu conselho é que você procure utilizar tag <div> em um contexto justificável em que você possa dar um significado junto com um atributo class igualmente justificável. Uma <div> (division) mais um atributo class="footer" pode ter bastante significado, e isso é óbvio para vocês também certo?

  • http://www.arealocal.com.br Sandro Alencar Ferna

    Henrique,

    Parabéns pelo tema. Bom realmente é delicado tratar a semântica destas duas tags. Porém ao meu ver a definição dada pela w3c diz tudo. A semântica, nesses casos é dada pelas classes e pelos id´s. E respondendo ao seu questionamento um com a class "footer" para mim faz sentido.

    Abraço

  • http://rafael.adm.br Rafael Lima

    Visto que uma tag pode possuir apenas um ID e pode possuir mais de uma classe, o significado do DIV não deveria ser dado por meio de um ID ao invés de uma CLASS?

  • http://project47.viscountbox.com Carlos Eduardo

    Os Microformats tão aí pra isso!

    Se você nomear suas divs ou spans com nomes semanticamente corretos, com certeza esses 'blocos de informações' terão seu significado…

    Abordagem muito boa e proveitosa =)

  • http://jaderubini.wordpress.com/ Jader Rubini

    Falou tudo. DIVs e SPANs são elementos vazios de significado, até que nós resolvamos dar um a eles.

    É por isso que eu digo: nomear uma id ou classe merece tanta atenção quanto escolher qual a tag mais apropriada a se usar em um determinado caso.

  • Thiago Machado

    gostei do link da goodess

    parabens pelo post!

  • Fellipe Cicconi

    Caramba!

    Isso que é aproveitar muito bem o recurso hipertexto Henrique. Gostei bastante da quantidade de assuntos abordados numa questão como esta. Como você consegue ficar com todos estes links em mente? ;)

    Sempre sugiro o atributo *div* como _division_ para as pessoas que estou ensinando a lidar com este elemento… Mas, contraditoriamente, isso embute um significado nem sempre desejável ao mesmo.

    Em outras palavras, nem sempre uma _division_ age semanticamente como tal, por isso, prefiro ignorar essa classificação e manter todo o seu significado sobre sua class ou id.

    E sobre o divless, bem, este nome simboliza o movimento em prol do uso consciente do elemento abstrato div (e span). Não é mais uma ceita dogmática como muitas vezes o tableless parece ser para quem está ingressando neste mundo.

  • Edy

    Oi, Henrique. Parabéns pelo o post. Como sempre só post de qualidade. Estou com uma dúvida já faz tempo. div = division, e o span = ? O que significa a sigla span?

  • http://www.panteon.com.br Rodrigo Chibiaqui

    Ufa! Mais uma dúvida que acaba de evadir meu cérebro :)

    Sobre o comentário de Rafael Lima (2), usar o ID para classificar acaba limitando um pouco, pois só poderá usar um elemento com esse ID.

    Se eu quizer fazer uma div que contenha todos os dados sobre um produto e usar o id para dar nome ao boi (id produto) acabo não podendo exibir mais de um produto por vez :) já com class fica tudo lindo!!

    Abração

  • http://www.eugeniogrigolon.com Eugenio Grigolon

    #4 – Jader Rubini

    Concordo com você!

    Questões de semânticas está em alta. Onde trabalho, tudo o que precisa saber são padrões ofericidos pela W3C, se não souber utilizá-los, você não é considerado um webdesigner.

    Algumas empresas que já visitei, não tem a menor idéia do que isso siginificado, mas existem outras que a maior prioridade é semântica.

    Ótimo artigo!

  • http://www.dotes.com.br Luiz Júnior F

    Bom, sei que uma coisa é certa. ID = Elemento único; Class = Vários Elementos…, isso não muda e faz com que elementos vazios semânticamente se transformem em elementos com valores semânticos. Ótimo post, espero que venham mais e mais posts sobre semÂntica no desenvolvimento web, pois isso e alog que a gente estuda, estuda e estuda, e no fim das contas acaba por ver que não sabe quase nada =]

  • http://danillonunes.com Marcus Danillo

    "Se eu quizer fazer uma div que contenha todos os dados sobre um produto e usar o id para dar nome ao boi (id produto) acabo não podendo exibir mais de um produto por vez :) já com class fica tudo lindo!!"

    Nesse caso, você pode usar produto-1, produto-2, produto-3… Aí você atribui uma classe "produto" também. Essa classe será responsável por modificar o estilo de todos os produtos (já que você não poderá escrever no CSS todos os IDs que existem no seu site).

    —–

    Eu queria saber o que vocês acham de usar nomes em português em classes e IDs.

  • http://www.brunodulcetti.com/blog/ Bruno Dulcetti

    estou com o cicconi…

    essa coisa de div e span sem significado semântico eu concordo plenamente… Eu antes pensave como um "divisor", mas nem sempre ele se encaixa nisso… seria mais como um bloco, como ele eh visualmente falando…

    e o span eh como se fosse uma tag , mas sem significado semântico, como vc disse… usando o css, vc estiliza a área que vc quer, da forma como vc quer, mudando cor d fundo, texto, sublinhado, etc…

    e essa parte d divless eh akele nivelamento de aprendizado… Vc começa usando "Tableless", dps vem o "Divless" que aih depois vc começa a fazer em Webstandards… +ou- isso… ;)

    belo post henrique… akele abraço…

  • Douglas d'Aquin

    O div em si significa "divisão", até onde eu sei… portanto o comentário no final do testo acho que não procede. O span no entanto segue este conceito e não possui um significado em si, mas basicamente é um div para objetos inline.

    Nunca gostei muito de usar span, já que geralmente existem outras alternativas, principalmente trabalhando com css… quando tratamos conteúdo, vale mais separar os blocos de texto pela tag do que …

    a unica utilidade real que eu vejo para o é atribuir uma classe ou id para uma parte específica do texto na falta de outras tags.

    por exemplo: nessa frase pode ter um texto vermelho

    muito bom o artigo, esclarece bastante coisas pra quem não conhece e até algumas coisas para quem conhece também.. eu por exemplo nunca tinha parado para ler a definição oficial da tag span.

    valeu

    []'s

  • Igor Escobar

    Fala Henrique tudo bom?

    Velho, concordo com cada palavra do que você disse principalmente, com certeza um site pode ser semânticamente superior a um outro qualquer todo estruturado usando Divs e spans sem significado algum.

    Continue assim brother!

    Seu blog é show de bola!.

  • muito loco

    MUito loco e em demais

  • http://tcelestino.blogspot.com Tiago Celestino

    Muito legal! Uso muito mas sempre indicado seja como class ou um id.

    Achei bem interessante, e refrescou ainda mais a minha memoria.

  • Francisco dos Santos

    A semântica se torna subjetiva se levarmos em conta o grau de conhecimento de cada um e a interpretação sobre as recomendações do W3C.

    Como exemplo, temos no post de Lachlan Hunt, comentando sobre o uso do elemento "b" por Eric Meyer.

    Outra coisa "div's" e "span's" são apenas uma parte de todo o processo, assim como este comentário. Os outros elementos são igualmente importante no processo de codificação do HTML/XHTML.

    Portanto, ao meu ver usar a semântica atinge em primeiro lugar aquele(s) que irão fazer a manutenção do mesmo, pois criando-se uma estrutura enxuta e coerente, qualquer um da equipe estará apto a trabalhar no código.

    Em segundo lugar, o código criado é "legível" aos mecanismos de busca? Ou seja a estruturação da informação faz com que o mecanismo de busca seja preciso na coleta destes dados incluindo os "microformats". Dessa forma, alcança-se o objetivo principal que é estar "visível" entre milhares de sites, considerando o seu nicho, na internet.

    Portanto, este assunto está , apenas, começando já que para a imaginação de cada pessoa não existe nenhuma regra geral a não ser o bom senso de cada um.

  • Luiz Paulo Pedrosa

    Olá! Essa questão toda sobre semântica me levantou uma dúvida! Estou no Brasil então poderia usar nomes das divs em português? por exemplo:

    Acredito que do ponto de vista humano e por estarmos no Brasil seria semanticamente correto. Mas outra questão é como será que os spiders interpretarão esses IDs?

    E no caso dos Micro Formatos (ta certo escrever isso assim?)esse tanto de nome de classes e Ids em inglês não é esquisito para outras culturas?

    ps. Excelente esses artigos sobre semantica!

  • Luiz Paulo Pedrosa

    Opa desculpem! Acabei usando código html no exemplo do comentário anterior segue o exemplo sem html:

    div id="cabecalho"

    div id-"conteudo"

    div id="rodape"

  • http://www.gravateiros.com.br Douglas Corrêa

    A dúvida do Luiz Pedrosa é a mesma que a minha, posso usar os divs "para layout" (geral, cabecalho, conteudo, rodape, lateral) em português ou em inglês?

    E utilizá-los dessa maneira tem algum conteúdo semântico?

  • http://www.gravateiros.com.br Douglas Corrêa

    Lendo melhor o atributo lang notei que devemos utilizar ele (ou o Content-Language no header) para que o user agent saiba que o documento em questão está em determinado idioma, e portanto aplicar-lhe a devida semântica.