cours/docs/dev/fragments/html/04-image.md

1.2 KiB
Executable File

Image

Description

Afin d'insérer une image dans son document, il convient d'utiliser la balise <img>. Cette dernière est particulière car elle n'a pas besoin de balise dite “fermante”

C'est une balise qui fait partie de la famille des “Éléments remplacés”.

Cette balise nécessite deux attributs obligatoires: src et alt et deux attributs recommandés: width et height.

L'attribut src nous permet de renseigner la source de l'image. Que ce soit une URL distante ou bien un chemin vers une image locale.

L'attribut alt est à renseigner si l'image est “porteuse de sens”. Si l'image est décorative, l'attribut alt doit rester vide mais ne doit pas être supprimé.

Les attributs width et height sont à renseigner dans la mesure du possible afin que le navigateur réserve la place nécessaire à l'image au moment du chargement de la page.

Exemples

<img
  src="./images/banniere-promo.jpg"
  alt="Économisez 40% avec le code BIENVENUE"
  width="600"
  height="60"
/>
<img
  src="https://photos-de-chats.fr/felix.png"
  alt=""
  width="300"
  height="400"
/>