Citações HTML

Já marcou importância e ênfase com tags de formatação. As citações são diferentes: está a repetir as palavras de outra pessoa (ou um trecho de uma obra), e o HTML deve dizê-lo com clareza. Elementos dedicados de citação ajudam navegadores, ferramentas de acessibilidade e leitores a distinguir uma citação da prosa que a rodeia — algo que aspas decorativas sozinhas não comunicam por completo. Quando o documento marca a citação de forma semântica, o significado continua estável mesmo que o aspeto visual mude mais tarde com CSS. Esta sessão liga a formatação que já conhece a um papel novo: atribuir voz e fonte a texto que não é só seu.

O que conta como citação em HTML?

Uma citação é texto que apresenta como vindo de outro falante, escritor ou fonte. Pode ser uma frase curta dentro da sua oração ou um trecho mais longo separado como bloco próprio. O HTML oferece q para o caso curto em linha e blockquote para o caso de bloco mais longo. Ferramentas extra ajudam com fontes: o elemento cite para o título visível de uma obra, e um atributo cite em blockquote para uma URL da fonte legível por máquina. Em resumo: primeiro decida se a citação é inline ou em bloco; depois decida como creditar a origem para humanos e para ferramentas.

Resposta direta

Use q para uma citação curta dentro de uma frase. Use blockquote para uma secção citada mais longa que se sustenta sozinha. Nomeie a obra ou o artigo com o elemento cite no texto visível quando isso ajudar os leitores. Em blockquote, também pode definir cite="https://…" com a URL da fonte — essa URL é para máquinas e normalmente não aparece sozinha como título legível. Se só precisar de aspas tipográficas sem significado de citação, isso é apresentação; se está mesmo a citar alguém, marque o papel no HTML.

Ferramentas de citação num relance

Citações curtas em linha com q

Quando as palavras citadas ficam dentro da sua própria frase, envolva-as em q. A maioria dos navegadores adiciona aspas por si. Continua a escrever as palavras faladas ou escritas entre as tags; em geral não digita aspas curvas decorativas à mão. Mantenha q estreito: só a frase citada, não a narração à volta. Se a citação crescer até várias frases ou precisar de espaço próprio na página, mude para blockquote em vez de forçar um q gigante.

Ler o exemplo

• O p exterior é a sua narração
• q envolve só a frase citada
• Fechar q devolve o resto da frase à prosa normal
• Se isto fosse um excerto longo de várias frases, blockquote seria o encaixe melhor
• O significado da citação fica no elemento, não só nas aspas que o navegador possa desenhar

Passagens mais longas com blockquote

Use blockquote quando a citação é longa o suficiente para formar o seu próprio bloco — muitas vezes um ou mais parágrafos. Coloque o conteúdo citado dentro do blockquote. Um atributo cite pode guardar a URL da fonte. Ponha um título de obra legível por humanos no texto visível com o elemento cite, normalmente perto da citação. É comum aninhar um ou mais p dentro do blockquote para manter a estrutura clara. Não use blockquote só para obter indentação; indentação é apresentação, e CSS trata disso melhor do que um bloco de citação falso.

Porque o atributo cite não chega sozinho

O atributo cite ajuda ferramentas a conhecer a URL da fonte. Muitos visitantes nunca veem valores de atributos. Dê também às pessoas uma linha de crédito legível. Pense no atributo como metadados da fonte e no elemento cite como o crédito que o leitor realmente lê na página. Os dois papéis complementam-se: URL para máquinas, título visível para humanos.

Escolher q vs blockquote

Faça duas perguntas: Quão longa é a citação? Interrompe uma frase ou fica sozinha?

• Frase curta dentro da sua oração → q
• Passagem mais longa como bloco próprio → blockquote
• Título de livro, artigo ou site no texto corrido → elemento cite
• URL da fonte para uma citação em bloco → atributo cite em blockquote
  Não envolva uma página inteira num blockquote gigante só para indentar texto. Indentação é apresentação; blockquote é para citações reais. Se estiver incerto, leia a página em voz alta: se a citação soa como um aparte curto dentro da sua frase, use q; se soa como um bloco citado separado, use blockquote.

Significado vs aspas só de CSS

Pode fingir aspas com CSS ou caracteres " digitados. Para uma citação verdadeira, prefira q ou blockquote para o documento marcar o significado. Marcas visuais ainda podem aparecer — os navegadores costumam estilizar q com aspas — mas o elemento carrega o papel mesmo que uma folha de estilos mude o aspeto depois. Aspas tipográficas sozinhas dizem ao olho “isto parece citado”; q e blockquote dizem ao documento “isto é uma citação”. Essa diferença importa para leitores de ecrã, extratores de conteúdo e futuras mudanças de design.

Prática no seu editor

1. Escreva um parágrafo que inclua uma citação curta em q de um treinador ou professor imaginário.
2. Acrescente um blockquote com duas frases curtas de um artigo imaginário.
3. Por baixo, acrescente uma linha que use cite para nomear o título do artigo.
4. Opcionalmente defina cite="https://example.com/article" no blockquote.
5. Guarde e abra a página. Confirme que a citação em linha e a citação em bloco parecem distintas.
6. Substitua temporariamente o q por texto simples e aspas tipográficas apenas, depois volte a pôr q — note como o papel da marcação difere da decoração sozinha.
   Este exercício curto treina a escolha de elementos e o crédito da fonte juntos, que é o padrão que usará em páginas reais.

Erros que embaciçam as citações

• Envolver a página inteira num blockquote gigante sem citação real
• Usar só CSS ou marcas tipográficas quando o texto é realmente citado e deveria usar q / blockquote
• Colocar o único título da fonte dentro do atributo cite e assumir que os leitores o veem
• Aninhar blockquote dentro de q sem razão clara
• Citar-se a si mesmo só para decoração — reserve estes elementos para palavras realmente citadas
• Esquecer de fechar q ou blockquote para o texto seguinte continuar marcado como citação
• Misturar narração longa dentro de q em vez de limitar o elemento às palavras citadas

Resumo

• Citações curtas dentro de uma frase → q
• Blocos citados mais longos → blockquote
• Títulos de obra visíveis → elemento cite
• URL de fonte opcional → atributo cite em blockquote
• Marque citações reais no HTML; não dependa só do estilo para o significado
• Mantenha as citações honestas: use os elementos quando está mesmo a citar uma fonte
• Dê crédito legível às pessoas e, quando útil, uma URL de fonte às ferramentas