Ajouter des citations sur une page web

Cet article illustre comment citer quelqu'un de façon précise et en fournissant la source de la citation.

Prérequis :	Vous devriez vous être familiarisé-e avec la création de documents HTML simples.
Objectifs :	Apprendre comment intégrer des citations et leurs sources.

Très souvent, nous évoquons ce qui a été dit ou écrit par d'autres. Nous construisons des arguments logiques à partir de ces textes, notamment en littérature technique, en journalisme ou en philosophie. Étant donné que ce sont les scientifiques qui ont conçu HTML, il existe les mécanismes nécessaires pour faire des citations dans un document HTML.

HTML permet de gérer trois scénarios liés aux citations :

fournir un extrait complet d'un document tiers
citer une seule phrase ou un seul terme
faire référence à un document tiers

Comment rapporter exactement les mots d'une personne

Citation en ligne

HTML fournit l'élément <q> qui permet de créer des citations en ligne. Cela signifie qu'il s'agit de citations suffisamment courtes pour qu'elles puissent être placées dans le cours du texte.

<p>
  Si vous lisez Cicéron dans la version latine, vous trouverez
  un passage connu&nbsp;: <q lang="la">qui dolorem ipsum quia 
  dolor sit amet consectetur adipisci velit.</q>
</p>

Voilà le résultat qu'on obtient avec un tel code :

<q> ne doit pas être utilisé pour écrire des titres d'articles ou de chapitres ou pour mettre un terme en exergue. Si vous avez besoin d'utiliser des guillemets à cet effet, il faudra les écrire manuellement :

C'est « Wingardium Leviôsa » et non « Wingardium Leviosâ ».

Les entités HTML « et » permettent de représenter les guillemets. Il faudra utiliser “ et ” pour les doubles quotes et ‘ et ’ pour les simples quotes.

Par défaut, les navigateurs web utilisent le symbole de citation approprié pour la langue utilisée. Si vous souhaitez surcharger la mise en forme par défaut, vous pouvez utiliser la propriété CSS quotes. Par exemple, la règle CSS qui suit imposera les guillemets français :

:lang(fr) > q {
  quotes: '« ' ' »';
}

Extrait complet

HTML fournit également l'élément <blockquote> pour les citations en bloc (c'est-à-dire les citations suffisamment longues pour qu'elles méritent leurs propres paragraphes). Dans l'exemple suivant, on voit qu'on a plusieurs paragraphes au sein d'une même <blockquote> :

<p>Les mots employés par Cicéron sont devenus un 
charabia pour simuler du texte mais à l'origine, ils
n'étaient pas dénués de sens, loin de là&nbsp;:</p>

<blockquote>
  <p>
    Il n'y personne qui recherche ou désire obtenir la
    douleur en tant que telle car il s'agit de la douleur.
    Toutefois, occasionnellement, il exist des circonstances
    selon lesquelles la peine et la douleur peuvent fournir
    un grand plaisir.
  </p>

  <p>
    Le sage s'en tient donc, sur ces sujets, au principe
    de sélection : il rejette le plaisir afin de s'assurer de
    de plus grands plaisir ou alors, il endure certaines
    douleurs pour s'en prémunir de plus grandes.
  </p>
</blockquote>

Dans ce cas, la mise en forme appliquée par défaut par le navigateur web est une marge plus large à gauche. Là encore, vous pouvez ajuster la mise en forme à votre convenance en utilisant la propriété CSS margin.

Comment fournir la source d'une citation

Source implicite

Citer c'est bien, indiquer les sources c'est encore mieux. De cette façon, une source indépendante peut vérifier que la citation est correcte, voire fournir un contexte plus large pour la citation. À cet effet, l'attribut cite permet d'indiquer l'URL de la source, que ce soit pour un élément <q> ou pour un élément <blockquote> :

<q cite="https://fr.wikiquote.org/wiki/Hom%C3%A8re">Patience, mon cœur !</q>

En pratique, les personnes ne trouvent que très rarement cette information de source (sauf s'ils lisent le code source HTML). On peut donc préférer un lien direct dans la citation :

<q><a href="https://fr.wikiquote.org/wiki/Hom%C3%A8re">Patience, mon cœur !</a></q>

Source explicite

Pour indiquer de façon explicite l'origine de la citation, il est possible d'utiliser l'élément <cite>. Cet élément peut indiquer l'auteur de la citation ou l'œuvre créative de laquelle elle provient.

<p>
  <q>La pensée est libre</q>,
  <cite id="author">Cicéron</cite> dans
  <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>.
</p>

Pour accentuer le caractère explicite de la relation entre la citation et sa source, il est également possible d'ajouter l'attribut aria-labelledby :

<p>
  <q aria-labelledby="author work">La pensée est libre</q>,
  <cite id="author">Cicéron</cite> dans
  <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>.
</p>