CodeGym /Cursos /Frontend SELF PT /Tags de citação

Tags de citação

Frontend SELF PT
Nível 4 , Lição 4
Disponível

4.1 Elemento <blockquote>

No HTML, existem tags especiais para formatar citações: <blockquote>, <cite>, e <q>. Cada uma dessas tags tem um propósito específico e é usada para diferentes tipos de citação e referências a fontes.

A tag <blockquote> é usada para destacar grandes blocos de texto citado. Os navegadores normalmente exibem essas citações com uma margem à esquerda para destacá-las do texto principal.

Exemplo de uso:

HTML
    
      <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
      </blockquote>
    
  

Características:

  • É um elemento de bloco
  • Frequentemente exibido com margem à esquerda
  • Pode conter outros elementos de bloco e inline
  • Pode usar o atributo cite para indicar o URL da fonte da citação

Atributo cite:

O atributo cite na tag <blockquote> é utilizado para indicar a fonte da citação. Embora este atributo não seja exibido visualmente, ele ajuda a manter a informação sobre a origem da citação, o que é útil para mecanismos de busca e outras sistemas automatizados de processamento de texto.

Exemplo com atributo cite:

HTML
    
      <blockquote cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
      </blockquote>
    
  

4.2 Elemento <cite>

A tag <cite> é usada para indicar a fonte de uma citação ou o título de uma obra, como livro, artigo, filme, etc. O texto dentro da tag <cite> geralmente é exibido em itálico.

Exemplo de uso:

HTML
    
      <p>Fonte da citação: <cite>Franklin D. Roosevelt</cite></p>
    
  

Características:

  • É um elemento inline
  • Normalmente exibido em itálico
  • Usado para indicar fontes de citações ou títulos de obras

Exemplo com <blockquote> e <cite>:

HTML
    
      <blockquote  cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>— Franklin D. Roosevelt</cite>
      </blockquote>
    
  

4.3 Elemento <q>

A tag <q> é usada para destacar citações curtas, incorporadas no texto. Os navegadores adicionam automaticamente aspas ao redor do texto contido na tag <q>.

Exemplo de uso:

HTML
    
      <p>Como disse Albert Einstein, <q>Imaginação é mais importante que conhecimento</q>.</p>
    
  

Características:

  • É um elemento inline
  • Adiciona automaticamente aspas à citação
  • Usado para citações curtas, incorporadas ao texto principal

Atributo cite para <q>:

O atributo cite na tag <q> também é usado para indicar o URL da fonte da citação.

Exemplo com atributo cite:

HTML
    
      <p>Como disse Albert Einstein, <q cite="https://example.com/einstein-quote">Imaginação é mais importante que conhecimento</q>.</p>
    
  

Uso combinado de tags de citação

Essas tags podem ser usadas em conjunto para criar um conteúdo mais estruturado e informativo.

HTML
    
      <h1>Exemplo de uso de tags de citação</h1>
      <p>
        Como disse Albert Einstein, <q cite="https://example.com/einstein-quote">Imaginação é mais importante que conhecimento</q>.
      </p>
      <blockquote cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>— Franklin D. Roosevelt</cite>
      </blockquote>
    
  

As tags <blockquote>, <cite>, e <q> são importantes para a formatação correta de citações em HTML. Essas tags suportam tanto o destaque visual das citações quanto o significado semântico, o que é importante para mecanismos de busca e sistemas automatizados de processamento de texto.

Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION