La balise HTML <cite>
La balise HTML <cite> marque le titre d'une œuvre créative, comme un livre, un film ou une chanson. Découvrez son usage, ses attributs et des exemples.
La balise <cite> marque le titre d'une œuvre créative — un livre, un article, une chanson, un film, une peinture, une sculpture, une émission de télévision, un site web, etc. C'est un élément sémantique en ligne (au niveau du texte) : il indique au navigateur et aux technologies d'assistance que le texte encadré est une œuvre référencée, et non du texte ordinaire.
Utilisez l'élément <blockquote> pour les longues citations et l'élément <q> pour les citations courtes et en ligne.
L'élément <cite> et l'attribut cite
Ces deux éléments prêtent facilement à confusion car ils partagent le même nom, mais ils remplissent des fonctions différentes :
- L'élément
<cite>encadre le titre d'une œuvre sous forme de texte sur la page (par exemple,<cite>Le Seigneur des anneaux</cite>). Il est visible par les lecteurs. - L'attribut
citeest une chose à part — il prend une URL qui pointe vers la source d'une citation, et il s'utilise sur les éléments<blockquote>et<q>(par exemple,<blockquote cite="https://example.com/source">). C'est une métadonnée ; la plupart des navigateurs ne l'affichent pas.
En résumé : l'élément désigne l'œuvre, l'attribut renvoie vers l'URL source.
L'élément <cite> doit-il inclure le nom de l'auteur ?
Les spécifications divergent légèrement. L'ancienne spécification W3C HTML 5.2 permet qu'une citation inclue le nom de l'auteur. La norme WHATWG HTML Living Standard actuelle stipule que <cite> ne doit contenir que le titre de l'œuvre, et non le nom de l'auteur.
En pratique, suivez les recommandations de WHATWG : placez le titre à l'intérieur de <cite> et écrivez le nom de l'auteur en texte brut à l'extérieur.
<p><cite>Pride and Prejudice</cite> was written by Jane Austen.</p>Syntaxe
La balise <cite> fonctionne par paires. Le contenu est écrit entre les balises ouvrante <cite> et fermante </cite>.
Exemple de la balise 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>Combiner <cite> avec une citation
Un modèle courant et complet consiste à citer une source avec <blockquote> (en utilisant son attribut cite pour l'URL de la source) et à nommer l'œuvre avec l'élément <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 même idée fonctionne en ligne avec <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> porte une signification sémantique : il identifie le titre d'une œuvre référencée afin que les lecteurs d'écran et autres outils puissent le reconnaître. N'utilisez pas <i> ou une règle CSS font-style: italic pour simplement mettre un titre en italique — l'aspect italique est purement présentationnel, tandis que <cite> indique ce qu'est le texte. Le sens est l'essentiel ; le style est secondaire et peut être modifié librement.
Attributs
L'élément <cite> ne possède aucun attribut spécifique. Il prend en charge les attributs globaux et les attributs d'événement.
Notez que <cite> ne prend pas en charge href. Pour lier un titre à sa source, enveloppez le <cite> dans un élément <a> :
<p>According to <cite><a href="https://example.com/source">The Art of Sculpting</a></cite>, Michelangelo...</p>Mise en forme de <cite>
Par défaut, les navigateurs affichent le texte <cite> en italique. Vous pouvez modifier cela avec la propriété CSS font-style :
cite {
font-style: normal;
}Éléments sémantiques en ligne associés
<q>— une courte citation en ligne, avec un attributcitepour l'URL source.<abbr>— marque une abréviation ou un acronyme.<dfn>— marque l'instance définitoire d'un terme.