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