Elemento HTML q: citações curtas, fontes cite e aspas

O elemento HTML q marca uma citação curta dentro de uma frase. Os navegadores geralmente adicionam aspas automaticamente, e o atributo cite pode registrar a URL da fonte. Esse atributo não cria um link clicável para a fonte, portanto, forneça um link separado no texto quando os leitores precisarem de um.

Como q, blockquote e cite diferem

Use q ao citar palavras de outra fonte dentro do fluxo de uma frase. Para uma citação separada contendo vários parágrafos, use uma citação em bloco com blockquote. Não use q apenas para destacar uma palavra ou adicionar aspas irônicas.

Um exemplo completo com uma fonte e uma citação aninhada

Salve o código completo abaixo como inline-quote.html e abra-o em um navegador. A primeira citação é uma frase curta do HTML Standard. A segunda é um diálogo fictício escrito para demonstrar marcas de citação aninhadas. Nenhum servidor ou JavaScript é necessário.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q e as fontes das citações</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    q { quotes: '“' '”' '‘' '’'; }
    a { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Citações curtas e fontes</h1>
  <p>O padrão HTML descreve o conteúdo representado por q como <q lang="en" cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">some phrasing content quoted from another source</q>.</p>
  <p>Fonte: <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element" target="_blank" rel="noopener noreferrer"><cite>HTML Standard, q element</cite></a></p>
  <p>Diálogo fictício: o aluno disse: <q>O aviso diz <q>Por favor, feche a porta</q></q>.</p></body>
</html>

A primeira citação permanece no mesmo parágrafo da explicação ao redor e é envolvida por aspas. No diálogo fictício, aspas duplas cercam a citação externa e aspas simples cercam a citação interna. O título da fonte vinculada aparece em seu próprio parágrafo; o endereço no atributo cite de q não é exibido automaticamente.

Evite adicionar aspas duplicadas

Se você digitar aspas imediatamente antes, depois ou dentro de q para cercar a mesma citação, elas podem duplicar a pontuação gerada pelo navegador. O exemplo coloca apenas as palavras citadas dentro de q e deixa as marcas para o navegador. Você também pode escrever aspas manualmente em texto simples sem q, mas não combine os dois conjuntos de marcas para a mesma citação.

As marcas padrão podem variar de acordo com a língua do documento ou elemento e os estilos do navegador. A regra CSS quotes do exemplo define explicitamente os pares externo e interno para que você possa comparar os resultados claramente. Remova essa regra para comparar os padrões, depois restaure-a. Alterar a aparência não elimina o significado do elemento q como uma citação.

Disponibilize a fonte para os leitores

O atributo cite é opcional. Use um endereço que forneça a passagem original ou seu contexto, em vez de uma página inicial não relacionada. Se os leitores precisarem ler o original, também forneça um elemento a com um texto de link específico, como no exemplo. Copie a redação verificada com precisão e distinga a citação da sua própria explicação.

Não presuma que todos os leitores de tela anunciem o início e o fim de uma citação q da mesma maneira. Quando a atribuição for importante, indique quem disse o quê na própria frase, por exemplo, “O padrão descreve …”. Para definições e condições de uso, consulte a definição de q no padrão HTML e a referência de q na MDN.