Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

<blockquote> : l'élément de bloc de citation

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

L'élément HTML <blockquote> indique que le texte qu'il contient est une citation longue. Habituellement, cela s'affiche visuellement par une indentation (voir Notes pour savoir comment la modifier). Une URL pour la source de la citation peut être donnée avec l'attribut cite, tandis qu'une représentation textuelle de la source peut être donnée avec l'élément HTML <cite>.

Exemple interactif

<div>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>
      Les mots peuvent être comme des rayons X, si vous les utilisez
      correctement&nbsp;: ils traverseront n'importe quoi. Vous lisez et vous
      êtes transpercé·e.
    </p>
  </blockquote>
  <p>— Aldous Huxley, <cite>Le Meilleur des mondes</cite></p>
</div>
div:has(> blockquote) {
  background-color: #ededed;
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote + p {
  text-align: right;
}

Attributs

Cet élément inclut les attributs universels.

cite

Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation

Notes d'utilisation

Selon la spécification, l'attribution de la citation, si elle existe, doit être placée en dehors de l'élément <blockquote>.

Pour modifier l'indentation appliquée au texte cité, utilisez les propriétés CSS margin-left et/ou margin-right, ou la propriété raccourcie margin.

Pour inclure des citations plus courtes en ligne plutôt que dans un bloc séparé, utilisez l'élément <q> (citation).

Exemples

Cet exemple montre l'utilisation de l'élément <blockquote> pour citer un passage de la RFC 1149, A Standard for the Transmission of IP Datagrams on Avian Carriers.

html
<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside of early spring.
    This is because of the 3D ether space available to the carriers, in contrast
    to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>

Résultat

Résumé technique

Catégories de contenu Contenu de flux, racine de section, contenu tangible.
Contenu autorisé Contenu de flux.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés Tout élément acceptant du contenu de flux.
Rôle ARIA implicite blockquote
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLQuoteElement

Spécifications

Specification
HTML
# the-blockquote-element

Compatibilité des navigateurs

Voir aussi

  • L'élément HTML <q> qui permet de placer des citations en incise dans une ligne de texte.
  • L'élément HTML <cite> qui permet d'indiquer la source de la citation.
  • L'élément blockquote (angl.) sur heydonworks.com (2024)