` 元素來包含圖片。
### 圖片
有一個 HTML 標籤不需要關閉標籤，那就是 `![]()
` 標籤，因為它有一個 `src` 屬性，包含頁面渲染該項目所需的所有資訊。
在你的應用中建立一個名為 `images` 的資料夾，並將 [原始碼資料夾](../../../../3-terrarium/solution/images) 中的所有圖片添加到該資料夾中；（共有 14 張植物圖片）。
### 任務
在 `` 標籤之間添加這些植物圖片到兩個欄位中：
```html
```
> 注意：Span 和 Div 的區別。Div 被認為是「區塊」元素，而 Span 是「內聯」元素。如果你將這些 div 轉換為 span，會發生什麼？
使用這些標記，植物現在會顯示在螢幕上。看起來可能很糟，因為它們尚未使用 CSS 進行樣式設計，我們會在下一節課中完成這部分。
每張圖片都有替代文字，即使你無法看到或渲染圖片，這些文字也會顯示出來。這是一個重要的屬性，有助於提升無障礙性。在未來的課程中，我們會學習更多關於無障礙性的內容；目前請記住，alt 屬性為圖片提供了替代資訊，當使用者因某些原因無法查看圖片時（例如網速慢、src 屬性錯誤，或使用者使用螢幕閱讀器），這些資訊會顯示出來。
✅ 你是否注意到每張圖片都有相同的 alt 標籤？這是好的做法嗎？為什麼？你能改進這段程式碼嗎？
---
## 語義化標記
一般來說，在撰寫 HTML 時，使用有意義的「語義」是更好的選擇。這意味著你應該使用 HTML 標籤來表示它們設計用於的數據或交互類型。例如，頁面上的主要標題文字應使用 `` 標籤。
在開啟的 `` 標籤下方添加以下內容：
```html
` 標籤上方添加以下標記：
```html
` 標籤。
在開啟的 `` 標籤下方添加以下內容：
```html
My Terrarium
```
使用語義化標記，例如將標題設為 ``，將無序列表渲染為 ``，有助於螢幕閱讀器導航頁面。一般來說，按鈕應該寫為 `
- `，有助於螢幕閱讀器導航頁面。一般來說，按鈕應該寫為 `