Utilisation de <figure> et <figcaption>

7.1 Élément <figure>

L'utilisation des balises <figure> et <figcaption> en HTML offre un moyen sémantique d'ajouter des images et d'autres éléments multimédias avec des légendes. Ces balises aident à améliorer la structure du contenu, le rendant plus accessible et compréhensible pour les utilisateurs ainsi que pour les moteurs de recherche. Regardons ces éléments de plus près.

L'élément <figure> est utilisé pour désigner un contenu autonome qui illustre ou explique le reste du document. Il peut contenir une image, un diagramme, une vidéo, un audio, un tableau ou même un bloc de code. Généralement, l'élément <figure> est utilisé avec l'élément <figcaption>, qui ajoute une légende au contenu de <figure>.

Syntaxe

    
      <figure>
        <!-- Tout élément multimédia comme une image peut être ici -->
      </figure>
    
  

Exemples d'utilisation :

Exemple 1 : Image avec une légende

    
      <figure>
        <img src="example.jpg" alt="Exemple d'image">
        <figcaption>Légende de l'image expliquant son contenu</figcaption>
      </figure>
    
  

Exemple 2 : Tableau avec une légende

    
      <figure>
        <table>
          <tr>
            <th>Titre 1</th>
            <th>Titre 2</th>
          </tr>
          <tr>
            <td>Donnée 1</td>
            <td>Donnée 2</td>
          </tr>
        </table>
        <figcaption>Légende du tableau</figcaption>
      </figure>
    
  

7.2 Élément <figcaption>

L'élément <figcaption> est utilisé pour ajouter une légende au contenu de l'élément <figure>. Il peut être placé avant ou après le contenu de <figure>, selon les préférences du développeur ou les exigences du design.

Syntaxe

    
      <figure>
        <!-- Contenu de l'élément figure -->
        <figcaption>Légende du contenu</figcaption>
      </figure>
    
  

Exemples d'utilisation :

Exemple 1 : Légende après l'image

    
      <figure>
        <img src="landscape.jpg" alt="Paysage">
        <figcaption>Beau paysage avec des montagnes et un lac</figcaption>
      </figure>
    
  

Exemple 2 : Légende avant l'image

    
      <figure>
        <figcaption>Beau paysage avec des montagnes et un lac</figcaption>
        <img src="landscape.jpg" alt="Paysage">
      </figure>
    
  

7.3 Accessibilité et SEO

L'utilisation des éléments <figure> et <figcaption> améliore l'accessibilité et le SEO de votre site. Les logiciels de lecture d'écran utilisés par les personnes ayant des limitations comprennent mieux le contexte de l'image grâce à la balise sémantique <figcaption>. Les moteurs de recherche prennent également en compte la structure du document HTML, ce qui aide à améliorer l'indexation et le classement de la page.

Exemples d'utilisation dans différents contextes :

Exemple 1 : Intégration d'un diagramme

    
      <figure>
        <img src="chart.png" alt="Diagramme montrant la croissance des ventes">
        <figcaption>Diagramme montrant la croissance des ventes du dernier trimestre</figcaption>
      </figure>
    
  

Exemple 2 : Contenu vidéo avec légende

    
      <figure>
        <video controls>
          <source src="example.mp4" type="video/mp4">
          Votre navigateur ne supporte pas la vidéo.
        </video>
        <figcaption>Exemple de vidéo démontrant le fonctionnement du produit</figcaption>
      </figure>
    
  

Exemple 3 : Code avec explication

    
      <figure>
        <pre>
          <code>
            function helloWorld() {
              console.log('Hello, world!');
            }
          </code>
        </pre>
        <figcaption>Exemple de fonction en JavaScript affichant "Hello, world!" dans la console</figcaption>
      </figure>
    
  

7.4 Style et mise en forme avec CSS

Le stylisme des éléments <figure> et <figcaption> avec CSS permet de créer une présentation visuelle attrayante et d'améliorer la perception du contenu.

Exemple de styles appliqués :

    
      figure {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 20px;
        text-align: center;
      }

      figcaption {
        font-style: italic;
        color: #555;
        margin-top: 10px;
      }
    
  

    
      <figure>
        <img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
        <figcaption>Belle vue sur la nature</figcaption>
      </figure>
    
  

    
      <figure>
        <img src="nature.jpg" alt="Nature">
        <figcaption>Belle vue sur la nature</figcaption>
      </figure>
    
  

L'utilisation des éléments <figure> et <figcaption> offre un moyen sémantique et structuré d'ajouter du contenu multimédia avec des légendes sur les pages web. Ces éléments non seulement améliorent l'accessibilité et le SEO, mais rendent également le contenu plus compréhensible et structuré pour les utilisateurs.