Tag HTML<img>

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>

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.

Le tag <img> supporte également les Attributs globaux et les Attributs d'événements.


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées