Tag HTML <cite>
Il tag HTML <cite> contrassegna il titolo di un'opera creativa come un libro, un film o una canzone. Scopri utilizzo, attributi ed esempi.
Il tag <cite> contrassegna il titolo di un'opera creativa — un libro, un saggio, una canzone, un film, un dipinto, una scultura, un programma televisivo, un sito web e così via. È un elemento semantico inline (a livello di testo): informa il browser e le tecnologie assistive che il testo racchiuso è un'opera di riferimento, non testo ordinario.
Usa l'elemento <blockquote> per le citazioni lunghe e l'elemento <q> per quelle brevi e inline.
L'elemento <cite> e l'attributo cite
I due si confondono facilmente perché condividono il nome, ma svolgono compiti diversi:
- L'elemento
<cite>racchiude il titolo di un'opera come testo visibile nella pagina (ad esempio,<cite>Il Signore degli Anelli</cite>). È visibile ai lettori. - L'attributo
citeè una cosa separata — accetta un URL che punta alla fonte di una citazione e si trova negli elementi<blockquote>e<q>(ad esempio,<blockquote cite="https://example.com/source">). È un metadato; la maggior parte dei browser non lo visualizza.
In sintesi: l'elemento nomina l'opera, l'attributo collega all'URL della fonte.
L'elemento <cite> deve includere il nome dell'autore?
Le specifiche non concordano del tutto. La precedente specifica W3C HTML 5.2 consente di includere il nome dell'autore nella citazione. L'attuale WHATWG HTML Living Standard stabilisce che <cite> debba contenere solo il titolo dell'opera, non il nome dell'autore.
In pratica, segui le indicazioni del WHATWG: inserisci il titolo all'interno di <cite> e scrivi il nome dell'autore come testo normale al suo esterno.
<p><cite>Pride and Prejudice</cite> was written by Jane Austen.</p>Sintassi
Il tag <cite> funziona in coppia. Il contenuto è scritto tra il tag di apertura <cite> e quello di chiusura </cite>.
Esempio del 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>Combinare <cite> con una citazione
Un pattern completo e comune consiste nel citare una fonte con <blockquote> (usando il suo attributo cite per l'URL della fonte) e nominare l'opera con l'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>La stessa idea funziona inline con <q>:
<p>
As the narrator says in
<cite>Moby-Dick</cite>:
<q cite="https://www.gutenberg.org/ebooks/2701">Call me Ishmael.</q>
</p>Accessibilità
<cite> porta con sé un significato semantico: identifica il titolo di un'opera di riferimento in modo che i lettori di schermo e altri strumenti possano riconoscerlo. Non usare <i> o una regola CSS font-style: italic solo per inclinare un titolo — l'aspetto in corsivo è puramente presentazionale, mentre <cite> comunica cosa sia il testo. Il significato è ciò che conta; lo stile è secondario e può essere modificato liberamente.
Attributi
L'elemento <cite> non ha attributi specifici. Supporta gli Attributi Globali e gli Attributi degli Eventi.
Nota che <cite> non supporta href. Per collegare un titolo alla sua fonte, racchiudi il <cite> all'interno di un elemento <a>:
<p>According to <cite><a href="https://example.com/source">The Art of Sculpting</a></cite>, Michelangelo...</p>Stilizzare <cite>
Per impostazione predefinita, i browser visualizzano il testo <cite> in corsivo. Puoi modificarlo con la proprietà CSS font-style:
cite {
font-style: normal;
}Elementi semantici inline correlati
<q>— una breve citazione inline, con un attributociteper l'URL della fonte.<abbr>— contrassegna un'abbreviazione o un acronimo.<dfn>— contrassegna l'istanza definitoria di un termine.