La balise <figcaption> définit une légende décrivant le contenu provenant de son élément parent <figure>.
Cet élément doit avoir une balise de début et une balise de fin : <figcaption></figcaption>.
Il s’agit d’une nouvelle balise étant donné qu’elle n’existait pas en HTML4.
Voici un code d’exemple avec une image et sa légende :
<figure>
<img src="https://images.pexels.com/photos/574069/pexels-photo-574069.jpeg"
alt="Écriture ligne de code">
<figcaption>Lignes de code CSS</figcaption>
</figure>
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;
}
Cela donne le résultat suivant :
