Balise HTML <figure>
La balise <figure> est utilisée pour indiquer un contenu autonome. La balise peut contenir des diagrammes, des images, des illustrations, des exemples de code, etc.
La balise <figure> fait partie des éléments HTML5.
Le contenu de la balise <figure> est lié au flux de contenu principal. Cependant, il est perçu comme une unité autonome.
Pour ajouter une légende ou une explication au contenu de la balise <figure>, nous utilisons la balise <figcaption>. La balise <figcaption> est incluse dans la balise <figure> et est placée en tant que premier ou dernier élément enfant. Si <figcaption> est le premier élément imbriqué, le contenu sera affiché en haut de l'image.
Syntaxe
La balise <figure> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<figure>) et la balise de fermeture (</figure>).
Exemple de la balise HTML <figure> :
Balise HTML <figure>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>Résultat
La différence entre les balises <figure> et <aside>
Ces deux balises ont un comportement similaire. Cependant, il existe quelques différences. En particulier, l'élément <figure> est destiné au contenu directement lié au contenu principal. La balise <aside> est utilisée pour le contenu lié "indirectement". Elle fournit des infographies, des citations ou des graphiques pour un contenu spécifique.
Attributs
La balise <figure> prend en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quelle est la fonction de la balise <figure> en HTML ?