HTML quote: Como fazer citações em HTML

HTML quotes, ou citações HTML, são usadas para incluir trechos de um ou mais textos em uma página web. De­pen­dendo do contexto e da fi­na­li­dade da citação, você pode optar por uma dessas tags: <blockquote>, <q> ou <cite>. Além de facilitar a leitura, citações ajudam a melhorar a semântica da página e a oti­mi­za­ção para os me­ca­nis­mos de busca, e con­tri­buem para uma melhor ex­pe­ri­ên­cia do usuário.

O que é HTML quote?

Citações em HTML são elementos es­pe­cí­fi­cos que servem para iden­ti­fi­car e exibir trechos extraídos de textos de maneira or­ga­ni­zada. As prin­ci­pais HTML tags usadas em citações são <blockquote> e <q>. Por outro lado, <cite> e o atributo cite são usados para indicar a fonte dos trechos citados. Assim como tabelas HTML e listas HTML, essas tags tornam o texto mais fluido e vi­su­al­mente in­te­res­sante.

O uso de tags de citação não só melhora a aparência do texto, mas também contribui para uma estrutura semântica mais robusta. Motores de busca conseguem com­pre­en­der o sig­ni­fi­cado das citações, o que melhora a indexação e a aces­si­bi­li­dade do conteúdo.

Tipos de tags HTML quote

A forma adequada de integrar uma citação em um documento HTML depende da tag escolhida. A seguir, apre­sen­ta­mos as três variantes possíveis para você e as aplicamos em exemplos.

Tag HTML <q>: Citação em linha

A tag HTML <q> permite integrar citações di­re­ta­mente ao texto, marcando-as com aspas. Dessa forma, não é ne­ces­sá­rio in­ter­rom­per o fluxo contínuo do conteúdo, e ainda é possível destacar vi­su­al­mente o trecho citado, direta ou in­di­re­ta­mente, para os leitores. Como as aspas são inseridas au­to­ma­ti­ca­mente no início e no fim do trecho ao usar a tag <q>, não há ne­ces­si­dade de adicioná-las ma­nu­al­mente. Citações com a tag <q> são ge­ral­mente uti­li­za­das para trechos curtos ou fala direta, em que a con­ti­nui­dade do texto deve ser mantida.

O seguinte exemplo apresenta a sintaxe:

<p>Este é um exemplo de texto com uma <q>citação curta</q> integrada.</p>

O navegador insere as aspas au­to­ma­ti­ca­mente no início e no fim da citação.

Tag HTML <blockquote>: Citação em bloco

As citações em bloco são citações que se destacam por meio de um parágrafo recuado ou de uma borda fina. Para di­fe­ren­ciar uma passagem do texto principal, use a tag HTML <blockquote>. Isso ajuda a quebrar o texto, evitando blocos grandes e monótonos, ao mesmo tempo em que enfatiza os pontos prin­ci­pais e apoia de­cla­ra­ções im­por­tan­tes com citações diretas. Além disso, ao usar vários elementos de design, você cria uma estrutura de texto que é com­pa­tí­vel com SEO. As citações em bloco são nor­mal­mente usadas para citações mais longas, mas também podem ser usadas para enfatizar vi­su­al­mente uma frase im­por­tante ou links.

A principal função da tag HTML <blockquote> é instruir os na­ve­ga­do­res a marcar vi­su­al­mente os elementos de texto. Assim, a for­ma­ta­ção final da citação em bloco pode variar de acordo com o navegador. Para per­so­na­li­zar a aparência do bloco, você pode usar atributos HTML ou ins­tru­ções CSS, como padding para o es­pa­ça­mento interno do texto, border para a espessura e a cor da borda ou address para a cor da fonte.

Sintaxe:

<p>Veja abaixo uma citação importante:</p>
<blockquote>
    “Esta é uma citação de exemplo destacada em um bloco.”
</blockquote>

Tag HTML <cite> e atributo cite: Fonte da citação

Ao fazer uma citação, não é im­por­tante apenas marcar o texto como uma citação, mas também indicar a fonte sempre que possível. Isso garante que os leitores com­pre­en­dam ime­di­a­ta­mente de onde o trecho foi retirado. Essa prática não apenas faz parte de um bom estilo de citação, como também reforça sua cre­di­bi­li­dade e trans­pa­rên­cia. Tanto para as tags <q> quanto <blockquote>, é possível utilizar o atributo cite ou o elemento <cite>.

Atributo cite

O atributo cite é usado dentro de um <blockquote> para informar o URL ou outra fonte da citação. Ele não é exibido di­re­ta­mente no navegador, mas pode ser acessado por fer­ra­men­tas como leitores de tela ou me­ca­nis­mos de busca.

Sintaxe:

<p>Veja abaixo uma citação com fonte:</p>
<blockquote cite="https://exemplo.com/fonte">
    “Esta é uma citação retirada de uma fonte confiável.”
</blockquote>

A fonte pode aparecer no texto da seguinte forma:

“Esta é uma citação retirada de uma fonte confiável.” - Fonte: https://exemplo.com/fonte

Tag HTML <cite>

O elemento HTML <cite> é usado para enfatizar o título de uma obra citada no texto, ge­ral­mente exibindo-o em itálico. Iden­ti­fi­car cla­ra­mente suas re­fe­rên­cias e garantir a citação adequada aumenta a trans­pa­rên­cia, melhora a ras­tre­a­bi­li­dade e acres­centa cre­di­bi­li­dade ao seu trabalho.

Sintaxe:

<p>Esta citação foi retirada de <cite>Um Livro Famoso</cite>.</p>

O texto seria exibido como:

“Esta citação foi retirada de Um Livro Famoso.” (Fonte)