HTML blockquote: citações em bloco e indicação da fonte

HTML <blockquote> marca uma seção autocontida citada de outra fonte. Pode conter múltiplos parágrafos. Você pode registrar a URL original em seu atributo cite e adicionar um link separado visível para que os leitores verifiquem a fonte.

Quando você deve usar blockquote?

Use blockquote para apresentar uma citação em uma seção separada. Não o use apenas para recuar um parágrafo ou mudar sua cor. Para uma citação curta dentro de uma frase, use <q>; consulte a referência do elemento HTML q.

Uma citação em bloco pode conter parágrafos e outros conteúdos de fluxo. Mantenha a citação distinta de sua atribuição: coloque o crédito do autor ou fonte fora do <blockquote>. Verifique a redação original e use apenas o material necessário para seu propósito.

Um exemplo completo com link para a fonte

Salve o código a seguir como quote.html e abra-o em um navegador. Nenhum servidor ou biblioteca adicional é necessário. A curta citação em inglês vem diretamente do HTML Standard.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exemplo de citação em bloco</title>
</head>
<body>
  <p>O padrão HTML descreve o que blockquote representa da seguinte forma.</p>
  <blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
    <p lang="en">a section that is quoted from another source</p>
  </blockquote>
  <p>Fonte: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
    target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>

O navegador exibe o parágrafo introdutório, a citação e o link da fonte nessa ordem. A formatação padrão varia, mas os navegadores geralmente dão margens extras à citação. O link abre a seção correspondente do HTML Standard. A citação mantém seu texto original em inglês.

O atributo cite é diferente de uma citação visível

O atributo cite contém o URL da fonte citada. Adicioná-lo não exibe automaticamente um link ou crédito da fonte. Inclua um elemento <a> separado e texto descritivo quando os leitores precisarem seguir a referência.

O atributo cite e o elemento <cite> compartilham um nome, mas têm funções diferentes. O atributo registra um endereço de origem; o elemento marca o título de uma obra, como um livro ou documento. Apenas o nome de um autor não é o título de uma obra.

Estilize a citação com CSS

Mantenha o significado da citação em HTML e ajuste suas margens e borda com CSS. Vincule uma folha de estilo do head do exemplo, depois adicione a seguinte regra a essa folha de estilo. Você também pode adicionar a regra a uma folha de estilo existente usada pela página.

blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid #477080;
}

A citação ganha uma borda esquerda e espaçamento interno. Se você adicionar cores de fundo ou de texto, mantenha um contraste legível. Não marque conteúdo comum, não citado, como bloco de citação apenas para obter essa aparência. Veja a definição de bloco de citação do HTML Standard e a referência de bloco de citação da MDN para sua sintaxe e condições de uso.