Aller au contenu

Balise HTML <figcaption>

La balise <figcaption> fait partie des éléments HTML5. Elle sert à ajouter une légende ou des explications au contenu de la balise <figure>. La balise <figcaption> est incluse dans <figure> et placée en tant que premier ou dernier élément enfant. La placer en premier enfant affiche la légende au-dessus du contenu de la figure, tandis que la placer en dernier enfant l'affiche en dessous.

Vous ne pouvez utiliser qu'une seule balise <figcaption> dans l'élément <figure>. Cependant, <figure> peut également contenir d'autres balises (balise <img> ou <code>).

Syntaxe

La balise <figcaption> s'utilise par paire. Le contenu est écrit entre la balise ouvrante <figcaption> et la balise fermante (</figcaption>).

Exemple de la balise HTML <figcaption> :

Balise HTML <figcaption>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Résultat

figcaption example

Attributs

La balise <figcaption> prend en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <figcaption>

Par défaut, les navigateurs affichent l'élément <figcaption> comme un élément de niveau bloc. Vous pouvez personnaliser son apparence à l'aide de CSS :

css
figcaption {
  font-style: italic;
  color: #555;
  text-align: center;
  margin-top: 5px;
}

Pratique

Quelle est la fonction de la balise HTML <figcaption> ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.