Tag HTML <blockquote>
Aprenda a tag HTML <blockquote> para citar conteúdo de outra fonte, o atributo cite, atribuição com <footer> e estilização.
A tag HTML <blockquote> marca um bloco de texto citado de outra fonte — um artigo, um livro, um discurso, outro site. É um elemento semântico, não uma ferramenta de estilização: informa aos navegadores, mecanismos de busca e tecnologias assistivas que o conteúdo delimitado é uma citação, o que pode afetar como a página é indexada e como é anunciada para usuários de leitores de tela.
Os navegadores renderizam <blockquote> com recuo à esquerda e à direita por padrão. Esse recuo é uma conveniência, não o propósito do elemento. Usar <blockquote> apenas para recuar texto é um antipadrão — adiciona significado falso à sua marcação. Quando você só precisa de recuo visual, use CSS (margin, padding) em um <div> ou <p>.
<blockquote> é um elemento de bloco e pode conter outro conteúdo de bloco: parágrafos, listas, títulos e um <footer> para atribuição. É colocado dentro da tag <body>.
Quando usar <blockquote> vs <q>
Use <blockquote> para citações longas e independentes que formam seu próprio bloco. Use a tag inline <q> para citações curtas que fluem dentro de uma frase — os navegadores envolvem automaticamente o conteúdo de <q> em aspas, enquanto <blockquote> não adiciona aspas.
Para citações curtas e inline dentro de um parágrafo, utilize a tag <q>.
Sintaxe
A tag <blockquote> vem em pares. O conteúdo é escrito entre as tags de abertura (<blockquote>) e fechamento (</blockquote>).
Exemplo da tag HTML <blockquote>:
Tag HTML <blockquote>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
</body>
</html>O padrão de atribuição: <blockquote> com <footer> e <cite>
Um <blockquote> simples não informa ao leitor quem disse as palavras ou de onde a citação veio. A maneira recomendada e acessível de atribuir uma citação é seguir a citação com um <footer> contendo um <cite> visível para a fonte:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>
— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite>
</footer>
</blockquote>
</body>
</html>O elemento <cite> é renderizado em itálico por padrão e nomeia a obra citada. Por fazer parte do texto da página, todos os leitores podem vê-lo — diferentemente do atributo cite em <blockquote>, que é explicado abaixo.
Exemplo da tag HTML <blockquote> usada com a tag <q>:
Exemplo da tag HTML <blockquote> com a tag HTML <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll</p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
<q cite="https://www.wikiquote.org/">He who can, does, he who cannot, teaches.</q>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| cite | URL | Especifica o documento ou mensagem de origem da qual a citação foi retirada. O valor pode ser uma URL relativa ou absoluta. |
A tag <blockquote> também suporta os Atributos Globais e os Atributos de Evento.
O atributo cite é legível apenas por máquinas
É fácil confundir o atributo cite com o elemento <cite>. A principal limitação do atributo cite é que sua URL não é exibida aos usuários — os navegadores não a renderizam como um link visível. Ela existe apenas para máquinas: mecanismos de busca, scripts e outras ferramentas que leem o código-fonte da página.
<blockquote cite="https://example.com/source">
This URL is in the markup, but no reader will ever see or click it.
</blockquote>Por isso, o atributo cite não é substituto para uma atribuição visível. Para creditar uma fonte para leitores humanos, adicione um elemento <cite> visível (normalmente dentro de um <footer>, como mostrado acima). Use ambos juntos: o atributo para máquinas, o elemento para pessoas.
Acessibilidade
Os leitores de tela geralmente não anunciam que um <blockquote> é uma citação e ignoram completamente o atributo cite. Portanto, se o único indicador de que o texto é uma citação for o recuo ou o atributo cite, um usuário sem visão não terá como saber que se trata de uma citação.
A conclusão prática:
- Acompanhe cada
<blockquote>com uma atribuição visível (um<footer>e<cite>) para que a fonte faça parte do conteúdo legível. - Não dependa apenas do atributo
citepara comunicar a fonte. - Nunca use
<blockquote>para conteúdo não citado apenas para obter o recuo — isso transmite informações enganosas para usuários de leitores de tela (e mecanismos de busca).
Como estilizar a tag <blockquote>
Por padrão, os navegadores recuam <blockquote> com margens. Um padrão comum é remover esse padrão e adicionar uma borda colorida à esquerda, preenchimento e itálico para destacar a citação:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
margin: 1em 0;
padding: 0.5em 1.5em;
border-left: 4px solid #1c8d27;
background-color: #f4f4f4;
font-style: italic;
color: #333;
}
blockquote footer {
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite></footer>
</blockquote>
</body>
</html>Para controlar apenas o recuo, use a propriedade abreviada margin-left, margin-right ou margin.