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

img

Les deux vidéos sont bien côte à côte et centrées.