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’uti­li­sa­tion que vous souhaitez en faire. L’avantage des citations HTML est d’alléger le texte courant, d’optimiser le ré­fé­ren­ce­ment et de mieux trans­mettre le contenu.

HTML Quo­ta­tions : de quoi s’agit-il ?

Les HTML Quo­ta­tions désignent un ensemble de balises HTML spéciales utilisées pour marquer et afficher des citations dans des documents HTML. Les deux prin­ci­pales balises HTML pour les citations sont la balise <blockquote> et la balise <q>. Il existe une troisième al­ter­na­tive, la balise <cite> ou encore l’attribut cite, qui est lui spé­cia­le­ment 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 struc­tu­rer et aérer les textes.

L’uti­li­sa­tion de ces balises permet non seulement de rendre vos textes plus agréables à l’œil, mais aussi d’améliorer la structure sé­man­tique du document. Les moteurs de recherche et autres tech­no­lo­gies Web peuvent mieux com­prendre et traiter la sig­ni­fi­ca­tion des citations, ce qui permet d’améliorer la recherche et l’ac­ces­si­bi­lité du contenu.

Quels sont les dif­fé­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 choi­sis­sez. 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 guil­le­mets. Vous n’avez donc pas besoin d’in­ter­rompre le texte continu et vous pouvez rendre le texte cité di­rec­te­ment ou in­di­rec­te­ment re­con­nais­sable vi­suel­le­ment pour les lecteurs. Comme les guil­le­mets sont au­to­ma­ti­que­ment ajoutés au début et à la fin du passage cité lors de l’uti­li­sa­tion des balises <q>, il n’est pas né­ces­saire de le faire ma­nuel­le­ment. Les citations avec les balises <q> sont gé­né­ra­le­ment utilisées pour des passages courts ou du discours direct qui ne né­ces­si­tent pas d’in­ter­rup­tion 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 vi­suel­le­ment par un pa­ra­graphe en retrait ou un cadre fin. Pour dis­tin­guer un passage du texte en tant que pa­ra­graphe in­di­vi­duel, utilisez la balise <blockquote>. Cela permet d’éviter les longs pa­ra­graphes de texte, de souligner les contenus im­por­tants et d’étayer les dé­cla­ra­tions par des citations directes. De plus, vous créez une structure de texte favorable au ré­fé­ren­ce­ment grâce à dif­fé­rents éléments de pré­sen­ta­tion. La plupart du temps, les éléments de bloc sont utilisés pour les citations longues. Cependant, ils peuvent également servir à mettre en valeur vi­suel­le­ment certaines phrases im­por­tantes ou des liens.

La fonction prin­ci­pale de la balise <blockquote> est d’indiquer aux na­vi­ga­teurs de marquer vi­suel­le­ment les éléments de texte sé­lec­tion­nés. Le format final de la citation en bloc peut varier en fonction du na­vi­ga­teur. Si vous souhaitez définir con­crè­te­ment la forme du bloc, vous pouvez utiliser les attributs HTML ou des ins­truc­tions CSS telles que padding pour l’es­pa­ce­ment 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 (in­di­ca­tion de la source)

Lorsque vous utilisez des citations, il est non seulement important de les iden­ti­fier en tant que telles, mais aussi d’indiquer leur source. Ainsi, les lecteurs peuvent im­mé­dia­te­ment com­prendre d’où provient la référence. Cela fait non seulement partie du bon style de citation, mais renforce votre cré­di­bi­lité et votre trans­pa­rence. 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é­ci­fiques d’une citation comme référence. Il est par­ti­cu­liè­re­ment utilisé pour les citations en bloc et n’est gé­né­ra­le­ment pas affiché par le na­vi­ga­teur lorsque les in­for­ma­tions sont utiles à d’autres tech­no­lo­gies comme les lecteurs d’écran ou les robots de ré­fé­ren­ce­ment.

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 ap­pa­raî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 iden­ti­fiant clai­re­ment et d’un seul coup d’œil vos ré­fé­rences et en veillant à les citer cor­rec­te­ment, vous assurez une plus grande trans­pa­rence et tra­ça­bi­lité 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 ap­pa­raî­tra ainsi :

« La citation men­tion­née provient de (in­di­ca­tion de la source) »