Balise HTML <figcaption >


Exemple

Utilisez un élément <figure> pour annoter une photo dans un document, et un élément <figcaption> pour définir une légende pour la photo :

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Plus d'exemples "Essayez-le vous-même" ci-dessous.


Définition et utilisation

La <figcaption>balise définit une légende pour un élément <figure> .

L' <figcaption>élément peut être placé comme premier ou dernier enfant de l'élément <figure>.


Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.

Element
<figcaption> 8.0 9.0 4.0 5.1 11.0

Attributs globaux

La <figcaption>balise prend également en charge les attributs globaux en HTML .


Attributs d'événement

La <figcaption>balise prend également en charge les attributs d'événement en HTML .



Plus d'exemples

Exemple

Utilisez CSS pour styliser <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="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>

</body>
</html>

Pages connexes

Référence HTML DOM : objet Figcaption


Paramètres CSS par défaut

La plupart des navigateurs afficheront l' <figcaption>élément avec les valeurs par défaut suivantes :

figcaption {
  display: block;
}