Avancé10 min de lecture

Citations et Références

Maîtrise les éléments HTML sémantiques pour les citations, références, abréviations, dates et définitions — les fondations d'un contenu textuel bien structuré.

Citations en bloc et citations en ligne

HTML fournit deux éléments pour citer du texte :

<blockquote> — Citation en bloc

Utilisé pour les longues citations autonomes qui forment leur propre paragraphe ou section. Les navigateurs l'indentent généralement. Utilise l'attribut cite pour fournir l'URL de la source.

html
<blockquote cite="https://example.com/source">
  <p>The Web is for everyone.</p>
</blockquote>

<q> — Citation en ligne

Utilisé pour les courtes citations intégrées dans une phrase. Les navigateurs ajoutent automatiquement des guillemets autour du contenu.

html
<p>Tim Berners-Lee said <q>The Web is for everyone</q>.</p>

<cite> — Citation

L'élément <cite> nomme le titre d'une œuvre (un livre, un article, un film, etc.). Il est rendu en italique par défaut.

html
<p>As described in <cite>HTML: The Living Standard</cite>.</p>

Remarque : <cite> est pour le titre d'une œuvre, pas pour la personne qui l'a dit.

Abréviations et définitions

<abbr> — Abréviation

Entoure une abréviation ou un acronyme. L'attribut title fournit l'expansion, affichée comme une info-bulle au survol.

html
<p>The <abbr title="World Wide Web">WWW</abbr> was invented in 1989.</p>

<dfn> — Terme de définition

Marque la première occurrence d'un terme en cours de définition. Les lecteurs d'écran et les moteurs de recherche l'utilisent pour comprendre que le texte environnant définit ce terme.

html
<p><dfn>HTML</dfn> is a markup language for structuring web content.</p>

<address> — Informations de contact

Représente les informations de contact pour l'<article> ou le <body> le plus proche. Ce n'est pas pour des adresses postales arbitraires — il identifie spécifiquement comment contacter l'auteur ou le propriétaire.

html
<address>
  Written by <a href="mailto:jane@example.com">Jane Doe</a>.
</address>

Dates et heures avec <time>

L'élément <time> représente une date, une heure ou une durée spécifique. La clé est l'attribut datetime, qui fournit une valeur lisible par machine.

html
<p>Published on <time datetime="2025-03-15">March 15, 2025</time>.</p>
<p>The event starts at <time datetime="14:30">2:30 PM</time>.</p>
<p>Duration: <time datetime="PT2H30M">2 hours 30 minutes</time>.</p>

L'attribut datetime utilise le format ISO 8601. Les moteurs de recherche peuvent l'analyser pour comprendre quand le contenu a été publié ou quand les événements se produisent.

Tous les éléments ensemble

html
<article>
  <h2>The Birth of the Web</h2>

  <p>
    <dfn>HTML</dfn> (HyperText Markup Language) was created by
    <abbr title="Tim Berners-Lee">TBL</abbr> in
    <time datetime="1991">1991</time>.
  </p>

  <blockquote cite="https://www.w3.org/People/Berners-Lee/">
    <p>The Web is more a social creation than a technical one.</p>
  </blockquote>

  <p>
    This quote comes from <cite>Weaving the Web</cite>,
    where Berners-Lee also wrote <q>I designed it for a social
    effect — to help people work together</q>.
  </p>

  <address>
    Article by <a href="mailto:author@example.com">Author</a>.
  </address>
</article>

À quoi sert l'élément `<cite>` ?

Prêt à pratiquer ?

Crée ton compte gratuit pour accéder à l'éditeur de code interactif, lancer les défis et suivre ta progression.