Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<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> (qui signifie bloc de citation) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir les notes ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut cite tandis qu'un texte représentant la source peut être donné via l'élément <cite>.
Exemple interactif
<div>
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>
Words can be like X-rays, if you use them properly—they’ll go through
anything. You read and you’re pierced.
</p>
</blockquote>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>
div:has(> blockquote) {
background-color: #ededed;
margin: 10px auto;
padding: 15px;
border-radius: 5px;
}
blockquote p::before {
content: "201円C";
}
blockquote p::after {
content: "201円D";
}
blockquote + p {
text-align: right;
}
| 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 | Pas de rôle correspondant |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM |
HTMLQuoteElement
|
Attributs
Comme pour tous les éléments HTML, on peut utiliser 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
Pour changer l'indentation de <blockquote>, on utilisera la propriété CSS margin-left ou margin-right (ou encore la propriété raccourcie margin)
Pour les citations courtes, on pourra utiliser l'élément <q>.
Exemples
Cet exemple démontre l'utilisation de l'élément <blockquote> pour citer un passage de RFC 1149 A Standard for the Transmission of IP Datagrams on Avian Carriers.
<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
Spécifications
| Specification |
|---|
| HTML # the-blockquote-element |
Compatibilité des navigateurs
Chargement...