Apprends à ajouter des images à tes pages web en utilisant la balise img, à écrire un texte alternatif significatif pour l'accessibilité, et à utiliser figure et figcaption pour les descriptions d'images.
Les images sont ajoutées aux pages HTML en utilisant la balise <img>. Contrairement à la plupart des éléments HTML, la balise <img> est auto-fermante — elle n'a pas de balise de fermeture car elle n'entoure aucun contenu.
La balise <img> nécessite au moins un attribut pour être utile : l'attribut src, qui spécifie le chemin ou l'URL du fichier image.
<img src="photo.jpg">La valeur de src peut être un chemin relatif (pointant vers un fichier dans ton projet) ou une URL absolue (pointant vers une image hébergée sur le web). Par exemple :
src="images/cat.jpg"src="https://example.com/images/cat.jpg"L'attribut alt fournit un texte alternatif qui décrit l'image. C'est l'un des attributs les plus importants de tout le HTML, et tu devrais l'inclure sur chaque image.
Le texte alternatif remplit trois objectifs critiques :
Un bon texte alternatif est descriptif et concis. Décris ce que montre l'image, pas le fait que c'est une image (les lecteurs d'écran l'annoncent déjà comme une image).
alt="Golden retriever jouant à la balle dans un parc"alt="image" ou alt="dog.jpg" ou le laisser vide sans raison<!-- Basic image with alt text -->
<img src="sunset.jpg" alt="Orange sunset over the ocean">
<!-- Image with width and height attributes -->
<img src="logo.png" alt="Company logo" width="200" height="80">
<!-- Setting width and height helps the browser reserve
the correct amount of space before the image loads,
preventing layout shifts on the page. -->Parfois, tu veux afficher une image avec une légende visible en dessous. HTML fournit deux éléments sémantiques pour cela : <figure> et <figcaption>.
L'élément <figure> représente un contenu autonome qui est référencé depuis le texte principal — le plus souvent une image, mais il peut aussi entourer des diagrammes, des extraits de code ou des illustrations.
L'élément <figcaption> fournit une légende ou description pour la figure. Il doit être placé comme premier ou dernier enfant à l'intérieur de l'élément <figure>.
<figure>
<img src="chart.png" alt="Sales data for Q3 2024">
<figcaption>Figure 1: Quarterly sales exceeded projections by 15%.</figcaption>
</figure>Utiliser <figure> et <figcaption> au lieu d'un simple <div> et <p> donne à ton balisage une signification sémantique. Les lecteurs d'écran et les moteurs de recherche peuvent comprendre la relation entre l'image et sa légende.
Pourquoi devrais-tu toujours inclure un attribut alt sur les images ?