Em HTML, elementos citados são usados para distinguir texto citado do conteúdo ao redor. Isso dá ao texto entre aspas um formato que é fácil de identificar. Você deve usar o elemento de citação em bloco para representar uma seção citada de outra fonte. É usado principalmente para citações longas. Se a fonte da citação tiver um endereço, você pode citá-la com o atributo cite. O valor deste atributo deve ser uma URL válida. Este é um exemplo de uma citação dentro de um elemento de citação em bloco:

<blockquote cite="https://www.G.E.A.R ACADEMY.org/news/learn-to-code-book/">
  "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"
</blockquote>

Este elemento possui um atributo cite. O valor do atributo cite é a URL da fonte. Embora este atributo não altere a apresentação do bloco de citação, ele é muito útil para fornecer aos leitores de tela e motores de busca mais informações sobre a citação. No navegador, você verá que o texto está ligeiramente indentado. Se você quiser iniciar e terminar o bloco de citação com aspas, pode ser necessário escrevê-las explicitamente dentro do texto. Você pode escrever o texto diretamente dentro do elemento de citação em bloco, como eu acabei de fazer, ou envolvê-lo dentro de um ou mais elementos de parágrafo. Isso é útil quando o texto tem vários parágrafos, mas você quer mantê-los dentro do mesmo bloco de citação. Aqui está um exemplo com quatro parágrafos:

<blockquote cite="https://www.G.E.A.R ACADEMY.org/news/learn-to-code-book/">
  <p>Build your projects. Show them to your friends. Build projects for your friends.</p>
  <p>Build your network. Help the people you meet along the way. What goes around comes around. You'll get what's coming to you.</p>   
  <p>It is not too late. Life is long.</p>
  <p>You will look back on this moment years from now and be glad you made a move.</p>
</blockquote>

Todos os parágrafos estão contidos dentro do mesmo elemento de citação em bloco, então eles fazem parte da mesma citação. Você pode ver que o elemento tem um atributo cite com a URL da fonte. No navegador, você verá que os quatro parágrafos estão alinhados entre si, mas estão indentados em relação ao seu contêiner. Até agora, eu tenho usado o atributo cite para atribuir a fonte da citação, mas o atributo não mostra realmente a fonte para o usuário. Funciona apenas nos bastidores. Se você quiser atribuir a fonte visualmente, pode adicionar um elemento de citação, cite, fora do elemento de citação em bloco. Isto é diferente do atributo cite. O elemento citation é um elemento HTML que você pode usar para marcar o título de uma obra criativa referenciada como um livro, artigo, música, filme, site ou artigo de pesquisa. Aqui está um exemplo:

<div>
  <blockquote cite="https://www.G.E.A.R ACADEMY.org/news/learn-to-code-book/">
    Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
  </blockquote>
  <p>—Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book].</cite></p>
</div>

O elemento de citação em bloco contém texto citado. Abaixo do elemento você pode ver um elemento de parágrafo com o nome do autor, seguido por um elemento de citação. O elemento de citação contém o título do livro de onde a citação foi retirada. Se você for para o navegador, agora a fonte estará claramente visível e verá que a citação vem de um livro escrito por Quincy Larson. O título deste livro é How to Learn to Code and Get a Developer Job. Você deve usar aspas em bloco como estas para citações longas de outras fontes. Mas às vezes você precisará apenas citar algumas palavras dentro de um parágrafo maior. É exatamente para isso que serve o elemento de citação inline. É para citações curtas em linha de outras fontes. A maioria dos navegadores modernos adicionará aspas ao redor da citação inline automaticamente quando você usar este elemento. Este é um exemplo:

<p>
  As Quincy Larson said,
  <q cite="https://www.G.E.A.R ACADEMY.org/news/learn-to-code-book/">
    Momentum is everything.
  </q>
</p>

Você pode ver um elemento de parágrafo que contém texto. Parte do texto é uma citação inline, porque está dentro do elemento de citação inline. Você também pode adicionar um atributo cite para atribuir a fonte. Isso funciona exatamente da mesma forma que funcionava com o elemento de citação em bloco. Não haverá nenhuma mudança visual, mas isso fornecerá aos leitores de tela e motores de busca mais informações sobre a citação. No navegador, você verá que o texto entre aspas faz parte do parágrafo e está cercado por aspas. A maioria dos navegadores modernos adicionará essas aspas automaticamente. Qual é a diferença entre block quotes e inline quotes? Você deve usar aspas em bloco para citações longas de outras fontes e aspas inline para citações curtas de outras fontes que devem fazer parte dos parágrafos existentes.