L’élément <figure> définit un contenu autonome qui peut être une image ou un code.
Il s’agit d’un contenu pouvant être accompagné de la légende facultative spécifiée par <figcaption>.
Cet élément peut être placé vers une autre partie de la page sans avoir à impacter le flux principal.
La balise est ainsi utilisée pour l’organisation sémantique le contenu des images, vidéos et audios.
Il faut savoir que la balise <figure> est une racine de sectionnement puisque son contenu est exclu du plan général de la page.
Voici un exemple avec une image et sa légende :
<figure>
<img
src="https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Lignes de code HTML5.">
<figcaption>Lignes de code HTML5</figcaption>
</figure>Voici le code CSS du document :
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 660px;
margin: auto;
}
img {
max-width: 660px;
max-height: 440px;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
On obtient ceci :
