Rafael Marin

Após ler no A List Apart sobre a tag <q>, resolvi fazer uma versão em português.

A tag <q> existe há aproximadamente 9 anos, desde a primeira versão do HTML 4.0. Sua principal função é exibir citações (quotations) curtas e inline, que não necessitem de quebras de parágrafo. A tag <q> é muitas vezes associada com a tag <blockquote>, que é usada para grandes citações, em forma de bloco. Desde a implementação da tag junto ao HTML 4.0, ela nunca foi totalmente compatível com o IE para Windows. Teoricamente, antes e depois conteúdo dentro da tag <q> deveriam ser renderizadas aspas. Mas o IE não o faz. Talvez este seja um dos motivos pelo qual muitos desenvolvedores deixam de usar a tag <q>. Acompanhe o exemplo:

Esta citação está incluída dentro de uma tag q. Em navegadores como o Opera e FF aparecerão as aspas no início e no fim desta citação. Caso esteja usando o IE, elas não aparecerão.

Para resolver este problema, poderíamos usar CSS para deixar a tag <q> em itálico, o que causaria confusão, pois citações curtas e inline ficariam difíceis de reconhecer sem as aspas - além da tag <cite> ser renderizada pelo browser em itálico. Usar JavaScript para renderizar as aspas também não resolveria pois, caso o user-agent não suportasse JavaScript, as aspas não seriam renderizadas. Deixar de usar a tag <q> - o que muitos fazem - também não resolveria o problema, pois o código não ficaria semântico. Usar <blockquote> não seria bom, pois usar a tag incorreta não é a solução. E, finalmente, inserir as suas próprias aspas (o que também não resolveria, pois em browsers que suportam bem a tag <q> seriam geradas aspas duplas). Podemos, todavia, usar generated content no CSS para alterar todos os outros browsers. ao invés de buscar uma solução semanticamente correta para o IE. Acompanhe o exemplo a seguir:

q:before, q:after{
content: "";
}

Como você pode ver, a propriedade content: está em branco, pois isso remove as aspas em todos os browsers. (Lembrando que no IE/Win os pseudo-elementos :before e :after não são reconhecidos, mas não faz diferença pois este truque não é voltado ao IE/Win, e sim a todos os outros browsers).

E então, adicionar aspas você mesmo antes e depois da tag <q>, fora das tags, como no exemplo abaixo:

Segundo Seu Madruga, "<q>A vingança nunca é plena, mata a alma e a envenena.</q>" o que nos leva a concluir que...

OBS: Lembrando de adicionar o código CSS que citei acima.

O que diz a W3C?

Segundo a Especificação W3C HTML 4.01:

Visual user agents must ensure that the content of the q element is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a q element.

Ou seja, os autores não devem usar as aspas dentro das tags <q>, pois também estas deveriam ser renderizadas automaticamente com as aspas.

A forma descrita pelo autor do artigo no A List Apart também me soa um pouco mais semanticamente correta, pois não depende de JavaScript, e não desobedece ? s especificações da W3C.

Links relacionados:

• Long live the Q tag - A List Apart - Artigo original no qual me baseei.

Este artigo foi publicado em 24 de February de 2007 às 8:24 pm em XHTML & HTML.