Balise HTML <figure>

Définition et utilisation

<figure> l'étiquette spécifie un contenu inclusif, comme des illustrations, des graphiques, des photos, des listes de codes, etc.

Bien que <figure> Le contenu de l'élément est lié au contenu principal, mais sa position est indépendante du flux principal. Si vous le supprimez, cela ne devrait pas affecter le flux du document.

Avis :Utilisez l'élément <figcaption> Pour <figure> Ajouter un titre à l'élément.

Voir également :

Manuel de référence HTML DOM :Objet Figure

Exemple

Exemple 1

Utilisez l'élément <figure> pour marquer une photo dans le document, et l'élément <figcaption> pour définir le titre de la photo :

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figure 1 - Trulli de la région de Puglia en Italie.</figcaption>
</figure>

Essayez-le vous-même

Exemple 2

Utilisez CSS pour définir les styles des éléments <figure> et <figcaption> :

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figure 1 - Trulli de la région de Puglia en Italie.</figcaption>
</figure>
</body>
</html>

Essayez-le vous-même

Attributs globaux

<figure> La balise prend également en charge Attributs globaux dans HTML.

Attributs d'événement

<figure> La balise prend également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <figure> Élément :

figure {
  affichage: bloc;
  marge-haut: 1em;
  marge-bas: 1em;
  marge-gauche: 40px;
  marge-droite: 40px;
}

Essayez-le vous-même

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge le premier élément.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Remarque : la balise <figure> est une nouvelle balise dans HTML 5.