Sommaire

Insérer des illustrations avec l’élément <figure>

1. L’utilisation des Illustrationillustrations

Les images permettent d’illustrer directement un contenu et les deux sont intimement liés. Les illustrations peuvent se suffire à elles-mêmes et n’ont pas besoin d’un texte rédactionnel pour être compréhensibles. De plus, la position de l’illustration peut être indépendante vis-à-vis du texte. Attention, le contenu d’une illustration peut être une ou des images photographiques, mais cela peut être aussi un dessin, une vidéo, un tableau ou un long extrait de code. Voilà les différences sémantiques entre l’utilisation d’une image et d’une illustration. 

2. L’élément <figure>

C’est l’élément <figure> qui permet d’insérer une illustration dans votre page web. Cet élément possède une balise d’ouverture et une balise de fermeture.

<figure> 
   ... 
</figure>

L’élément <figure> est de type block, voici ses paramètres d’affichage par défaut :

figure { 
     display: block; 
     margin-top: 1em; 
     margin-bottom: 1em; 
     margin-left: 40px; 
     margin-right: 40px; 
}

3. L’élément <figcaption> ...