Élément HTML q : citations courtes, sources cite et guillemets

L'élément HTML q marque une courte citation dans une phrase. Les navigateurs ajoutent généralement des guillemets automatiquement, et l'attribut cite peut enregistrer l'URL de la source. Cet attribut ne crée pas de lien source cliquable, il faut donc fournir un lien séparé dans le texte lorsque les lecteurs en ont besoin.

Comment q, blockquote et cite diffèrent

Utilisez q lorsque vous citez des mots provenant d'une autre source dans le flux d'une phrase. Pour une citation séparée contenant plusieurs paragraphes, utilisez une citation en bloc avec blockquote. N'utilisez pas q simplement pour mettre en valeur un mot ou ajouter des guillemets ironiques.

Un exemple complet avec une source et une citation imbriquée

Enregistrez le code complet ci-dessous sous inline-quote.html et ouvrez-le dans un navigateur. La première citation est une courte phrase tirée de la norme HTML. La seconde est un dialogue fictif écrit pour démontrer les guillemets imbriqués. Aucun serveur ni JavaScript n'est requis.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q et les sources des citations</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    q { quotes: '“' '”' '‘' '’'; }
    a { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Citations courtes et sources</h1>
  <p>Le standard HTML décrit le contenu représenté par q comme <q lang="en" cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">some phrasing content quoted from another source</q>.</p>
  <p>Source : <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element" target="_blank" rel="noopener noreferrer"><cite>HTML Standard, q element</cite></a></p>
  <p>Dialogue fictif : l’élève a dit : <q>Le panneau indique <q>Veuillez fermer la porte</q></q>.</p></body>
</html>

La première citation reste dans le même paragraphe que l'explication qui l'entoure et est encadrée par des guillemets. Dans le dialogue fictif, les guillemets doubles entourent la citation extérieure et les guillemets simples entourent la citation intérieure. Le titre de la source liée apparaît dans son propre paragraphe ; l'adresse dans l'attribut cite de q n'est pas affichée automatiquement.

Évitez d'ajouter des guillemets en double.

Si vous tapez des guillemets immédiatement avant, après ou à l'intérieur de q pour entourer la même citation, ils peuvent dupliquer la ponctuation générée par le navigateur. L'exemple place uniquement les mots cités à l'intérieur de q et laisse les guillemets au navigateur. Vous pouvez également écrire les guillemets manuellement en texte brut sans q, mais ne combinez pas les deux ensembles de guillemets pour la même citation.

Les marques par défaut peuvent varier selon la langue du document ou de l'élément et les styles du navigateur. La règle CSS quotes de l'exemple définit explicitement les paires extérieures et intérieures afin que vous puissiez comparer clairement les résultats. Supprimez cette règle pour comparer les valeurs par défaut, puis rétablissez-la. Modifier l'apparence ne supprime pas la signification de l'élément q comme citation.

Rendre la source disponible aux lecteurs

L'attribut cite est facultatif. Utilisez une adresse qui fournit le passage original ou son contexte, plutôt qu'une page d'accueil non liée. Si les lecteurs doivent lire l'original, fournissez également un élément a avec un texte de lien spécifique, comme dans l'exemple. Copiez le libellé vérifié avec précision et distinguez la citation de votre propre explication.

Ne supposez pas que tous les lecteurs d’écran annoncent le début et la fin d’une citation q de la même manière. Lorsque l’attribution est importante, indiquez qui a dit quoi dans la phrase elle-même, par exemple : « La norme décrit … ». Pour les définitions et les conditions d’utilisation, consultez la définition de q dans le standard HTML et la référence q de MDN.