Citations HTML

Vous avez déjà marqué l’importance et l’accentuation avec des balises de formatage. Les citations sont différentes : vous répétez les mots de quelqu’un d’autre (ou un passage d’une œuvre), et HTML doit le dire clairement. Des éléments de citation dédiés aident les navigateurs, les outils d’assistance et les lecteurs à distinguer une citation de votre propre prose environnante — ce que des guillemets décoratifs seuls ne communiquent pas entièrement. Quand le sens vit dans la bonne balise, le contenu reste clair pour les humains et les machines, même si l’apparence change plus tard.

Qu’est-ce qui compte comme citation en HTML ?

Une citation est un texte que vous présentez comme provenant d’un autre locuteur, auteur ou source. Ce peut être une courte expression dans votre phrase ou un passage plus long mis à part comme son propre bloc. HTML fournit q pour le cas court en ligne et blockquote pour le cas de bloc plus long. Des outils supplémentaires aident pour les sources : l’élément cite pour un titre d’œuvre visible, et un attribut cite sur blockquote pour une URL source lisible par machine. Le but n’est pas seulement d’embellir la page, mais d’annoncer honnêtement que ces mots sont attribués à une source externe et ne sont pas votre formulation libre à cet instant.

Réponse directe

Utilisez q pour une citation courte dans une phrase. Utilisez blockquote pour une section citée plus longue qui se tient seule. Nommez l’œuvre ou l’article avec l’élément cite dans le texte visible quand cela aide les lecteurs. Sur blockquote, vous pouvez aussi fixer cite="https://…" vers une URL source — cette URL est destinée aux machines et n’est en général pas affichée seule comme titre lisible. En bref : choisissez la balise selon la longueur et la place de la citation, puis complétez l’attribution visible si besoin pour que la source ne reste pas cachée dans un attribut que le visiteur ne voit pas.

Outils de citation en un coup d’œil

Citations courtes en ligne avec q

Quand les mots cités se placent dans votre propre phrase, entourez-les de q. La plupart des navigateurs ajoutent les guillemets pour vous. Vous écrivez toujours les mots parlés ou écrits entre les balises ; en général vous ne tapez pas à la main des guillemets typographiques. Cette balise convient à une courte phrase citée ou à un dicton connu dans votre narration, pas à un article entier copié. Si la citation s’étend sur plusieurs phrases indépendantes, tournez-vous vers blockquote au lieu d’empiler plusieurs q sans besoin.

Lecture de l’exemple

• Le p extérieur est votre narration
• q n’entoure que l’expression citée
• Fermer q rend le reste de la phrase à la prose normale
• S’il s’agissait d’un extrait long en plusieurs phrases, blockquote serait plus adapté
• Remarquez que le sens « ce sont des mots cités » est dans la balise, pas seulement dans l’apparence typographique

Passages plus longs avec blockquote

Utilisez blockquote quand la citation est assez longue pour former son propre bloc — souvent un ou plusieurs paragraphes. Placez le contenu cité à l’intérieur du blockquote. Un attribut cite peut stocker l’URL source. Mettez un titre d’œuvre lisible pour les humains avec l’élément cite dans le texte visible, en général près de la citation. Beaucoup de sites mettent blockquote en retrait par défaut ; ce retrait n’est que de la présentation. N’utilisez pas la balise seulement pour « décaler le texte » si vous ne citez pas vraiment.

Pourquoi l’attribut cite seul ne suffit pas

L’attribut cite aide les outils et certains programmes de contrôle à connaître l’URL source. Beaucoup de visiteurs ne voient jamais les valeurs d’attributs. Donnez aussi aux personnes une ligne de crédit lisible. Combiner l’attribut (pour les machines) et le titre visible avec l’élément cite (pour les humains) couvre les deux besoins sans mélanger les rôles. Un titre seulement dans le paragraphe sans URL peut suffire aux lecteurs ; une URL sans titre visible laisse souvent les personnes sans l’attribution dont elles ont besoin.

Choisir q contre blockquote

Posez deux questions : quelle est la longueur de la citation ? Interrompt-elle une phrase ou se tient-elle seule ?

• Courte expression dans votre phrase → q
• Passage plus long comme bloc propre → blockquote
• Titre d’un livre, article ou site dans le texte courant → élément cite
• URL de la source pour une citation en bloc → attribut cite sur blockquote
  N’enveloppez pas une page entière dans un blockquote géant juste pour indenter le texte. L’indentation est de la présentation ; blockquote est pour de vraies citations. Si vous mélangez les deux usages, vous troublez lecteurs et outils d’assistance, et la page peut paraître « entièrement citée » alors que la majeure partie est votre propre prose. Gardez longueur et position comme critères simples, puis ajoutez l’attribution visible au besoin.

Sens contre guillemets provenant du CSS seul

Vous pouvez simuler des marques avec du CSS ou des caractères " tapés. Pour une vraie citation, préférez q ou blockquote afin que le document marque le sens. Des marques visuelles peuvent encore apparaître — les navigateurs stylisent souvent q avec des guillemets —, mais l’élément porte le rôle même si une feuille de style change l’apparence plus tard. La décoration seule peut disparaître ou varier selon l’appareil ; le rôle sémantique en HTML reste plus clair et plus stable pour la lecture automatique et l’accessibilité.

Pratique dans votre éditeur

1. Écrivez un paragraphe qui inclut une courte citation q d’un coach ou d’un enseignant imaginaire.
2. Ajoutez un blockquote avec deux phrases courtes d’un article imaginaire.
3. En dessous, une ligne qui utilise cite pour nommer le titre de l’article.
4. En option, fixez cite="https://example.com/article" sur le blockquote.
5. Enregistrez et ouvrez la page. Vérifiez que la citation en ligne et la citation en bloc se distinguent.
6. Remplacez temporairement q par du texte brut et des guillemets tapés, puis remettez q — observez comment le rôle du balisage diffère de la décoration seule.
   Répétez l’exercice avec différents titres de source jusqu’à ce que distinguer élément et attribut devienne automatique. Surveillez aussi la fermeture correcte des balises, pour que le texte suivant ne reste pas marqué à tort comme citation.

Erreurs qui brouillent les citations

• Envelopper toute une page dans un blockquote géant sans vraie citation
• N’utiliser que du CSS ou des marques tapées alors que le texte est vraiment cité et devrait utiliser q / blockquote
• Placer le seul titre de source dans l’attribut cite et supposer que les lecteurs le verront
• Imbriquer blockquote dans q sans raison claire
• Se citer soi-même pour la décoration — réservez ces éléments aux mots vraiment cités
• Oublier de fermer q ou blockquote de sorte que le texte suivant reste marqué comme citation
  Chacune de ces erreurs affaiblit la confiance ou mélange présentation et sens. Relisez la page avec les yeux d’un lecteur : est-il clair où finit votre texte et où commence celui de la source ? L’attribution visible est-elle là où les personnes en ont besoin ?

Résumé

• Citations courtes dans une phrase → q
• Blocs cités plus longs → blockquote
• Titres d’œuvres visibles → élément cite
• URL source optionnelle → attribut cite sur blockquote
• Marquez les vraies citations en HTML ; ne comptez pas sur le style seul pour le sens
• Restez honnête : utilisez les éléments quand vous citez réellement une source
  Dans cet ordre, vous construisez des pages plus claires pour les humains et les outils, vous séparez décoration et sens, et vous gardez l’attribution lisible là où le visiteur l’attend.