HTML5 - Les Images "les figures"

Au cours de la lecture de ce livre, vous avez déjà rencontré plusieurs fois des figures. Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page.

Les figures peuvent être de différents types :

• images ;
• codes source ;
• citations ;
• etc.

Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images mais, contrairement à ce qu'on pourrait croire, les figures ne sont pas forcément des images : un code source aussi illustre le texte.

Création d'une figure

Reprenons par exemple cette capture d'écran du premier chapitre, représentée à la figure suivante.

Le logiciel Bloc-Notes

En HTML5, on dispose de la balise <figure>. Voici comment on pourrait l'utiliser :

1 2 3

<figure>     <img src="images/blocnotes.png" alt="Bloc-Notes" /> </figure>

Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende, utilisez la balise <figcaption> à l'intérieur de la balise <figure>, comme ceci :

1 2 3 4

<figure>     <img src="images/blocnotes.png" alt="Bloc-Notes" />     <figcaption>Le logiciel Bloc-Notes</figcaption> </figure>

Bien comprendre le rôle des figures

Un peu plus tôt dans ce chapitre, je vous ai dit que les images devaient être situées dans des paragraphes (placées à l'intérieur d'une balise <p></p>). Ce n'est pas tout à fait vrai.

Si vous faites de votre image une figure, l'image peut être située en-dehors d'un paragraphe.

1 2 3 4 5 6

<p>Connaissez-vous le logiciel Bloc-Notes ? On peut faire des sites web avec !</p>   <figure>     <img src="images/blocnotes.png" alt="Bloc-Notes" />     <figcaption>Le logiciel Bloc-Notes</figcaption> </figure>

Je ne vois pas vraiment de changement. Quand dois-je placer mon image dans un paragraphe et quand dois-je la placer dans une figure ?

Bonne question ! Tout dépend de ce que votre image apporte au texte :

• Si elle n'apporte aucune information (c'est juste une illustration pour décorer) : placez l'image dans un paragraphe.
• Si elle apporte une information : placez l'image dans une figure.

La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte. Cela peut permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures, par exemple.

Enfin, sachez qu'une figure peut très bien comporter plusieurs images. Voici un cas où cela se justifie :

1 2 3 4 5 6

<figure>     <img src="images/internetexplorer.png" alt="Logo Internet Explorer" />     <img src="images/firefox.png" alt="Logo Mozilla Firefox" />     <img src="images/chrome.png" alt="Logo Google Chrome" />     <figcaption>Logos des différents navigateurs</figcaption> </figure>

En résumé

• Il existe plusieurs formats d'images adaptées au Web :
  • JPEG : pour les photos ;
  • PNG : pour toutes les autres illustrations ;
  • GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être animé.
• On insère une image avec la balise <img />. Elle doit obligatoirement comporter au moins ces deux attributs : src (nom de l'image) et alt (courte description de l'image).
• Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la placer au sein d'une balise <figure>. La balise <figcaption> permet d'écrire la légende de l'image.