Le tag <figure> est utilisé pour regrouper le contenu, qui complète ou illustre le contenu du document. Le tag peut contenir des images, des diagrammes, des illustrations, des exemples de code, etc.

Le contenu du tag <figure> est un flux principal de contenu Web, mais est perçu comme une unité autonome.

Pour ajouter une légende ou des explications au contenu du tag <figure>, on utilise le tag <figcaption>. Le tag <figcaption> est inclus dans le tag <figure> et est placé en tant que le premier ou le dernier élément enfant. Si le <figcaption> est le premier élément affiché, le contenu sera affiché en haut de l’image.

Syntaxe

Le contenu du tag est écrit entre le tag ouvrant (<figure>) et le tag fermant (</figure>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p>Bon enfant</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
    </figure>
  </body>
</html>

Résultat

A cute baby

Attributs

Le tag <figure> supporte également les Attributs globaux et les Attributs d'événements.

Support de Navigateurs

chrome firefox safari opera
6+ 4+ 5+ 11.1+

Pratiquez vos connaissances

Quel est le rôle du tag '<figure>' en HTML ?
Trouvez-vous cela utile?