` 標籤來建立網頁中不同的元素。我們在一連串的 `
` 元素當中新增圖片。
+
+### 圖片
+
+其中一個不需要結束標籤的 html 標籤為 `
![]()
` 標籤，因為它含有 `src` 元素來提供所有網頁需要取得的資訊。
+
+在專案資料夾中新增一個名叫 `images` 的資料夾，複製[我們提供的圖片](../../solution/images)到資料夾裡面，一共有十四張圖片。
+
+### 課題
+
+新增這些植物圖片到 `` 標籤之間：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+> 筆記： Spans 和 Divs。 Divs 是種「塊」元素，而 Spans 是種「內聯」元素。替換它們會發生什麼事情？
+
+更新這些程式碼後，現在植物出現在畫面上了。他看起來很糟，因為我們還沒用 CSS 來美化它，我們會在下堂課中處理。
+
+每張圖片都有 alt 文字，即使是隱藏起來或沒取得的圖片。它是圖片提供網頁親和力很重要的屬性。你可以在之後學習更多關於網頁親和力的課程。現在，只需要記得 alt 屬性提供而外的圖片資訊，處理用戶無法觀看圖片時的資訊(連線太慢、src 屬性有誤、使用者使用螢幕報讀器......)。
+
+✅ 你有發現每張圖片都有相同的 alt 標籤嗎？這樣合理嗎？為什麼？你能改善它嗎？
+
+---
+
+## 語義化標籤
+
+綜觀來說，最好使用普遍意義的標籤名稱。這是什麼意思？這代表你的 HTML 標籤必須表現它的資料型態或是它的功能性。舉例來說，網頁上的標題文字就應該使用 `
` 標籤。
+
+新增下列程式碼到你的 `` 標籤中：
+
+```html
+我的盆栽盒
+```
+
+使用語義化標籤如：標題 `` 和未排序串列 `` ，能幫助螢幕報讀器理解網頁的內容。普遍來說，按鈕為 `
` 之前：
+
+```html
+
+```
+
+✅ 即使你在檔案中新增了程式碼，你卻沒看到任何東西。為什麼？
+
+---
+
+## 🚀 挑戰
+
+這邊有一些「古老」的 HTML 標籤。雖然[這些標籤](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)被歸為不推薦使用的標籤，但仍值得去嘗試的。你可以用 `