img. img.
Certaines balises sont considérées comme des éléments remplacés : à l'affichage, le navigateur remplace la balise par une image ou pour les formulaires par un champ de saisi, des cases à cocher, des menus déroulants, des boutons radio, etc. La balise img permet l'affichage d'une image. Il faut préciser à l'aide de différents couples d'attribut/valeur le nom du fichier de l'image, un descriptif, et accessoirement les dimensions de l’image. Voici un exemple : <img src="cheminEtnomImage" alt="description de l'image" whidth="largeurImageEnPixel" height="hauteurImageEnPixel" />
Il indique le nom du fichier correspondant à l’image et le chemin pour l'atteindre. Il existe deux méthodes pour indiquer ce chemin :
Elle commence à partir du dossier racine du site et est suivi de l’arborescence des dossiers permettant d’atteindre le fichier. Exemple (image du logo html 5): http://www.w3.org/html/logo/img/mark-word-icon.png http://www.w3.org correspond au nom de domaine, mais également au dossier racine du site qui contient tous les autres dossiers et fichiers du site. L’image (mark-word-icon.jpg) sera dans ce cas accessible en indiquant l’adresse absolue : src="http://www.w3.org/html/logo/img/mark-word-icon.png"
Elle commence à partir de la localisation dans l’arborescence du site du fichier html qui contient la balise img de l’image à afficher. Le navigateur en ouvrant un fichier html connaît forcément sa situation dans la structure des dossiers du site. En lisant le code de ce fichier toute adresse qui ne commence pas par http sera considérée comme relative et aura comme référence l'emplacement du fichier html en cours de lecture. Si on reprend l’exemple plus haut, le fichier html qui contient la balise img se trouve à l’adresse http://www.w3.org/html/logo/index.html: Adresse absolue : src="http://www.w3.org/html/logo/img/mark-word-icon.png" Adresse relative : src="img/mark-word-icon.png". En effet le dossier img se trouve au même endroit que le fichier index.html.
Cet attribut est obligatoire, sa valeur correspond à un texte décrivant l’image. Il permet notamment aux malvoyants d’obtenir une information textuel sur l’image (lecteur vocal).
Ils donnent les dimensions de l’image. Attention, il ne faut pas utiliser ces attributs pour dimensionner une image, mais pour indiquer au navigateur de «réserver» l’espace qui sera occupé par l’image lorsqu’elle sera chargée. Il est toujours préférable de mettre les images à leurs dimensions finales d’affichage à l’aide d’un logiciel dédié type photoshop (maîtrise de la qualité des images, optimisation du poids des fichiers et de leurs téléchargements, etc.) Ces attributs sont optionnels.