La balise HTML <blockquote>
Apprenez la balise HTML <blockquote> pour citer du contenu issu d'une autre source, l'attribut cite, l'attribution avec <footer> et le style.
La balise HTML <blockquote> marque un bloc de texte cité depuis une autre source — un article, un livre, un discours, un autre site web. C'est un élément sémantique, pas un outil de mise en forme : il indique aux navigateurs, aux moteurs de recherche et aux technologies d'assistance que le contenu inclus est une citation, ce qui peut influencer l'indexation de la page et la façon dont elle est annoncée aux utilisateurs de lecteurs d'écran.
Les navigateurs affichent <blockquote> avec des marges gauche et droite par défaut. Cette indentation est pratique, mais ce n'est pas le but de l'élément. Utiliser <blockquote> uniquement pour indenter du texte est une mauvaise pratique — cela ajoute une fausse signification à votre balisage. Lorsque vous avez seulement besoin d'une indentation visuelle, utilisez CSS (margin, padding) sur un <div> ou un <p> à la place.
<blockquote> est un élément de niveau bloc et peut contenir d'autres contenus de type bloc : des paragraphes, des listes, des titres, et un <footer> pour l'attribution. Il est placé à l'intérieur de la balise <body>.
Quand utiliser <blockquote> plutôt que <q>
Utilisez <blockquote> pour les longues citations autonomes qui forment leur propre bloc. Utilisez la balise en ligne <q> pour les courtes citations intégrées dans une phrase — les navigateurs enveloppent automatiquement le contenu de <q> dans des guillemets, tandis que <blockquote> n'ajoute pas de guillemets.
Pour les courtes citations en ligne à l'intérieur d'un paragraphe, préférez la balise <q>.
Syntaxe
La balise <blockquote> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<blockquote>) et la balise fermante (</blockquote>).
Exemple de la balise HTML <blockquote> :
Balise HTML <blockquote>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
</body>
</html>Le modèle d'attribution : <blockquote> avec <footer> et <cite>
Un <blockquote> sans attribution n'indique pas au lecteur qui a prononcé ces mots ni d'où provient la citation. La façon recommandée et accessible d'attribuer une citation est de faire suivre la citation d'un <footer> contenant un <cite> visible pour la source :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>
— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite>
</footer>
</blockquote>
</body>
</html>L'élément <cite> s'affiche en italique par défaut et désigne l'œuvre citée. Comme il fait partie du texte de la page, tous les lecteurs le voient — contrairement à l'attribut cite de <blockquote>, expliqué ci-dessous.
Exemple de la balise HTML <blockquote> utilisée avec la balise <q> :
Exemple de la balise HTML <blockquote> avec la balise HTML <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll</p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
<q cite="https://www.wikiquote.org/">He who can, does, he who cannot, teaches.</q>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| cite | URL | Spécifie le document source ou le message dont la citation est tirée. La valeur peut être une URL relative ou absolue. |
La balise <blockquote> prend également en charge les Attributs globaux et les Attributs d'événement.
L'attribut cite est lisible uniquement par les machines
Il est facile de confondre l'attribut cite avec l'élément <cite>. La limitation principale de l'attribut cite est que son URL n'est pas affichée aux utilisateurs — les navigateurs ne le rendent pas comme un lien visible. Il existe uniquement pour les machines : moteurs de recherche, scripts et autres outils qui lisent le code source de la page.
<blockquote cite="https://example.com/source">
This URL is in the markup, but no reader will ever see or click it.
</blockquote>C'est pourquoi l'attribut cite ne remplace pas une attribution visible. Pour créditer une source auprès des lecteurs humains, ajoutez un élément <cite> visible (généralement à l'intérieur d'un <footer>, comme montré ci-dessus). Utilisez les deux ensemble : l'attribut pour les machines, l'élément pour les personnes.
Accessibilité
Les lecteurs d'écran n'annoncent généralement pas qu'un <blockquote> est une citation, et ils ignorent complètement l'attribut cite. Ainsi, si la seule chose qui marque votre texte comme une citation est l'indentation ou l'attribut cite, un utilisateur non-voyant n'a aucun moyen de savoir qu'il s'agit d'une citation.
À retenir en pratique :
- Accompagnez chaque
<blockquote>d'une attribution visible (un<footer>et<cite>) afin que la source fasse partie du contenu lisible. - Ne vous fiez pas uniquement à l'attribut
citepour communiquer la source. - N'utilisez jamais
<blockquote>pour du contenu non cité dans le seul but d'obtenir une indentation — cela donne des informations trompeuses aux utilisateurs de lecteurs d'écran (et aux moteurs de recherche).
Comment mettre en forme la balise <blockquote>
Par défaut, les navigateurs indentent <blockquote> avec des marges. Un schéma courant consiste à supprimer cette valeur par défaut et à ajouter une bordure gauche colorée, du rembourrage et une mise en italique pour faire ressortir la citation :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
margin: 1em 0;
padding: 0.5em 1.5em;
border-left: 4px solid #1c8d27;
background-color: #f4f4f4;
font-style: italic;
color: #333;
}
blockquote footer {
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite></footer>
</blockquote>
</body>
</html>Pour contrôler uniquement l'indentation, utilisez la propriété abrégée margin-left, margin-right ou margin.