<figure> : l'élément de figure avec légende facultative
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 <figure> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <figcaption>. La figure, sa légende et son contenu sont référencés comme une seule unité.
Exemple interactif
<figure>
<img
src="/shared-assets/images/examples/elephant.jpg"
alt="Un éléphant au coucher du soleil" />
<figcaption>Un éléphant au coucher du soleil</figcaption>
</figure>
figure {
border: thin silver solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 220px;
margin: auto;
}
img {
max-width: 220px;
max-height: 150px;
}
figcaption {
background-color: #222222;
color: white;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
Attributs
Cet élément inclut uniquement les attributs universels.
Notes d'utilisation
- Généralement, une
<figure>est une image, une illustration, un diagramme, un extrait de code, etc., qui est référencé dans le flux principal d'un document, mais qui peut être déplacé dans une autre partie du document ou dans une annexe sans affecter le flux principal. - Une légende peut être associée à l'élément
<figure>en insérant un<figcaption>à l'intérieur (comme premier ou dernier enfant). Le premier élément<figcaption>trouvé dans la figure est présenté comme la légende de la figure. - Le
<figcaption>fournit le nom accessible au parent<figure>.
Exemples
Images
html
<!-- Une simple image -->
<figure>
<img src="favicon-192x192.png" alt="Le logo de MDN." />
</figure>
<!-- Une image avec une légende -->
<figure>
<img src="favicon-192x192.png" alt="Le logo de MDN." />
<figcaption>Logo MDN</figcaption>
</figure>
Résultat
Extrait de code
html
<figure>
<figcaption>Obtenir les détails du navigateur</figcaption>
<pre>
function NavigatorExample(){
let txt;
txt = "Nom de code : " + navigator.appCodeName;
txt += "Nom du navigateur : " + navigator.appName;
txt += "Version : " + navigator.appVersion ;
txt += "Cookies activés : " + navigator.cookieEnabled;
txt += "Plate-forme: " + navigator.platform;
txt += "En-tête d'agent utilisateur : " + navigator.userAgent;
console.log("NavigatorExample", txt);
}
</pre>
</figure>
Résultat
Citation
html
<figure>
<figcaption>
<cite>Edsger Dijkstra : </cite>
</figcaption>
<p>
« Si le débogage correspond au retrait de bogues, alors la
programmation correspond à l'ajout de bogues. »
</p>
</figure>
Résultat
Poème
html
<figure>
<p style="white-space:pre">
Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and
yet no footing seen: Love is a spirit all compact of fire, Not gross to
sink, but light, and will aspire.
</p>
<figcaption>
<cite>Venus and Adonis</cite>. By: William Shakespeare
</figcaption>
</figure>
Résultat
Résumé technique
| Catégories de contenu | Contenu de flux, contenu tangible. |
|---|---|
| Contenu autorisé |
Un élément <figcaption> suivi d'un contenu de flux ou du contenu de flux suivi d'un élément <figcaption> ou du contenu de flux.
|
| Omission de balises | Aucune, la balise ouvrante et la balise fermante sont toutes les deux obligatoires. |
| Parents autorisés | Tout élément qui accepte du contenu de flux. |
| Rôle ARIA implicite |
figure
|
| Rôles ARIA autorisés |
Sans descendant <figcaption> descendant : n'importe quel rôle, sinon aucun rôle autorisé.
|
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-figure-element |
Compatibilité des navigateurs
Voir aussi
- L'élément
<figcaption>