` 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 nécessaires à la page pour rendre l'élément. Créez un dossier dans votre application appelé `images` et ajoutez-y toutes les images du [dossier source](../../../../3-terrarium/solution/images) ; (il y a 14 images de plantes). ### Tâche Ajoutez ces images de plantes dans deux colonnes entre les balises `` : ```html ``` > Note : Spans vs. Divs. Les Divs sont considérés comme des éléments 'block', et les Spans comme des éléments 'inline'. Que se passerait-il si vous transformiez ces divs en spans ? Avec ce balisage, les plantes apparaissent maintenant à l'écran. Cela a un aspect assez mauvais, car elles ne sont pas encore stylées avec CSS, ce que nous ferons dans la prochaine leçon. Chaque image possède un texte alternatif qui apparaîtra même si vous ne pouvez pas voir ou rendre une image. C'est un attribut important à inclure pour l'accessibilité. Vous en apprendrez davantage sur l'accessibilité dans les leçons futures ; pour l'instant, rappelez-vous que l'attribut alt fournit des informations alternatives pour une image si 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 le même texte alternatif ? Est-ce une bonne pratique ? Pourquoi ou pourquoi pas ? Pouvez-vous améliorer ce code ? --- ## Balisage sémantique En général, il est préférable d'utiliser des 'sémantiques' significatives lors de l'écriture de HTML. Qu'est-ce que cela signifie ? Cela signifie que vous utilisez des balises HTML pour représenter le type de données ou d'interaction pour lequel elles ont été conçues. Par exemple, le texte principal d'un titre sur une page devrait utiliser une balise `

`. Ajoutez la ligne suivante juste en dessous de votre balise d'ouverture `` : ```html

My Terrarium

``` Utiliser un balisage sémantique, comme avoir des en-têtes en `

` et des listes non ordonnées rendues en `

`, aide les lecteurs d'écran à naviguer sur une page. En général, les boutons devraient être écrits comme `` et les listes comme `
• `. Bien qu'il soit _possible_ d'utiliser des éléments `` spécialement stylés avec des gestionnaires de clics pour imiter des boutons, il est préférable pour les utilisateurs handicapés d'utiliser des technologies pour déterminer où se trouve un bouton sur une page et interagir avec lui, si l'élément apparaît comme un bouton. Pour cette raison, essayez d'utiliser autant que possible un balisage sémantique. ✅ Regardez un lecteur d'écran et [comment il interagit avec une page web](https://www.youtube.com/watch?v=OUDV1gqs9GA). Pouvez-vous comprendre pourquoi un balisage non sémantique pourrait frustrer l'utilisateur ? ## Le terrarium La dernière partie de cette interface consiste à créer un balisage qui sera stylé pour créer un terrarium. ### Tâche : Ajoutez ce balisage au-dessus de la dernière balise `