HTML

HTML5

HTML5 : La balise Figure

Wow, 4 trente-sous pour une piastre! La belle affaire, on remplace une classe par une balise! Ce n’est visiblement pas la même équipe! Moi je m’en balance, du HTML ou du CSS, ou même du Googlliage, du moment que l’on se branche! On est habitué aux revendications de la W3C qui tournent au discours philosophique! Mais ici je n’ai pas trouvé de différence outre Saint-Augustin avec une simple classe « .figure ». C’est ça le HTML5, une compréhension sémantique, historique et humoristique! Mais c’est quand même le fun et sans ambiguïté quand on creuse un peu.

Quant à la philosophie de son usage, je vous invite à lire le tutoriel « La Structure du HTML5 ».

La balise <figure>

<figure id="oMaFigure">
  <img src="image.png" alt="Text alternatif" />
</figure>

C’est en fait une unité de contenu, un encart pour isoler un bloc avec un contenu principalement constitué de un ou plusieurs éléments : multimédias, diagrammes, tableaux, illustrations, exemples, codes, images, vidéos, ou carrément du texte... Voir les balises <canvas> ou <svg>. Tout ce que l’on met en médaillon et/ou qui a une légende. D’ailleurs je prend mes vieux encarts HTML4, je remplace div par figurer et vice versa... et c’est du pareil au même. C’est donc une unité de contenu, exactement comme le serait une balise <div>, dans lequel s’insèrent divers éléments multimédia. J’ai beau chercher je ne trouve aucune différence à part une marge par défaut. Permettez ces quelques mots qui valent bien une image comme on peu voir ci contre, ou plus haut selon votre résolution ...voir la figure 1.0 pour les autres ;-).

J’ai depuis toujours utilisé une balise « div » avec une classe conteneur pour mes images, mes vignette. Ironiquement certain utilisait même la mnémonique « figure »! Mais contrairement ;a la W3C uniquement pour mes images médaillon. Généralement aligné à droite ou à gauche, je ne veux pas nécessairement que la balise « figure » réagisse toujours ainsi. J’utilise donc une classe avec la balise « figure »!

<article>
  <h1>Exemple avec la balise « figure »</h1>
  <figure id="oMaFigure" class="figure">
    <img src="image.png" alt="Text alternatif" />
    <figcaption>Légende</figcaption>
  </figure>
  <p>Article faisant référence au texte...</p>
    ...
</article>

Exemples

Avec une vidéo.

<figure>
  <video src="video.mp4"></video>
  <figcaption>Légende</figcaption>
</figure>

Avec du texte.

<figure>
  <p>Texte</p>
  <figcaption>Légende</figcaption>
</figure>

Combiner plusieurs figures

Un exemple simple pour combiner des éléments.

<figure>
  <img src="image.png" alt="Texte alternatif" />
  <img src="image.png" alt="Texte alternatif" />
  <img src="image.png" alt="Texte alternatif" />
  <figcaption>Légende</figcaption>
</figure>

On pourrait s’en contenter mais on peut aussi imbriquer la balise « figure » de cette façon. Est-ce que les sous-figures son aussi autonome? Je vous laisse sur cette exemple de la W3C...

<figure>
  <figcaption>Exemple de figure multiple</figcaption>
  <figure>
    <figcaption>Exemple 1</figcaption>
    <img src="image.png" alt="Texte alternatif" />
  </figure>
  <figure>
    <figcaption>Exemple 1</figcaption>
    <img src="image.png" alt="Texte alternatif" />
  </figure>
  <figure>
    <figcaption>Exemple 1</figcaption>
    <img src="image.png" alt="Texte alternatif" />
  </figure>
</figure>

Références

• The figure & figcaption elements by Richard Clark.
• W3C Grouping content : 4.4.11 The figure element
• W3C figure - figure with optional caption