Le nouveau conteneur figure

Le conteneur figure peut être utilisé pour regrouper des éléments tels une image et sa légende ou une vidéo et sa légende, 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;}

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' width ='90%'> <figcaption>Naissance d'un fleuve</figcaption> </figure> <h2>Exemple 2 : musique et son titre</h2> <figure> <img src ='../images/foret.jpg' width ='90%'> <audio controls src = "../audio_video/automne.mp3" > <p>votre navigateur est obsolète et ne peut lire le fichier audio</p> </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