1. Description de la balise <figcaption>
La balise <figcaption> est une balise HTML utilisée principalement en conjonction avec la balise <figure>. Elle est utilisée pour fournir une légende ou une description textuelle à un élément multimédia, tel qu'une image, une illustration, une vidéo, ou tout autre contenu inclus dans la balise <figure>. La balise <figcaption> est utile pour fournir des informations contextuelles sur l'élément multimédia, améliorant ainsi l'accessibilité pour les utilisateurs qui dépendent de lecteurs d'écran, ainsi que pour fournir une meilleure expérience utilisateur en général en donnant du sens au contenu multimédia.
2. Syntaxe et usage de la balise <figcaption>
Voici comment fonctionne la balise <figcaption> :
<figure> : Vous devez d'abord envelopper l'élément multimédia que vous souhaitez légender avec la balise <figure>.
Par exemple:
|
1 2 3 |
<figure> <img src="mon-image.jpg" alt="Une image"> </figure> |
<figcaption> : Ensuite, à l'intérieur de la balise <figure>, vous pouvez inclure la balise <figcaption> pour fournir une légende descriptive pour l'élément multimédia. Par exemple :
|
1 2 3 4 |
<figure> <img src="mon-image.jpg" alt="Une image"> <figcaption>Une belle photo de paysage.</figcaption> </figure> |
- L'image est enveloppée dans la balise <figure> : et la légende "Une belle photo de paysage." est spécifiée à l'intérieur de la balise <figcaption>.
- Affichage : Cette légende est généralement affichée en dessous ou à côté de l'élément multimédia, en fonction de la mise en page du site Web et des styles CSS.
3. Exemples d'usages de la balise <figcaption>
Voici un exemple HTML complet qui utilise la balise <figure> avec la balise <figcaption> pour légender une image :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Exemple de balise <figcaption></title> </head> <body> <h1>Ma Page Web avec une Image Légendée</h1> <figure> <img src="https://www.tresfacile.net/images/montagne.png" alt="Une image de montagne"> <figcaption>Une superbe vue sur les montagnes enneigées.</figcaption> </figure> <p>Ceci est un exemple d'utilisation de la balise <figcaption> pour légender une image.</p> </body> </html> |
Lorsque vous affichez cette page HTML dans un navigateur, vous verrez l'image avec sa légende associée, ce qui améliore l'accessibilité et permet aux utilisateurs de comprendre le contenu de l'image, même si l'image ne peut pas être vue ou chargée pour une raison quelconque:
Explication:
- <figure> : Nous enveloppons l'image dans la balise <figure> pour indiquer que cette image est associée à une légende.
- À l'intérieur de la balise <figure>: nous utilisons la balise <img> pour afficher l'image.
- L'attribut alt de la balise <img> : fournit un texte alternatif pour l'image, qui est important pour l'accessibilité.
- La balise <figcaption> : est utilisée à l'intérieur de la balise <figure> pour spécifier la légende de l'image. Dans cet exemple, la légende est "Une superbe vue sur les montagnes enneigées."
Younes Derfoufi
CRMEF OUJDA
1 thought on “La balise <figcaption> HTML”