HTML5 : la balise figure pour contenir un média

Le conteneur figure peut être utilisé pour regrouper des éléments tels une image et sa légende ou une vidéo et son titre, etc.
Le conteneur figure contient entre autres la nouvelle balise figcaption.
Les balises figure et figcaption sont nativement de type block !

Exemple 1 : image et sa légende

Naissance d'un fleuve

Exemple 2 : musique et son titre

Légende d'automne

Le code correspondant

Le code CSS

	figure { width : 80% ; margin : 10px auto 10px auto ; border : 1px solid black ;}
	figcaption {font-style : italic ; font-weight : bold ;text-align : center;}
	.image_grand {display : block ; width : 80%; margin : 5px auto 5px auto; }

La boîte balisée figure sera centrée horizontalement dans sa boîte parente.
La légende du média sera centrée dans sa boîte, en italique et gras.

Le code HTML

<h2>Exemple 1 : image et sa légende</h1> <figure> <img src = '../images/riviere.jpg' class ="image_grand"> <figcaption>Naissance d'un fleuve</figcaption> </figure> <h2>Exemple 2 : musique et son titre</h2> <figure> <img src ='../images/foret.jpg' class ="image_grand"> <audio controls> <source src = "../audio_video/automne.mp3" > <source src = "../audio_video/automne.ogv" > </audio> <figcaption>Légende d'automne</figcaption> </figure>

Notez la disposition harmonieuse de l'image et de sa légende.

Dans le cadre d'un site adaptatif les largeurs des balises figure, img sont exprimées en % !
Le conteneur figure peut être utilisé aussi pour intégrer une vidéo dans une page. Voir page suivante du tuto.
Retour menu