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?