Sommaire

Insérer des images avec l’élément <img>

1. L’utilisation des images

L’élément <img> est fait pour insérer des images d’illustration directement liées au contenu rédactionnel. D’un point de vue sémantique, cet élément n’est pas fait pour appliquer une image de fond à un en-tête ou toute autre zone d’affichage dans la page. Pour cela, il faut utiliser une règle CSS.

Image:src

2. L’attribut src

Le premier attribut quasiment obligatoire est src. Cet attribut permet d’indiquer le chemin d’accès à l’image qui doit être affichée. Le chemin d’accès s’indique usuellement relativement à la page contenant l’élément <img>.

Voici quelques exemples :

  • <img src="mon-image.png"> : l’image se trouve dans le même dossier que la page HTML.

  • <img src="images/mon-image.png"> : l’image se trouve dans un sous-dossier nommé images, placé dans le dossier contenant la page HTML. 

  • <img src="../mon-image.png"> : l’image se trouve dans le dossier parent du dossier contenant la page HTML.

Mais vous pouvez aussi choisir d’afficher une image déjà publiée sur le Web, avec un chemin absolu : <img src="http://www.mon-site.org/images/mon-image.png">. C’est une solution qu’il faut utiliser avec ...