HTML Quotation : comment intégrer des citations en HTML ?

Les citations HTML (ou quotes) sont utilisées pour intégrer des passages de texte provenant d’autres sources dans un site Web. Pour cela, utilisez <blockquote>, <q> ou <cite>, selon l’utilisation que vous souhaitez en faire. L’avantage des citations HTML est d’alléger le texte courant, d’optimiser le référencement et de mieux transmettre le contenu.

HTML Quotations : de quoi s’agit-il ?

Les HTML Quotations désignent un ensemble de balises HTML spéciales utilisées pour marquer et afficher des citations dans des documents HTML. Les deux principales balises HTML pour les citations sont la balise <blockquote> et la balise <q>. Il existe une troisième alternative, la balise <cite> ou encore l’attribut cite, qui est lui spécialement adaptée pour indiquer la source des citations. Les citations HTML, tout comme les listes HTML et les tableaux HTML, sont un bon moyen de structurer et aérer les textes.

L’utilisation de ces balises permet non seulement de rendre vos textes plus agréables à l’œil, mais aussi d’améliorer la structure sémantique du document. Les moteurs de recherche et autres technologies Web peuvent mieux comprendre et traiter la signification des citations, ce qui permet d’améliorer la recherche et l’accessibilité du contenu.

Quels sont les différents types de citations HTML ?

La manière exacte dont vous intégrez une citation dans vos documents HTML dépend du type de balise que vous choisissez. Dans les sections suivantes, nous avons résumé pour vous les trois variantes possibles, avec des exemples concrets.

Balise HTML <q> (citation en ligne)

La balise (ou tag) HTML <q> permet d’intégrer des citations dans le corps du texte en HTML et de les marquer avec des guillemets. Vous n’avez donc pas besoin d’interrompre le texte continu et vous pouvez rendre le texte cité directement ou indirectement reconnaissable visuellement pour les lecteurs. Comme les guillemets sont automatiquement ajoutés au début et à la fin du passage cité lors de l’utilisation des balises <q>, il n’est pas nécessaire de le faire manuellement. Les citations avec les balises <q> sont généralement utilisées pour des passages courts ou du discours direct qui ne nécessitent pas d’interruption du flux de texte.

Voici la syntaxe de cette balise :

<p>Voici le corps du texte <q>Voici une citation</q></p>

Balise <blockquote> (citation en bloc)

Les citations en bloc sont des citations mises en évidence visuellement par un paragraphe en retrait ou un cadre fin. Pour distinguer un passage du texte en tant que paragraphe individuel, utilisez la balise <blockquote>. Cela permet d’éviter les longs paragraphes de texte, de souligner les contenus importants et d’étayer les déclarations par des citations directes. De plus, vous créez une structure de texte favorable au référencement grâce à différents éléments de présentation. La plupart du temps, les éléments de bloc sont utilisés pour les citations longues. Cependant, ils peuvent également servir à mettre en valeur visuellement certaines phrases importantes ou des liens.

La fonction principale de la balise <blockquote> est d’indiquer aux navigateurs de marquer visuellement les éléments de texte sélectionnés. Le format final de la citation en bloc peut varier en fonction du navigateur. Si vous souhaitez définir concrètement la forme du bloc, vous pouvez utiliser les attributs HTML ou des instructions CSS telles que padding pour l’espacement intérieur du texte, border pour l’épaisseur et la couleur du cadre ou color pour la couleur de la police.

Voici la syntaxe :

<p>Ci-dessous, la citation associée</p>
<blockquote>
« Voici la citation »
</blockquote>

<cite> ou cite (indication de la source)

Lorsque vous utilisez des citations, il est non seulement important de les identifier en tant que telles, mais aussi d’indiquer leur source. Ainsi, les lecteurs peuvent immédiatement comprendre d’où provient la référence. Cela fait non seulement partie du bon style de citation, mais renforce votre crédibilité et votre transparence. Pour les deux tags HTML <q> et <blockquote>, vous pouvez utiliser l’attribut cite ou l’élément <cite> :

Attribut HTML cite

L’attribut cite est utilisé pour indiquer les sources spécifiques d’une citation comme référence. Il est particulièrement utilisé pour les citations en bloc et n’est généralement pas affiché par le navigateur lorsque les informations sont utiles à d’autres technologies comme les lecteurs d’écran ou les robots de référencement.

Syntaxe :

<p>Ci-dessous, la citation associée</q>
<blockquote cite= "https://exemple.com/source">
« Voici la citation »
</blockquote>

Dans le texte, la source pourrait apparaître de la manière suivante :

« Voici la citation » - Source : https://exemple.com/source

HTML <cite>

L’élément HTML <cite> est utilisé pour mettre en évidence dans le texte le titre d’une œuvre citée, par exemple en italique. En identifiant clairement et d’un seul coup d’œil vos références et en veillant à les citer correctement, vous assurez une plus grande transparence et traçabilité et renforcez votre sérieux.

La syntaxe est la suivante :

<p>La citation mentionnée provient de <cite>Citation de la source</cite></p>

Dans le texte, la citation apparaîtra ainsi :

« La citation mentionnée provient de (indication de la source) »