Tag HTML <cite>
A tag HTML <cite> marca o título de uma obra criativa, como livro, filme ou música. Aprenda seu uso, atributos e exemplos.
A tag <cite> marca o título de uma obra criativa — um livro, artigo, música, filme, pintura, escultura, programa de televisão, site, entre outros. É um elemento semântico inline (de nível de texto): informa ao navegador e às tecnologias assistivas que o texto delimitado é uma obra referenciada, e não texto comum.
Use o elemento <blockquote> para citações longas e o elemento <q> para citações curtas e inline.
O elemento <cite> vs. o atributo cite
Os dois são fáceis de confundir porque compartilham o mesmo nome, mas exercem funções diferentes:
- O elemento
<cite>envolve o título de uma obra como texto na página (por exemplo,<cite>The Lord of the Rings</cite>). É visível para os leitores. - O atributo
citeé algo diferente — recebe uma URL que aponta para a fonte de uma citação, e é usado nos elementos<blockquote>e<q>(por exemplo,<blockquote cite="https://example.com/source">). É metadado; a maioria dos navegadores não o exibe.
Em resumo: o elemento nomeia a obra, o atributo vincula à URL da fonte.
O <cite> deve incluir o nome do autor?
As especificações divergem ligeiramente. A especificação W3C HTML 5.2 mais antiga permite que uma citação inclua o nome do autor. O atual WHATWG HTML Living Standard afirma que <cite> deve conter apenas o título da obra, não o nome do autor.
Na prática, siga as diretrizes do WHATWG: coloque o título dentro de <cite> e escreva o nome do autor como texto simples fora do elemento.
<p><cite>Pride and Prejudice</cite> was written by Jane Austen.</p>Sintaxe
A tag <cite> vem em pares. O conteúdo é escrito entre as tags de abertura <cite> e de fechamento </cite>.
Exemplo da tag HTML <cite>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Michelangelo sculpted <cite>David</cite> between 1501 and 1504.</p>
</body>
</html>Combinando <cite> com uma citação
Um padrão completo e comum é citar uma fonte com <blockquote> (usando seu atributo cite para a URL da fonte) e nomear a obra com o elemento <cite>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://www.gutenberg.org/ebooks/2701">
<p>Call me Ishmael.</p>
</blockquote>
<p>— from <cite>Moby-Dick</cite> by Herman Melville</p>
</body>
</html>A mesma ideia funciona inline com <q>:
<p>
As the narrator says in
<cite>Moby-Dick</cite>:
<q cite="https://www.gutenberg.org/ebooks/2701">Call me Ishmael.</q>
</p>Acessibilidade
<cite> carrega significado semântico: identifica o título de uma obra referenciada para que leitores de tela e outras ferramentas possam reconhecê-lo. Não use <i> ou uma regra CSS font-style: italic apenas para inclinar um título — o visual em itálico é apresentacional, enquanto <cite> transmite o que o texto é. O significado é o ponto central; o estilo é secundário e pode ser alterado livremente.
Atributos
O elemento <cite> não possui atributos específicos do elemento. Ele suporta os Atributos Globais e os Atributos de Evento.
Observe que <cite> não suporta href. Para vincular um título à sua fonte, envolva o <cite> dentro de um elemento <a>:
<p>According to <cite><a href="https://example.com/source">The Art of Sculpting</a></cite>, Michelangelo...</p>Estilizando <cite>
Por padrão, os navegadores renderizam o texto <cite> em itálico. Você pode alterar isso com a propriedade CSS font-style:
cite {
font-style: normal;
}Elementos semânticos inline relacionados
<q>— uma citação inline curta, com um atributocitepara a URL da fonte.<abbr>— marca uma abreviação ou acrônimo.<dfn>— marca a instância de definição de um termo.