Tag HTML <q>
A tag <q> é um elemento inline para citações curtas. Descrição, atributos e exemplos de uso.
A tag <q> é um elemento inline usado para citações curtas que se encaixam no fluxo de uma frase e não ocupam várias linhas. A característica principal do <q> é que os navegadores adicionam automaticamente as aspas ao redor do conteúdo — você não deve digitar as aspas manualmente.
Para citações mais longas e independentes que formam seu próprio parágrafo, use o elemento de nível de bloco <blockquote>.
Esta página aborda quando usar <q>, como ele difere do <blockquote>, o atributo cite, e a forma específica de personalizar as aspas inseridas com a propriedade CSS quotes.
Sintaxe
A tag <q> vem em pares. O conteúdo é escrito entre as tags de abertura (<q>) e fechamento (</q>).
Exemplo da tag HTML <q>:
Tag HTML <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Bernard Show says:
<q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q>
</p>
</body>
</html>Resultado
<q> vs <blockquote>
Ambos os elementos marcam material citado, mas servem a propósitos diferentes:
<q> | <blockquote> | |
|---|---|---|
| Exibição | Inline — flui dentro de uma frase | Nível de bloco — bloco recuado independente |
| Extensão | Citações curtas | Citações mais longas e independentes |
| Aspas | O navegador as insere automaticamente | Nenhuma adicionada; você as fornece se necessário |
Atributo cite | Suportado (URL da fonte) | Suportado (URL da fonte) |
Use <q> quando a citação estiver dentro de texto corrido, e <blockquote> quando ela estiver por conta própria. Não digite aspas dentro de <q> — o navegador as fornece, portanto digitá-las produziria aspas duplicadas.
Exemplo usando <q> e <blockquote> juntos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>As the proverb goes, <q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q></p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
"We're all mad here. I'm mad. You're mad," said the Cheshire Cat.
</blockquote>
</body>
</html>Observe que o texto <q> aparece com aspas adicionadas pelo navegador, enquanto o texto <blockquote> é apresentado como um bloco recuado sem aspas.
O atributo cite vs o elemento <cite>
Dois recursos com nomes semelhantes são facilmente confundidos:
- O atributo
cite(<q cite="...">) contém uma URL legível por máquina apontando para a fonte da citação. Ele não é exibido pelo navegador — existe para mecanismos de busca, leitores de tela e scripts. - O elemento
<cite>é um texto visível usado para marcar o título de uma obra referenciada (um livro, música, filme, artigo). Por padrão, é renderizado em itálico.
Você pode usar ambos juntos — o atributo cite para a fonte legível por máquina e um elemento <cite> visível para a referência legível por humanos:
<p>
<q cite="https://www.gutenberg.org/ebooks/11">We're all mad here.</q>
— <cite>Alice's Adventures in Wonderland</cite>
</p>Aspas automáticas
As marcas ao redor do conteúdo de <q> não fazem parte do HTML — os navegadores as adicionam com CSS, usando os pseudo-elementos ::before e ::after juntamente com os valores content: open-quote e content: close-quote. O stylesheet padrão do agente de usuário se parece com isto:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Alterando as marcas com a propriedade CSS quotes
Como as marcas vêm de open-quote/close-quote, a forma específica de <q> para personalizá-las é a propriedade CSS quotes. Ela permite definir quais caracteres usar sem alterar o HTML:
<style>
q {
quotes: "«" "»";
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>Para remover as marcas completamente, defina quotes: none.
Elementos <q> aninhados
Quando você aninha um <q> dentro de outro, os navegadores alternam automaticamente entre estilos de aspas externas e internas (por exemplo, aspas duplas por fora e aspas simples por dentro). A propriedade quotes aceita um segundo par de strings para o nível aninhado:
<style>
q {
quotes: '"' '"' "'" "'";
}
</style>
<p>
<q>The teacher said, <q>He who can, does.</q></q>
</p>O primeiro par ('"' '"') estiliza o nível externo, e o segundo par ("'" "'") estiliza o aninhado.
O atributo lang e marcas específicas por localidade
As aspas diferem por idioma — o inglês usa "…", o francês usa «… », o alemão usa „…". Os navegadores escolhem as marcas corretas com base no idioma do elemento, portanto definir o atributo lang em <q> (ou em um ancestral) produz aspas adequadas à localidade automaticamente:
<p lang="fr"><q>Bonjour le monde</q></p>
<p lang="de"><q>Hallo Welt</q></p>Em contexto francês, o navegador renderiza guillemets («… »), e em contexto alemão, as marcas baixa-alta („…").
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| cite | URL | Uma URL legível por máquina apontando para a fonte da citação. Não é exibida ao usuário. |
| lang | language-code | Especifica o idioma do conteúdo, que determina as aspas específicas da localidade. |
A tag <q> também suporta os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <q>
Como as aspas são geradas por open-quote/close-quote, o controle de estilo mais específico de <q> é a propriedade CSS quotes:
<style>
q {
quotes: "‹" "›";
font-weight: bold;
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>