Les figures

Parent Previous Next

Les figures



Les figures 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 :

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 :

Code : HTML

<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 :

Code : HTML 

<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.

Code : HTML 

<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 :

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 :

Code : HTML 

<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>


Créé avec HelpNDoc Personal Edition: Environnement de création d'aide complet