Si vous avez déjà consulté une liste d'éléments HTML, vous vous êtes peut-être déjà posé la question "Qu'est-ce qu'une citation de bloc?" L'élément blockquote est une paire de balises HTML utilisée pour définir des citations longues. Voici la définition de cet élément selon la spécification HTML5 du W3C:
L'élément blockquote représente une section 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. Il pourrait s'agir d'une citation ailleurs, comme un témoignage de client qui accompagne une étude de cas ou un exemple de 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 la publication, cela s'appelle parfois un pull-quote. Dans la conception Web, l'un des moyens d'y parvenir (et la manière dont nous traitons dans cet article) s'appelle un blockquote.
Voyons maintenant comment vous utiliseriez la balise blockquote pour définir de longues citations, comme cet extrait de «The Jabberwocky» de Lewis Carroll:
'Twas brillig et le slithey tovesEst-ce que gyre et gimble dans le wabe:Tous mimsy étaient les borogoves,Et la mère raths 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 citation longue. En tant que tel, vous ne devez pas inclure de texte qui ne soit pas une citation à l'intérieur de la balise blockquote. Rappelez-vous, une "citation" est souvent une expression réelle que quelqu'un a dite 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 pullquote que nous avons couvert précédemment. Lorsque vous y réfléchissez, ce pullquote est une citation de texte. Il provient du même article que celui dans lequel la citation apparaît.
La plupart des navigateurs Web ajoutent des caractères d'indentation (environ 5 espaces) aux 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 l’affichage de votre citation de bloc. Vous pouvez augmenter ou même supprimer le retrait, ajouter des couleurs d'arrière-plan ou augmenter la taille du texte pour rappeler le devis. Vous pouvez placer cette citation sur un côté de la page et entourer l'autre texte, qui est un style visuel commun utilisé pour les citations à la mode dans les magazines imprimés. Vous avez le contrôle sur l'apparence du blockquote avec CSS, ce dont nous parlerons un peu plus tard. Pour l'instant, continuons à chercher comment ajouter la citation elle-même à votre balise HTML.
Pour ajouter la balise blockquote à votre texte, entourez simplement le texte qui est une citation de la paire de balises suivante -
Par exemple:
’Twas brillig et le slithey toves Est-ce que gyre et gimble dans le wabe: Tous mimsy étaient les borogoves, Et la mère raths outgrabe.Comme vous pouvez le constater, vous ajoutez simplement la paire de balises blockquote autour du contenu de la citation elle-même. Dans cet exemple, nous avons également utilisé des balises break () 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 sauts spécifiques sont importants. Si vous créiez un devis de témoignage client et que les lignes n'avaient pas besoin de séparer des parties spécifiques, vous ne voudriez pas ajouter ces balises de rupture et permettre au navigateur lui-même d'envelopper et de rompre au besoin en fonction de la taille de l'écran.
N'utilisez pas Blockquote pour indenter du texte
Pendant de nombreuses années, les gens utilisaient la balise blockquote s'ils voulaient mettre du texte en retrait sur leur page Web, même si ce texte n'était pas une pullquote. C'est une mauvaise pratique! Vous ne voulez pas utiliser la sémantique de blockquote uniquement pour des raisons visuelles. Si vous avez besoin d'indenter votre texte, vous devez utiliser des feuilles de style et non les balises blockquote (sauf si, bien entendu, vous essayez d'indenter est un guillemet!). Essayez de mettre ce code dans votre page Web si vous essayez simplement d’ajouter un retrait:
Ce sera le texte qui est en retrait.
Ensuite, vous devriez cibler cette classe avec un style CSS
.indented {
rembourrage: 0 10px;}
Cela ajoute les 10 pixels de remplissage de chaque côté du paragraphe.
