語意 HTML

HTML 元素超過 100 個，且可建立自訂元素，讓您為內容加上標記有無無限的可能，但有些方式 (尤其是語意上) 優於其他元素。

語意是指「與意義相關」。撰寫語意 HTML 是指根據各元素的含義 (而非外觀)，使用 HTML 元素建構內容結構。

本系列目前未涵蓋許多 HTML 元素，但即使不知道 HTML，下列兩個程式碼片段也顯示語意標記如何為內容提供上下文。兩者都使用字數 (而不是 ipsum lorem) 來減少捲動畫面的情況，因此請想像一下，將「三十個字詞」擴增為 30 個字詞：

第一個程式碼片段使用 <div> 和 <span>，兩個沒有語意值的元素。

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

你知道這些字詞所延伸的是什麼嗎？其實不然

現在，讓我們使用語意元素重寫此程式碼：

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

哪個程式碼區塊傳達的意義？如果只使用 <div> 和 <span> 的非語意元素，就無法判斷第一個程式碼區塊中的內容所代表的內容。第二個使用語意元素的程式碼範例，可讓非編碼器的說明文字瞭解用途和意義，而且完全不會遇到 HTML 標記。這種做法能提供足夠的背景資訊，讓開發人員瞭解網頁大綱，即使不瞭解內容也一樣 (例如外語內容)。

語意標記不只是讓開發人員更容易閱讀，更重要的是讓自動化工具能輕易解讀標記。開發人員工具會示範語意元素如何提供機器可讀的結構。

無障礙物件模型 (AOM)

瀏覽器剖析收到的內容時，會建立文件物件模型 (DOM) 和 CSS 物件模型 (CSSOM)。然後建構無障礙樹狀結構。輔助裝置 (例如螢幕閱讀器) 會使用 AOM 剖析及解讀內容。DOM 是文件中所有節點的樹狀結構。AOM 就像 DOM 語意版本

讓我們比較這兩種文件結構在 Firefox 無障礙功能面板中的顯示方式：

在第二個螢幕截圖中，第二個程式碼區塊中有四個地標角色。此類別使用語意明確且命名為 <header>、<main>、<footer> 和 <nav> 的語意地標「導覽」。地標可讓網頁內容有架構，並確保重要內容部分能在螢幕閱讀器使用者輕鬆瀏覽。

請注意，<header> 和 <footer> 是地標，分別具有 banner 和 contentinfo 的角色，在這兩個界標中沒有巢狀結構的情況下。Chrome 的 AOM 會顯示如下：

查看 Chrome 開發人員工具時，您會注意到使用語意元素，以及同時使用語意元素時，兩者之間存在顯著差異。

語意元素的用法相當清楚，使用起來可以降低無障礙程度，使用非語意元素則會降低無障礙功能。一般而言，HTML 是預設且可存取的。我們身為開發人員的職責，是保護 HTML 的預設可存取性質，並確保我們盡可能提高無障礙程度。您可以在開發人員工具中檢查 AOM。

`role` 屬性

role 屬性會說明元素在文件中扮演的角色。role 屬性是全域屬性，表示此屬性對所有元素都有效；由 ARIA 規格 (而非 WHATWG HTML 規格) 定義，其中幾乎涵蓋本系列其他所有內容。

每個語意元素都具有隱含角色，有些則取決於內容。如 Firefox 無障礙開發人員工具螢幕截圖所示，頂層 <header>、<main>、<footer> 和 <nav> 都是地標，而 <main> 巢狀結構中的 <header> 是區段。Chrome 螢幕截圖列出這些元素的 ARIA 角色：<main> 是 main、<nav> 是 navigation，以及 <footer>，因為文件的頁尾為 contentinfo。如果 <header> 是文件的標頭，則預設角色是 banner，會將該區段定義為全域網站標頭。如果 <header> 或 <footer> 以巢狀結構嵌入區段元素中，則並非地標角色。兩個開發人員工具的螢幕截圖都會顯示。

建立 AOM 時，元素角色名稱相當重要。元素 (或「角色」) 的語意是輔助技術以及在某些情況下的重要用途。輔助技術使用者仰賴語意來瀏覽及理解內容的含義。該元素的角色可讓使用者快速存取自己尋找的內容，更重要的是，這些角色可告知螢幕閱讀器使用者，瞭解焦點後，該如何與互動元素互動。

按鈕、連結、範圍和核取方塊等互動元素均具備隱含角色，全都會自動新增至鍵盤分頁序列，且這些元素都有預設的預期使用者動作支援。隱含角色 (或明確的 role 值) 會通知使用者預期對於特定元素的預設使用者互動。

您可以利用 role 屬性為任何元素指派角色，包括與標記隱含不同的角色。舉例來說，<button> 具備 button 的隱含角色。透過 role="button"，您可以將任何語意元素轉換成按鈕：<p role="button">Click Me</p>。

雖然在元素中加入 role="button" 可以告知螢幕閱讀器該元素是按鈕，但這不會改變元素的外觀或功能。button 元素提供許多功能，您不必執行任何作業。button 元素會自動新增至文件的分頁排序序列，也就是說，根據預設，可聚焦於鍵盤。按下 Enter 鍵和空格鍵同時可啟用這個按鈕。按鈕也有由 HTMLButtonElement 介面提供的所有方法和屬性。如果您的按鈕沒有使用語意按鈕，就必須重新編寫所有這些功能。只要使用 <button>，就非常簡單。

返回 AOM 非語意程式碼區塊的螢幕截圖。請注意，非語意元素沒有隱含角色。我們可以為每個元素指派角色，讓非語意版本語意更通：

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

雖然 role 屬性可用來為任何元素新增語意，但建議您改用具有所需隱含角色的元素。

語意元素

您不妨想想看「這個標記的功能最是否能代表什麼元素？」這樣的做法通常會為您選擇最適合工作的元素。由於標記具有語意含義，因此您選擇的元素和標記應該適用於您顯示的內容。

HTML 的作用是建立內容結構，而非定義內容的外觀。外觀是 CSS 的運作範圍。雖然部分元素會以特定方式呈現，但請勿根據使用者代理程式樣式表對該元素預設顯示方式的原則來使用元素。而是根據元素的語意含義和功能選取每個元素。以邏輯、語意和有意義的方式編寫 HTML 程式碼，有助於確保系統按預期套用 CSS。

在編寫程式碼的同時，為工作選擇正確的元素，就不必重構 HTML 或為 HTML 加註。思考到工作時，您通常會選擇正確的元素。如果您不願意，可能就不需要。只要您瞭解每個元素的語意，並知道選擇正確的元素的重要性，您通常不需要額外費心，就能做出正確的選擇。

在下一節中，您將使用語意元素建立文件結構。

隨堂測驗

測驗您對於語意 HTML 的相關知識。

您應該一律將 role="button" 加入 <button> 元素。

不正確。

正確！<button> 元素已具備這個角色。

正確。

請再試一次。

語意 HTML

無障礙物件模型 (AOM)

role 屬性

語意元素

隨堂測驗

`role` 屬性