Que signifie la balise figure HTML5 ? Explication détaillée de la façon d'utiliser la balise figure HTML5

Une sous-section dans le document décrivant la RPC :

Conseil : Veuillez utiliser < L'élément figcaption> ajoute une légende à un groupe d'éléments.

<figure>
  <h1>PRC</h1>
  <p>The People&#39;s Republic of China was born in 1949...</p>
</figure>

Le rôle de la balise figure HTML5 :

J'ai déjà vu une roue très intéressante : l'effet Hover, qui était implémenté sans utiliser de code JavaScript. Tout était HTML. + CSS. , a utilisé l'outil de révision pour examiner le code source et a constaté que la structure de base du HTML est la suivante :

Et le code de la partie HTML du code source que j'ai implémenté, exemple de comparaison :

<figure class="effect-julia">
  <img src="img/21.jpg" alt="img21"/>
  <figcaption>
    <h2>Passionate <span>Julia</span></h2>
    <div>
      <p>Julia dances in the deep dark</p>
      <p>She loves the smell of the ocean</p>
      <p>And dives into the morning light</p>
    </div>
    <a href="#">View more</a>
  </figcaption>         
</figure>

La différence évidente est que le code original utilise la nouvelle balise HTML5

<div class="hover-area area-Julia">
  <img src="imgs/21.jpg" height="360" width="480">
  <h3>PASSIONATE<strong>JULIA</strong></h3>
  <ul>
    <li>Julia dances in the deep dark.</li>
    <li>She loves the smell of the ocean</li>
    <li>And dives into the morning light</li>
  </ul>
</div>