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. Dependendo do contexto e da finalidade 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 otimização para os mecanismos de busca, e contribuem para uma melhor experiência do usuário.

O que é HTML quote?

Citações em HTML são elementos específicos que servem para identificar e exibir trechos extraídos de textos de maneira organizada. As principais 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 visualmente interessante.

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 compreender o significado das citações, o que melhora a indexação e a acessibilidade 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, apresentamos 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 diretamente ao texto, marcando-as com aspas. Dessa forma, não é necessário interromper o fluxo contínuo do conteúdo, e ainda é possível destacar visualmente o trecho citado, direta ou indiretamente, para os leitores. Como as aspas são inseridas automaticamente no início e no fim do trecho ao usar a tag <q>, não há necessidade de adicioná-las manualmente. Citações com a tag <q> são geralmente utilizadas para trechos curtos ou fala direta, em que a continuidade 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 automaticamente 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 diferenciar 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 principais e apoia declarações importantes com citações diretas. Além disso, ao usar vários elementos de design, você cria uma estrutura de texto que é compatível com SEO. As citações em bloco são normalmente usadas para citações mais longas, mas também podem ser usadas para enfatizar visualmente uma frase importante ou links.

A principal função da tag HTML <blockquote> é instruir os navegadores a marcar visualmente os elementos de texto. Assim, a formatação final da citação em bloco pode variar de acordo com o navegador. Para personalizar a aparência do bloco, você pode usar atributos HTML ou instruções CSS, como padding para o espaçamento 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 é importante apenas marcar o texto como uma citação, mas também indicar a fonte sempre que possível. Isso garante que os leitores compreendam imediatamente 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 credibilidade e transparência. 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 diretamente no navegador, mas pode ser acessado por ferramentas como leitores de tela ou mecanismos 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, geralmente exibindo-o em itálico. Identificar claramente suas referências e garantir a citação adequada aumenta a transparência, melhora a rastreabilidade e acrescenta credibilidade 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)