html Balises figure et figcaption

Eleven Up

Membre
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
 
Dernière édition:

Hamza

Membre
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
HTML
<figure>
    <img src="URL_image" alt="">
    <figcaption>voici mon image</figcaption>
</figure>
 

L'occitan

Membre
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
 

Ces discussions pourraient vous intéresser...

Bonjour à tous, Utilisez vous cet attribut dans vos balises link pour charger vos fichiers JS et CSS ? <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> https://developer.mozilla.org/fr/docs/Web/HTML/Pr%C3%A9charger_du_contenu
Bonjour tout le monde, Pour m'exercer à JS je me suis lancé un petit défi: charger les fichier JS et CSS de mon projet via une fonction javascript et pas avec les lignes de code habituelles <script src="/js/script.js" type="text/javascript"></script> <link rel="stylesheet"...
Salut à tous ! Je souhaiterais utiliser des images aux formats Webp sur mon site mais je rencontre un problème de taille : Safari (iOS) ne sait pas les lire. Le format Webp est intéressant car il permet de réduire le poids des images de près de 30% sans perdre, ou très peu, en...
Haut