Les citations en HTML avec blockquote, cite et q

Il existe plusieurs éléments HTML pour structurer la sémantique de citations dans un document web :

• blockquote - depuis HTML 3.2
• cite - depuis HTML 3.2
• q - depuis HTML 4

Chacun possède bien entendu un rôle différent et parfois des attributs spécifiques.

cite

Débutons par l'élément cite qui va contenir le titre d'une œuvre à laquelle une citation est faite. Il peut d'ailleurs être utilisé à l'intérieur d'un élément blockquote (ci-après) pour donner une référence à la source de la citation sous la forme du nom de l'oeuvre d'où elle provient.

Les oeuvres possibles sont nombreuses, il peut s'agir d'un livre, un film, une oeuvre d'art (peinture, sculpture, opéra, pièce de théâtre, poème, exposition...), un jeu, une chanson, un autre site web, le titre d'un article/blog, etc.

<cite>Le Rouge et le Noir</cite> - Stendhal
<cite>La Bohème</cite> - Giacomo Puccini
<cite>Papillon de lumière</cite> - Cindy Sander
<cite>Zelda Tears of the Kingdom</cite>

blockquote

L'élément blockquote (littéralement traduisible par "bloc de citation") structure une section de contenu qui est citée d'un autre document ou d'une autre source. Son contenu est souvent affiché avec des marges plus larges pour le différencier du contenu environnant. C'est d'ailleurs un élément de type bloc, qui occupe toute la largeur par défaut et provoque des retours à la ligne dans le flux naturel du document. On peut également - mais ce n'est pas obligatoire - utiliser des paragraphes <p> dans le bloc.

<blockquote>
  <p>Mais qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !</p>
</blockquote>

L'élément blockquote peut posséder un attribut cite (à ne pas confondre avec l'élément du même nom) comprenant une URL vers la source originale de la citation.

<blockquote cite="https://fr.wikiquote.org/wiki/La_Folie_des_grandeurs">
  <p>Mais qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !</p>
</blockquote>

À faire / à ne pas faire ?

Nombreux sont les sites qui n'exploitent pas la sémantique à son plein potentiel, souvent parce que l'outil de contribution (CMS) ne le suggère pas assez ou ne le permet pas.

Par exemple Radio France : Margaret Hamilton, la femme qui a fait atterrir l’Homme sur la Lune utilise une liste avec une seule puce pour structurer une citation :

<ul><li><em>"Ce qu’ils avaient l’habitude [...] J’étais la première à le faire marcher."</em></li></ul>

En voici la capture d'écran :

⚠️ D'un point de vue sémantique et pour l'accessibilité, ce n'est évidemment pas reconnu comme un paragraphe de citation mais comme un élément de liste (listitem). L'usage de em ne suffit pas, même si visuellement cela peut faire illusion.

Autre exemple, Wikipédia utilise mieux l'élément <blockquote> qui par ailleurs se distingue bien visuellement du reste grâce aux styles associés (police différente, bordure, marges).

Voici la capture d'écran issue de la page Margaret Hamilton :

Pour la mention de l'autrice et de l'oeuvre, on retrouve un balisage à l'aide de <cite>, décrit ci-après (code simplifié pour la lisibilité) :

<p>
  —&nbsp;Margaret Hamilton,
  <cite>
    Lettre à <i>Datamation</i>,
    <abbr title="Premier">1<sup>er</sup></abbr> mars 1971
    <sup><a href="#cite_note-13">[13]</a></sup>
  </cite>
</p>

Du côté de la NASA (agence spatiale des États-Unis), une structure similaire est adoptée mais en choisissant cette fois de placer <cite> dans une balise <footer> du bloc de citation... ce qui n'est pas interdit en soi.

<blockquote>
  <div>
    We had to find a way and we did. Looking back, we were the luckiest people in the world; there was no choice but to be pioneers.
  </div>
  <footer>
    <cite>- Margaret Hamilton</cite>
  </footer>
</blockquote>

⚠️ Par contre <cite> contient le nom d'une personne (Margaret Hamilton), ce qui n'est pas attendu par la spécification HTML qui précise bien que...

Le nom d'une personne n'est pas le titre d'une œuvre — même si les gens appellent cette personne une œuvre — et l'élément ne doit donc pas être utilisé pour baliser les noms des personnes.

👆 Oui la citation que vous venez de lire est bien dans <blockquote> sur cette page et utilise un attribut cite vers la page de la spécification.

Voici la capture d'écran du site de la NASA :

Si l'on retrouve notre premier exemple, cette fois <cite> peut être utilisé à bon escient pour baliser le nom de l'oeuvre (un film).

<blockquote cite="https://fr.wikiquote.org/wiki/La_Folie_des_grandeurs">
  <p>Mais qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !</p>
  <p>Louis de Funès - <cite>La Folie des grandeurs</cite> (1971), écrit par Gérard Oury</p>
</blockquote>

Si l'on veut aller plus loin dans la structuration du contenu, il faudra jeter un oeil du côté des microdonnées avec Schema.org qui propose un type Quotation utilisable avec JSON-LD, Microdata et RDFa.

q

L'élément q représente une petite citation en ligne (son nom vient de la première lettre du mot quote qui signifie - encore une fois - citation en anglais), relativement courte qui ne nécessite pas de sauts de ligne. Le contenu de l'élément q est généralement affiché entre des guillemets courts. Si vous avez besoin de structurer une citation plus longue, reportez-vous sur blockquote.

<p>Ce freluquet m'a répliqué <q>Il m'en a assez dit. Il m'a dit que vous l'aviez tué.</q></p>
<p>Et là, je lui ai répondu <q>Je suis ton père</q>.</p>

L'élément q peut posséder un attribut cite (à ne pas confondre avec l'élément du même nom) qui contiendra alors une URL vers la source originale de la citation.

<p>Maître Eolas a publié sur son blog
  <q cite="https://www.maitre-eolas.fr/post/2023/02/04/Les-raisons-de-la-col%C3%A8re">
  Rien de tel dans ces cas que de coucher sur le papier, fut-il fait de pixels, l'explication de son ire,
  et la soumettre aux débats qui font de la section commentaires le meilleur de ce blog.
  C'est toujours ça qu'Elon Musk n'aura pas.</q>
</p>

À faire / à ne pas faire ?

Retrouvons la page du site Radio France où pour une citation en ligne, dans un paragraphe de texte plus général, on aurait pu utiliser <q> à cet effet, mais où l'on retrouve finalement une emphase <em>.

<p>[...] Le Dr Paul Corto, qui l'a nommée pour la récompense se déclare "<em>surpris de découvrir qu'elle n'avait jamais été officiellement reconnue pour ses travaux pionniers. Ses concepts de logiciel asynchrone, de programmation des priorités, de tests de bout en bout et de capacité de décision humaine, comme l’affichage des priorités, ont posé les bases de la conception de logiciels ultra-fiables</em>". Non seulement Margaret Hamilton [...]</p>

En voici la capture d'écran :

TL;DR ?

On résume : cite pour les noms d'oeuvres, blockquote pour les blocs de citations (plus ou moins longs) et q pour les citations courtes en-ligne dans un paragraphe de texte.