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