1. MDN 課程
  2. 核心模組
  3. 2. 語義化 HTML

2. 語義化 HTML

Web 標準與語義

核心模組

HTML 是定義任何網站內容和結構的 기술。如果編寫得當，它還應以機器可讀的方式定義內容的語義（含義），這對於可訪問性、搜尋引擎最佳化以及利用瀏覽器為內容提供的內建功能以最佳方式執行至關重要。本模組涵蓋了該語言的基礎知識，然後探討了文件結構、連結、列表、影像、表單等關鍵領域。

通用資源

2.1 HTML 基本語法

學習成果

  • HTML 文件頂部需要 doctype。其最初的預期用途，以及它現在在一定程度上已成為歷史遺蹟的事實。

  • 使用 `lang` 屬性在 `` 標籤的開頭設定文件語言的必要性。

  • HTML 的 head 部分，以及它作為文件元資料容器的用途，包括關鍵用途

    • 設定字元編碼和標題等資訊。

    • 為搜尋引擎（例如 ``）和社交媒體平臺（例如 Open Graph Data）提供元資料，以及搜尋引擎最佳化（SEO）的好處。

    • 連結到用於瀏覽器和移動平臺的圖示。

    • 連結到樣式表和指令碼檔案。

  • HTML 的 body 部分，以及它作為頁面內容容器的用途。

  • HTML 元素的結構——元素、開始標籤、內容、結束標籤、屬性。

  • 什麼是 空元素（也稱為 void 元素），以及它們與其他元素的區別。

資源

2.2 良好的文件結構

學習成果

  • 如何透過標題以及這些標題下的內容來建立良好的文件結構。

  • 使用語義 HTML 而不是表現型 HTML

    • 一些表現型標記不應再使用（例如 `` 和 ``）；它們已被棄用。

    • 一些表現型標記已被重新用於具有新的語義含義（例如 `` 和 ``）。

    • 當需要塊級容器時，很容易只使用 `

      ` 元素，但你應該瞭解其他可用的結構元素及其好處（例如提高可訪問性）。例子包括 `
      `、`
      `、`
      `、`
      `、`

    注意:

    這裡要理解的一個關鍵點是語義標記和表現型標記之間的區別，這些術語的含義，以及為什麼語義標記對 SEO 和可訪問性很重要。

  • 標題級別需要邏輯地使用，即不要跳過級別或隨意使用它們，因為你想要達到特定的字型大小（這是 CSS 的工作）。

  • SEO 好處：例如，標題中的關鍵詞會得到提升。

注意:

此一致性標準不要求你深入研究編寫 SEO 友好內容的策略，儘管你應該理解這意味著什麼。

  • 可訪問性好處：輔助技術（AT），如螢幕閱讀器，使用標題和地標作為導航內容的標識。沒有標題的 HTML 文件對 AT 使用者來說很難使用。

  • 理解 HTML 需要正確巢狀。如果不正確，瀏覽器就必須猜測你想要什麼結構，而這可能不是你想要的。

  • 使用 HTML 驗證器 或其他類似工具驗證你的標記（例如，Firefox 中的 檢視原始碼 會用虛線紅色下劃線突出顯示驗證錯誤）。

資源

2.3 列表

學習成果

  • 三種列表的 HTML 結構——無序列表、有序列表和定義列表。

  • 理解定義列表比其他兩種型別使用頻率較低，其用例主要在學術和文件等領域。

  • 每種列表型別的正確用法。

注意:

  • 無序列表用於標記專案列表，其中順序不重要，例如購物清單。
  • 有序列表用於標記專案列表，其中順序很重要，例如一組方向。
  • 定義列表用於將術語列表與這些術語的描述相關聯，例如，購物車中的產品名稱和描述。
  • 列表的更廣泛用例，例如導航選單。

資源

2.4 高階文字技術

學習成果

  • 正確使用強調和重要性的元素，例如 `` 和 ``。

  • 理解表示其他不太常見的語義要求的 HTML 元素，例如

    • 引言。

    • 縮寫詞和首字母縮略詞。

    • 地址。

    • 時間和日期。

    • 上標和下標。

    • HTML 實體。

    • 其他文字標記功能，例如 ``、`` 和 ``。

注意:

此時不必對 HTML 提供的所有語義元素都有詳盡的瞭解，但你應該知道它們的存在，以及如何使用 MDN 進行查詢（如果你需要的話）。

資源

學習成果

  • 理解為什麼連結是 Web 的基本功能。沒有連結就沒有 Web。

  • `href` 屬性。

  • 絕對路徑和相對路徑，以及何時使用它們。

  • 路徑語法詳解——斜槓、單點和雙點。

  • 連結狀態及其重要性——`:hover`、`:focus`、`:visited` 和 `:active`。

  • 行內連結和塊級連結。

  • 理解編寫良好連結文字的好處，例如提高螢幕閱讀器使用者的可訪問性，以及潛在的積極 SEO 效果。

資源

2.6 媒體

學習成果

  • “替換元素”一詞——它的意思是什麼？

  • 影像、音訊、影片

    • 基礎知識——``、`` 和 `` 標籤。

    • 使用 `src` 指向資源（此處路徑也很重要；請參閱 2.5 連結）。

    • 使用 `width` 和 `height`，例如，以避免在影像載入完成並顯示後發生 UI 不愉快的抖動更新。

    • 影片和音訊特定的屬性，例如 `controls` 和 `muted`。

    • <sources>.

    • 最佳化 Web 媒體資源——保持檔案大小小。

  • 媒體資源和許可

    • 不同型別的許可——公共領域/CC0，寬鬆（例如 CC 許可，MIT），版權（權利管理/免版稅）。

    • 搜尋適當許可的媒體檔案以在專案中使用的，例如，透過 Google 圖片、Flickr 和 The Noun Project。

    • 遵守許可要求。

  • 媒體的替代文字（“alt 文字”）。

資源

2.7 其他互動元素

學習成果

  • 除了連結，`

注意:

這裡沒有明確提及許多輸入型別和表單功能；目的是獲得對按鈕和表單元素的良好總體介紹，並學習最常見的情況。高階/專門的情況可以根據需要進行學習，作為 Web 開發人員在其職業生涯中不斷學習的一部分。

  • <button>:

    • 按鈕型別——`button`、`submit` 和 `reset`。

    • 為什麼重置按鈕幾乎總是一個壞主意。

  • 常見的 `` 型別——`text`、`number`、`file`、`checkbox`、`radio`、`password`、`search` 和 `submit`。

  • 常用屬性——`name` 和 `value`。

  • 客戶端驗證基礎知識——`required`、`min`、`max`、`minlength`、`maxlength` 和 `pattern`。

注意:

請務必理解，客戶端表單驗證實際上是為了增強可用性，應與伺服器端表單驗證一起使用。它不能替代伺服器端驗證。

  • 使表單可訪問——正確的語義、`` 和 `for` 屬性。

注意:

  • 回到語義 HTML 的論點（另請參閱 2.2 良好的文件結構），你應該理解為什麼為正確的任務使用正確的元素很重要。例如，使用 `
  • 理解瀏覽器預設情況下為 `

  • 表單狀態及其重要性——`:focus`、`:readonly`、`:disabled` 等。

  • <textarea>.

  • `