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