Des images qui font bonne figure

L'élément figure est loin d'être connu par les développeurs qui se mettent au HTML5. Il gagne pourtant à être maîtrisé.

L'indépendance des images

Jusqu'à présent, les images étaient simplement insérées dans la continuité du texte sous cette forme:

   <img src="monImage.jpg"/>

Mais si on veut associer une légende à cette image, il est nécessaire d'encadrer l'image avec un élément div> de cette manière:

<div>
   <img src="monImage.jpg"/>
   <div>légende de l'image</div>
</div>

Avec cette manière de coder, il est difficile d'associer explicitement la légende encadrée par div avec l'image. Un programme d'analyse syntaxique, ceux des moteurs de recherche par exemple, vont comprendre cette division comme sous-ensemble du texte général.

Le nouvel élément figure règle ce problème en séparant clairement l'élément img du contexte du flux général:

<figure>
   <img src="imageExemple.jpg"/>
   <figcaption>l'apéro</figcaption>
</figure>

Et ce que ça donne:

L'élément figure n'a initialement aucun style associé. Pour notre exemple, nous souhaitons qu'il s'affiche à droite du texte général. On va lui associer le code CSS suivant:

figure {
    display: block;
    float: right;
    width: 200px;
    text-align: center;
    margin: 0px;
    padding: 4px;
    border: 1px solid #cfcfcf;
}
 
figure img {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
figure figcation {
    font-style: italic;
}

Ici, l'image est bien sortie du contexte général.

Au passage, on en profite pour forcer la dimension de l'image à 200 pixels. L'image originale faisant 320 pixels de large, on la contraint à prendre la taille maximale du contenant, ici la largeur de l'élément figure qu'on a fixé à 200 pixels.

On a défini img en css, ainsi seul l'élément img placé dans figure aura une taille et un style modifié, les autres éléments img en dehors de figure conserveront leur présentation inchangée.

L'élément figcaption doit être utilisé à l'intérieur de figure pour afficher la légende associée à l'image. Dans notre exemple, on a mis cette légende sous l'image, en caractères italique et texte centré.

Avec figure et figcaption il n'est plus nécessaire de faire des acrobaties avec des imbrications de div ou des horreurs avec table.

Une galerie simplifiée

Le problème qui nous est soumis est le suivant: comment afficher une succession d'images, et une arrivé en bout d'écran, on revient en début de ligne suivante? Si on a un écran peu large, on affiche 3 ou 4 images par lignes, si on a un écran très large, on affiche 6 ou 8 ou plus d'images par ligne.

Vous l'avez compris, on va bannir table qui doit servir seulement pour afficher des données en lignes et colonnes.

On redéfinit le css de figure comme suit:

figure {
    display: inline-block;
    height: 180px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    margin: 2px;
    padding: 4px;
    border: 1px solid #cfcfcf;
}
 
figure img {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
figure figcation {
    font-style: italic;
}

Et maintenant, il n'y a plus qu'à décrire notre succesion d'images:

<figure>
    <img src="vignette.01.jpg"/>
</figure>
<figure>
    <img src="vignette.02.jpg"/>
</figure>
<figure>
    <img src="vignette.03.jpg"/>
</figure>
<figure>
    <img src="vignette.04.jpg"/>
</figure>
...etc...

Et le résultat à l'affichage:

Si on veut mettre plus de vignettes sur la ligne, on peut diminuer la largeur de figure: width: 200px;

Les images Ascii-Art

Les images composées à partir de lettres et autres caractères ASCII ne sont pas des éléments indépendants comme pourraient l'être des images au format jpeg, gif ou png.

Sans figure, nous n'aurions aucun moyen de déclarer sémantiquement ces caractères comme une image. Voici le code pour décrire un petit poisson en art-ascii:

<figure>
     <pre>
 
o           .'`/
    '      /  (
  O    .-'` ` `'-._      .')
     _/ (o)        '.  .' /
     )       )))     ><  <
     `\  |_\      _.'  '. \
       '-._  _ .-'       '.)
           `\__\
     </pre>
     <figcaption>un poisson en Ascii-Art</figcaption>
</figure>

o           .'`/
    '      /  (
  O    .-'` ` `'-._      .')
     _/ (o)        '.  .' /
     )       )))     ><  <
     `\  |_\      _.'  '. \
       '-._  _ .-'       '.)
           `\__\
    

Sur le plan sémantique, un moteur de recherche qui va analyser cette page web comprendra que les informations comprises entre <figure> et </figure> sont à analyser comme image et non comme des caractères typographiques!