` qui contiendront des images.
+
+### Images
+
+Une balise html qui n'a pas besoin de balise de fermeture est la balise `![]()
`, car elle possède un élément `src` qui contient toutes les informations dont la page a besoin pour rendre l'élément.
+
+Créez un dossier dans votre application appelé `images` et ajoutez-y toutes les images du [dossier de code source](../solution/images) ; (il y a 14 images de plantes).
+
+### Tâche
+
+Ajoutez ces images de plantes dans deux colonnes entre les balises `` :
+
+```html
+`.
+
+### Tâche
+
+Ajoutez la ligne suivante juste en dessous de votre balise d'ouverture `` :
+
+```html
+
` :
+
+```html
+
+
+```
+
+> Note: Spans et Divs. Les divs sont considérés comme des éléments de type "bloc", tandis que les spans sont "en ligne". Que se passerait-il si vous transformiez ces divs en spans ?
+
+Avec ce balisage, les plantes apparaissent maintenant à l'écran. L'apparence est assez mauvaise, car elles n'ont pas encore été stylisées à l'aide de CSS, ce que nous ferons dans la prochaine leçon.
+
+Chaque image possède un texte alternatif qui s'affiche même si vous ne pouvez pas voir ou rendre l'image. Il s'agit d'un attribut important à inclure pour l'accessibilité. Vous en saurez plus sur l'accessibilité dans les prochaines leçons ; pour l'instant, souvenez-vous que l'attribut alt fournit des informations alternatives pour une image si, pour une raison ou une autre, un utilisateur ne peut pas la voir (en raison d'une connexion lente, d'une erreur dans l'attribut src ou si l'utilisateur utilise un lecteur d'écran).
+
+✅ Avez-vous remarqué que chaque image a la même balise alt ? Est-ce une bonne pratique ? Pourquoi ou pourquoi pas ? Pouvez-vous améliorer ce code ?
+
+---
+
+## Le balisage sémantique
+
+En général, il est préférable d'utiliser une "sémantique" significative lors de l'écriture du HTML. Qu'est-ce que cela signifie ? Cela signifie que vous utilisez les balises HTML pour représenter le type de données ou d'interaction pour lequel elles ont été conçues. Par exemple, le texte du titre principal d'une page doit utiliser une balise `
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+ `.
+
+### Tâche
+
+Ajoutez la ligne suivante juste en dessous de votre balise d'ouverture `` :
+
+```html
+My Terrarium
+```
+
+L'utilisation de balises sémantiques, telles que des en-têtes `` et des listes non ordonnées rendues sous la forme de ``, aide les lecteurs d'écran à naviguer dans une page. En général, les boutons doivent être écrits sous la forme `
- `, aide les lecteurs d'écran à naviguer dans une page. En général, les boutons doivent être écrits sous la forme `
+
+
+```
+
+✅ Bien que vous ayez ajouté cette balise à l'écran, vous ne voyez absolument rien rendre. Pourquoi ?
+
+---
+
+## 🚀Défi
+
+Il existe quelques "vieilles" balises sauvages en HTML avec lesquelles il est encore amusant de jouer, même si vous ne devriez pas utiliser des balises obsolètes telles que [ces balises](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) dans votre balisage. Pouvez-vous utiliser l'ancienne balise `
+
+
+
+
+
+