html Balises figure et figcaption

[Eleven Up]

Bonjour à tous,

Je peine à comprendre l'utilisation des balises <figure> et <figcaption>.
On la recommande pour des images, des vidéos ou des blocs de code mais à quoi servent-elles exactement ? Je ne vois pas trop de différence graphique lorsque je les utilise.

Merci

 

[Hamza]

Salut, bien utilisé tu devrais voir une différence, <figcaption> permet d'ajouter une légende au contenu.
Comment utilises-tu ces balises ?

Cela devrait être comme ça

<figure>
    <img src="URL_image" alt="">
    <figcaption>voici mon image</figcaption>
</figure>

 

[Wazz9]

On la recommande pour des images, des vidéos ou des blocs de code mais à quoi servent-elles exactement ?

Comme le dit @Hamza c'est un des 'Best Practice' pour afficher une légende sous un bloc contenant un image/vidéo/diagrammes/schémas...

Les navigateurs considèrent les figcaption comme des éléments importants d'une page web, son utilité est là également.

 

[Anthony]

Et hop ! Merci Codepen,

 

[Eleven Up]

merci pour vos réponses et l'exemple mais j'ai du mal m'exprimer, quelle différence ente cette méthode, et pour reprendre l'exemple d'Anthony, ce code ?

<div>
    <img src="URL_image" alt="image" />
    <p>Voici le logo officiel HTML5</p>
</div>

 

[L'occitan]

Bonjour, si je peux me permettre, la réponse a déjà été donnée un peu plus haut par Wazz9

Les navigateurs considèrent les figcaption comme des éléments importants d'une page web, son utilité est là également.

En effet d'une part le navigateur considère l'élément plus important qu'un simple span et d'autre part il lie automatiquement la légende à l'élément contenu dans figure.
Un simple span n'est rien d'autre qu'un bloc de texte qui n'a aucun lien html avec le contenu au dessus de lui. Visuellement l'utilisateur du site va comprendre que le texte du span est lié à la photo par exemple mais pas un navigateur.
Niveau SEO c'est bien mieux !

A bientôt,
L'occitan