Tag HTML<img>

❮ Précédent Suivant ❯

Le tag <img> est utilisé pour activer les images dans le document HTML. L’image n'est pas insérée directement dans le document, le navigateur le charge de la source spécifiée dans le tag <img>.

Il y a deux attributs requis pour l'élément <img> : src, qui est utilisé pour afficher la source de l'image , et alt, qui définit un texte alternatif pour l'image.

Pour rendre Les images HTML cliquable, vous devez placer le tag <img> dans le tag <a> , qui est utilisé pour inserer des liens.

Syntaxe

Le tag <img> est un seul élément, donc le tag fermant n’est pas requis.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h1>En-tête </h1>
    <p>C'est l'image d'Aleq</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Essayez-vous-même!

Résultat

Attributs

L’attribut src (source) est requis, car il indique le chemin à l’image. La valeur de l’attribut src peut être le nom du fichier, bien que son URL.

L’attribut alt est aussi requis pour le tag <img>. Sa valeur est un texte explicatif, qui est affiché dans le navigateur avant de téléchargement de l’image. Le navigateur affiche ce texte aussi en cliquant sur l’image avec un curseur de souris.

Nous vous recommandons d’inclure des mots-clés dans un texte alternatif. Cela améliorera le classement du site dans les moteurs de recherche.

Attribut	Valeur	Description
align	left right top bottom middle	Définit l'alignement de l'image par rapport aux éléments environnants. Non supporté en HTML5.
alt	text	Définit le texte alternatif pour l’image.
border	pixels	Définit l'épaisseur de la bordure autour de l'image. Non supporté en HTML5.
crossorigin
		Détermine si CORS est utilisé (une technologie permettant à une page Web d’accéder aux ressources d’un autre domaine) lors du téléchargement d’une image. Les images téléchargées avec CORS peuvent être utilisées dans l'élément <canvas> sans limiter les fonctionnalités de ce dernier.
	anonymous	Les requêtes -CORS de cet élément ne transmettront pas les informations d'identification
	use-credentials	Les requêtes -CORS de cet élément transmettront les informations d’identification. Nouvel attribut en HTML5.
height	pixels	Définit la hauteur de l’image.
hspace	pixels	Définit les espaces de gauche et de droit de l’image. Non supporté en HTML5.
ismap	ismap	Spécifie, que le contenu du tag est une image du serveur.
longdesc	URL	Indique l’adresse URL avec une déscription détaillée de l’image. (Pour la courte description de l’image on utilise l’attribut alt). Non supporté en HTML5.
src	URL	Spécifie le source de l’image.
usemap	#mapname	Indique le lien sur l’élément, qui contient coordonnées pour la carte image des clients.
vspace	pixels	Spécifie les espaces en haute et en bas de l’image. Non supporté en HTML5.
width	pixels	Définit la largeur de l’image.