La balise HTML <q>
La balise <q> est un élément inline pour les citations courtes. Description, attributs et exemples d'utilisation.
La balise <q> est un élément inline utilisé pour les courtes citations s'intégrant dans le flux d'une phrase et ne s'étendant pas sur plusieurs lignes. La particularité de <q> est que les navigateurs ajoutent automatiquement des guillemets autour du contenu — vous ne devez pas saisir vous-même les guillemets.
Pour les citations plus longues et autonomes qui forment leur propre paragraphe, utilisez plutôt l'élément de niveau bloc <blockquote>.
Cette page explique quand utiliser <q>, en quoi il diffère de <blockquote>, l'attribut cite, et la manière propre à <q> de personnaliser les guillemets insérés grâce à la propriété CSS quotes.
Syntaxe
La balise <q> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<q>) et la balise fermante (</q>).
Exemple de la balise HTML <q> :
Balise HTML <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Bernard Show says:
<q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q>
</p>
</body>
</html>Résultat
<q> vs <blockquote>
Les deux éléments balisent du contenu cité, mais ils servent des objectifs différents :
<q> | <blockquote> | |
|---|---|---|
| Affichage | Inline — s'intègre dans une phrase | Niveau bloc — son propre bloc indenté |
| Longueur | Citations courtes | Citations longues et autonomes |
| Guillemets | Le navigateur les insère automatiquement | Aucun ajouté ; vous les fournissez si nécessaire |
Attribut cite | Pris en charge (URL de la source) | Pris en charge (URL de la source) |
Utilisez <q> lorsque la citation se trouve dans un texte courant, et <blockquote> lorsqu'elle est isolée. Ne tapez pas de guillemets à l'intérieur de <q> — le navigateur les fournit, les vôtres produiraient des guillemets doublés.
Exemple utilisant à la fois <q> et <blockquote> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>As the proverb goes, <q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q></p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
"We're all mad here. I'm mad. You're mad," said the Cheshire Cat.
</blockquote>
</body>
</html>Remarquez que le texte <q> apparaît avec les guillemets ajoutés par le navigateur, tandis que le texte <blockquote> est présenté comme un bloc indenté sans guillemets.
L'attribut cite vs l'élément <cite>
Ces deux fonctionnalités aux noms similaires sont faciles à confondre :
- L'attribut
cite(<q cite="...">) contient une URL lisible par la machine pointant vers la source de la citation. Il n'est pas affiché par le navigateur — il existe pour les moteurs de recherche, les lecteurs d'écran et les scripts. - L'élément
<cite>est du texte visible utilisé pour baliser le titre d'une œuvre référencée (un livre, une chanson, un film, un article). Il s'affiche en italique par défaut.
Vous pouvez utiliser les deux ensemble — l'attribut cite pour la source lisible par la machine, et un élément <cite> visible pour la référence lisible par l'humain :
<p>
<q cite="https://www.gutenberg.org/ebooks/11">We're all mad here.</q>
— <cite>Alice's Adventures in Wonderland</cite>
</p>Guillemets automatiques
Les guillemets autour du contenu <q> ne font pas partie du HTML — les navigateurs les ajoutent via CSS, en utilisant les pseudo-éléments ::before et ::after avec les valeurs content: open-quote et content: close-quote. La feuille de style par défaut du navigateur ressemble approximativement à ceci :
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Modifier les guillemets avec la propriété CSS quotes
Puisque les guillemets proviennent de open-quote/close-quote, la façon propre à <q> de les personnaliser est la propriété CSS quotes. Elle vous permet de définir les caractères à utiliser sans toucher au HTML :
<style>
q {
quotes: "«" "»";
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>Pour supprimer entièrement les guillemets, définissez quotes: none.
Éléments <q> imbriqués
Lorsque vous imbriquez un <q> dans un autre, les navigateurs alternent automatiquement entre les styles de guillemets extérieurs et intérieurs (par exemple, guillemets doubles à l'extérieur et guillemets simples à l'intérieur). La propriété quotes accepte une deuxième paire de chaînes pour le niveau imbriqué :
<style>
q {
quotes: '"' '"' "'" "'";
}
</style>
<p>
<q>The teacher said, <q>He who can, does.</q></q>
</p>La première paire ('"' '"') stylise le niveau externe, et la deuxième paire ("'" "'") stylise le niveau imbriqué.
L'attribut lang et les guillemets spécifiques à la langue
Les guillemets varient selon les langues — l'anglais utilise "…", le français utilise «… », l'allemand utilise „…". Les navigateurs choisissent les guillemets appropriés en fonction de la langue de l'élément, donc définir l'attribut lang sur <q> (ou un ancêtre) produit automatiquement des guillemets adaptés à la langue :
<p lang="fr"><q>Bonjour le monde</q></p>
<p lang="de"><q>Hallo Welt</q></p>Dans un contexte français, le navigateur affiche les guillemets («… »), et dans un contexte allemand, les guillemets bas-haut („…").
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| cite | URL | Une URL lisible par la machine pointant vers la source de la citation. Elle n'est pas affichée à l'utilisateur. |
| lang | code-langue | Spécifie la langue du contenu, ce qui détermine les guillemets spécifiques à la langue. |
La balise <q> prend également en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <q>
Puisque les guillemets sont générés par open-quote/close-quote, le contrôle de style le plus spécifique à <q> est la propriété CSS quotes :
<style>
q {
quotes: "‹" "›";
font-weight: bold;
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>