<blockquote>
Une citation plus longue provenant d’une autre source, affichée comme un bloc séparé et indenté.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux
Exemple
#<figure>
<blockquote>
<p>Après trois mois d’apprentissage, j’ai construit ma première application. Ce qui m’a le plus aidée, ce sont les petits exercices quotidiens.</p>
</blockquote>
<figcaption>Julia, diplômée de la formation JavaScript</figcaption>
</figure>Définition et utilisation
#L’élément <blockquote> désigne une longue citation provenant d’une autre source : un passage d’un livre, la déclaration d’un expert ou l’avis d’un client. Les navigateurs l’affichent comme un bloc séparé avec des marges des deux côtés.
Vous pouvez enregistrer l’adresse de la source dans l’attribut cite, mais le navigateur ne l’affiche pas. Placez l’auteur et le titre que le lecteur doit voir à l’extérieur de la citation, idéalement dans le <figcaption> d’un élément <figure> qui englobe la citation. Marquez en plus le titre de l’œuvre avec l’élément <cite>.
Une courte citation insérée dans une phrase se marque avec l’élément <q>. <blockquote>, en revanche, ne sert pas à créer des indentations : si vous voulez seulement éloigner le texte du bord, utilisez le CSS.
Syntaxe
#<blockquote cite="adresse-de-la-source">
<p>Contenu de la citation.</p>
</blockquote>Attributs
#URL
L’adresse du document ou de la page d’où provient la citation. Elle n’est pas affichée, mais les scripts et les robots peuvent la lire. Indiquez la source que l’utilisateur doit voir dans le contenu visible.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#cite
URLL’adresse du document ou de la page d’où provient la citation. Elle n’est pas affichée, mais les scripts et les robots peuvent la lire. Indiquez la source que l’utilisateur doit voir dans le contenu visible.
<blockquote cite="https://www.codeworlds.com/fr/collections/comment-apprendre">
<p>Vingt minutes par jour vous font progresser plus qu’un long week-end d’étude une fois par mois.</p>
</blockquote>Plus d’exemples
#<blockquote>
<p>N’apprenez pas tout en même temps. Construisez quelque chose de petit, et les lacunes apparaîtront d’elles-mêmes.</p>
</blockquote>
<p>Extrait de la newsletter <cite>Le code au quotidien</cite></p>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
blockquote {
display: block;
margin-block: 1em;
margin-inline: 40px;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’utilisez pas
<blockquote>pour créer des indentations. Éloigner le texte est une tâche pour le CSS. - Indiquez l’auteur de la citation à l’extérieur de l’élément, par exemple dans un
<figcaption>à l’intérieur d’une<figure>. - Marquez une courte citation au milieu d’une phrase avec
<q>, et le navigateur ajoutera lui-même les guillemets.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.