Si vous avez déjà consulté une liste d'éléments HTML, vous vous êtes peut-être demandé « qu'est-ce qu'une citation de bloc? » L'élément blockquote est un balise HTML paire qui est utilisée pour définir de longues citations. Voici la définition de cet élément selon le Spécification W3C HTML5:
L'élément blockquote représente une section qui est citée à partir d'une autre source.
Comment utiliser Blockquote sur vos pages Web
Lorsque vous écrivez du texte sur une page Web et créez la mise en page de cette page, vous souhaitez parfois appeler un bloc de texte sous forme de citation. Cela pourrait être une citation d'ailleurs, comme un témoignage de client qui accompagne une étude de cas ou une réussite de projet.
Cela pourrait également être un traitement de conception qui répète un texte important de l'article ou du contenu lui-même. Dans l'édition, cela est parfois appelé un tirer un devis, Dans la conception de sites Web, l'un des moyens d'y parvenir (et la façon dont nous traitons dans cet article) s'appelle un blockquote.
Voyons donc comment vous utiliseriez la balise blockquote pour définir de longues citations, comme cet extrait de « The Jabberwocky » de Lewis Carroll:
'Twas brillant et les toves slithey
Est-ce que gyre et gimble dans le wabe:
Tous les mimsy étaient les borogoves,
Et le mome rats outgrabe.
(par Lewis Carroll)
Exemple d'utilisation de la balise Blockquote
La balise blockquote est une balise sémantique qui indique au navigateur ou à l'agent utilisateur que le contenu est une longue citation. En tant que tel, vous ne devez pas inclure de texte qui n'est pas une citation à l'intérieur de la balise blockquote.
Une citation est souvent de vrais mots que quelqu'un a dit ou un texte provenant d'une source extérieure (comme le texte de Lewis Carroll dans cet article), mais il pouvez également être le concept de citation tiré que nous avons couvert précédemment.
Quand vous y réfléchissez, cette citation tirée est une citation de texte, elle provient simplement du même article dans lequel la citation elle-même apparaît.
La plupart des navigateurs Web ajoutent des indentations (environ 5 espaces) des deux côtés d'un bloc de citation pour le faire ressortir du texte environnant. Certains navigateurs extrêmement anciens peuvent même rendre le texte cité en italique. N'oubliez pas qu'il s'agit simplement du style par défaut de l'élément blockquote.
Avec CSS, vous avez un contrôle total sur la façon dont votre blockquote s'affichera. Vous pouvez augmenter ou même supprimer le retrait, ajouter des couleurs d'arrière-plan ou augmenter la taille du texte pour rappeler davantage la citation. Vous pouvez faire flotter cette citation d'un côté de la page et faire envelopper l'autre texte, ce qui est un style visuel courant utilisé pour les citations tirées dans les magazines imprimés.
Vous avez le contrôle sur l'apparence du blockquote avec CSS, ce dont nous parlerons un peu plus sous peu. Pour l'instant, continuons à voir comment ajouter la citation elle-même à votre balisage HTML.
Pour ajouter la balise blockquote à votre texte, entourez simplement le texte qui est une citation avec la paire de balises suivante:
- Ouverture:
- Fermeture:
Par example:
C'était génial et les toves slithey.
Est-ce que gyre et gimble dans le wabe:
Tous les mimsy étaient les borogoves,
Et le mome rats outgrabe.Ajoutez la paire de balises blockquote autour du contenu de la citation elle-même. Dans cet exemple, nous avons également utilisé des balises de rupture (
) pour ajouter des sauts de ligne simples, le cas échéant, à l'intérieur du texte. C'est parce que nous recréons le texte d'un poème, où ces pauses spécifiques sont importantes.Si vous étiez en train de créer un devis de témoignage client et que les lignes n'avaient pas besoin de se rompre en parties spécifiques, vous ne voudrait pas ajouter ces balises de rupture et permettre au navigateur lui-même de s'enrouler et de se briser au besoin en fonction de l'écran Taille.
N'utilisez pas de guillemets pour mettre le texte en retrait
Pendant de nombreuses années, les gens ont utilisé la balise blockquote s'ils voulaient mettre du texte en retrait sur leur page Web, même si ce texte n'était pas une citation tirée. C'est une mauvaise pratique! Vous ne voulez pas utiliser la sémantique de blockquote uniquement pour des raisons visuelles.
Si vous devez indenter votre texte, vous devez utiliser des feuilles de style, pas les balises blockquote (à moins, bien sûr, que ce que vous essayez d'indenter soit une citation !).