Balise d'image : <img>

La balise <img> est utilisée pour insérer des images dans une page web. Elle permet d'afficher visuellement du contenu graphique tel que des photos, des illustrations, des icônes, etc. La balise <img> est l'un des éléments essentiels pour rendre une page web plus visuellement attrayante et interactive.

Syntaxe de la balise <img>

La balise <img> est une balise auto-fermante qui ne nécessite pas de balise de fermeture. Elle utilise principalement deux attributs : src et alt.

Attribut src

L'attribut src (source) est utilisé pour spécifier l'emplacement de l'image à afficher. Cela peut être un chemin d'accès relatif ou une URL absolue vers l'image.

• Les chemins d'accès relatifs font référence à l'emplacement de l'image par rapport à la page HTML en cours. Vous pouvez utiliser des chemins d'accès relatifs pour spécifier l'emplacement de l'image dans la même arborescence de fichiers que la page HTML.

<img src="chemin/vers/image.jpg" alt="Texte alternatif" />

Dans cet exemple, l'image située à l'adresse chemin/vers/image.jpg sera affichée.

• Les URL absolues font référence à l'emplacement complet de l'image sur Internet. Vous pouvez utiliser des URL absolues lorsque l'image est hébergée sur un autre site ou lorsque vous souhaitez spécifier un emplacement précis sur Internet.

<img src="https://www.example.com/chemin/vers/image.jpg" alt="Texte alternatif" />

Dans cet exemple, l'image située à l'adresse complète https://www.example.com/chemin/vers/image.jpg sera affichée.

Attribut alt

L'attribut alt (texte alternatif) est utilisé pour fournir un texte descriptif qui sera affiché à la place de l'image si celle-ci ne peut pas être chargée ou pour les utilisateurs qui utilisent des technologies d'assistance.

<img src="chemin/vers/image.jpg" alt="Texte alternatif" />

Dans cet exemple, si l'image ne peut pas être chargée, le texte "Texte alternatif" sera affiché à la place.

Exemple d'utilisation de la balise <img>

Voici un exemple simple d'utilisation de la balise <img> avec des chemins relatifs et absolus :

<img src="image.jpg" alt="Une belle image" />
<img src="https://www.example.com/chemin/vers/image.jpg" alt="Une autre image" />

Dans cet exemple, la première balise <img> utilise un chemin relatif pour l'image image.jpg, tandis que la deuxième balise <img> utilise une URL absolue pour l'image https://www.example.com/chemin/vers/image.jpg.

Conclusion

La balise <img> est utilisée pour insérer des images dans une page web, ce qui contribue à rendre le contenu visuellement attractif et interactif. En utilisant les attributs src et alt, vous pouvez spécifier l'emplacement de l'image et fournir un texte alternatif pour une meilleure accessibilité.

Que vous utilisiez des chemins d'accès relatifs ou des URL absolues, assurez-vous de spécifier correctement l'emplacement de l'image pour qu'elle puisse être chargée avec succès. Les chemins relatifs sont pratiques lorsque l'image se trouve dans la même arborescence de fichiers que la page HTML, tandis que les URL absolues sont utiles pour référencer des images hébergées sur d'autres sites ou pour spécifier des emplacements précis sur Internet.

La balise <img> est un outil puissant pour améliorer l'aspect visuel de votre site web et pour transmettre efficacement votre message.