HTML blockquote : citations en bloc et indication de la source
HTML <blockquote> marque une section autonome citée d'une autre source. Elle peut contenir plusieurs paragraphes. Vous pouvez enregistrer l'URL originale dans son attribut cite et ajouter un lien visible séparé pour que les lecteurs puissent vérifier la source.
Quand devriez-vous utiliser blockquote ?
Utilisez blockquote pour présenter une citation dans une section distincte. Ne l’utilisez pas simplement pour créer un retrait ou changer la couleur d’un paragraphe. Pour une courte citation dans une phrase, utilisez <q> ; consultez la référence de l’élément HTML q.
Une citation en bloc peut contenir des paragraphes et d'autres contenus de flux. Gardez la citation distincte de son attribution : placez l'auteur ou la source en dehors de <blockquote>. Vérifiez le libellé original et n'utilisez que le matériel nécessaire à votre objectif.
Un exemple complet avec un lien vers la source
Enregistrez le code suivant comme quote.html et ouvrez-le dans un navigateur. Aucun serveur ni bibliothèque supplémentaire n'est requis. La courte citation en anglais provient directement de la norme HTML.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exemple de citation en bloc</title>
</head>
<body>
<p>La norme HTML décrit ainsi ce que représente blockquote.</p>
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
<p lang="en">a section that is quoted from another source</p>
</blockquote>
<p>Source: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>Le navigateur affiche le paragraphe introductif, la citation et le lien vers la source dans cet ordre. Le style par défaut varie, mais les navigateurs donnent couramment des marges supplémentaires à la citation. Le lien ouvre la section pertinente de la norme HTML. La citation conserve sa formulation originale en anglais.
L'attribut cite est différent d'une citation visible
L'attribut cite contient l'URL de la source citée. L'ajouter n'affiche pas automatiquement de lien ou de crédit de source. Incluez un élément <a> séparé et un texte descriptif lorsque les lecteurs ont besoin de suivre la référence.
L'attribut cite et l'élément <cite> partagent un nom mais ont des rôles différents. L'attribut enregistre une adresse source ; l'élément marque le titre d'une œuvre, telle qu'un livre ou un document. Le nom d'un auteur seul n'est pas un titre d'œuvre.
Appliquez le style à la citation avec CSS
Conservez le sens de la citation en HTML et ajustez ses marges et sa bordure avec CSS. Liez une feuille de style depuis l'exemple head, puis ajoutez la règle suivante à cette feuille de style. Vous pouvez également ajouter la règle à une feuille de style existante utilisée par la page.
blockquote {
margin: 1.5rem 0;
padding: 0.5rem 1rem;
border-left: 0.25rem solid #477080;
}La citation reçoit une bordure à gauche et un espacement interne. Si vous ajoutez des couleurs de fond ou de texte, maintenez un contraste lisible. Ne marquez pas le contenu ordinaire non cité comme bloc de citation simplement pour obtenir cette apparence. Voir la définition du bloc de citation de la norme HTML et la référence du bloc de citation MDN pour sa syntaxe et ses conditions d'utilisation.
