Cette balise est l’un des nouveaux éléments sémantiques apportées par le HTML5, vers 2010. Les balises <figure> et <figcaption> permettent de grouper une image avec sa légende (en anglais: caption).
Exemple d’utilisation
<figure>
<img src="image.jpg" alt="Texte alternatif.">
<figcaption>Légende.</figcaption>
</figure>
Pour un de mes sites, j’ai voulu afficher deux vidéos côte à côte en utilisant la balise <figure> afin de leur mettre un titre.
Il a fallu utiliser le CSS pour obtenir un résultat satisfaisant.
Voyons celà :
Le HTML
<div>
<figure>
<figcaption><titre1</figcaption>
<video controls="controls">
<source src="video1.mp4" type="video/mp4">
</video>
</figure>
<figure>
<figcaption><titre2</figcaption>
<video controls="controls">
<source src="video2.mp4" type="video/mp4">
</video>
</figure>
</div>
Le CSS
figure {
width:48% !important;
display:inline-block;
padding:1rem;
}
figcaption {
background-color:lightgrey;
border:1px solid black;
font-size:smaller;
line-height:1.3;
text-align:center;
}
div{
width:100%;
margin:auto;
text-align:center;
}
Le résultat
Les deux vidéos sont bien côte à côte et centrées.