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

36 lines
1.2 KiB
Markdown
Raw Normal View History

2022-10-03 21:52:19 +02:00
# 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”.](https://developer.mozilla.org/fr/docs/Web/CSS/Replaced_element)
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.
2022-11-16 18:12:05 +01:00
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é.**
2022-10-03 21:52:19 +02:00
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
```html
<img
src="./images/banniere-promo.jpg"
alt="Économisez 40% avec le code BIENVENUE"
width="600"
height="60"
/>
```
```html
<img
src="https://photos-de-chats.fr/felix.png"
alt=""
width="300"
height="400"
/>
```