標題和章節

在上一節中，您已瞭解即使不知道網頁上的字詞代表什麼意思，只要語意元素為文件提供有意義的結構，其他人 (搜尋引擎、輔助技術、未來的維護人員、新團隊成員) 就能瞭解文件大綱。

在本節中，您將瞭解文件結構、複習上一節的分節元素，並標記應用程式的大綱。

在編寫程式碼時選擇合適的元素，就不用重構或註解排除 HTML。只要思考如何選用合適的元素，通常就能做出正確選擇。如果沒有，可能就不會。

現在您已瞭解標記語意，也知道選擇正確元素的重要性，只要瞭解所有不同的元素，通常就能輕鬆挑選正確的元素。

網站 <header>

首先，您應該建立網站標頭。請先從非語意標記開始，然後逐步找出合適的解決方案，這樣您就能瞭解 HTML 區段和標題元素的優點。

如果對標頭的語意不甚瞭解，可能會使用類似以下的程式碼：

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS 幾乎可以讓任何標記看起來正確。但如果所有內容都使用非語意 <div>，反而會增加額外工作。如要使用 CSS 指定多個 <div>，您最終會使用 ID 或類別來識別內容。程式碼也包含每個結尾 </div> 的註解，指出每個 </div> 關閉的開頭標記。

雖然 id 和 class 屬性提供樣式和 JavaScript 的掛鉤，但不會為螢幕閱讀器和 (大部分) 搜尋引擎增加語意價值。

您可以加入 role 屬性來提供語意，為螢幕閱讀器建立良好的無障礙物件模型 (AOM)：

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

這至少能提供語意，並在 CSS 中使用屬性選取器，但仍會加入註解，指出每個 </div> 關閉的是哪個 <div>。

如果你懂 HTML，只要思考內容的目的即可。接著，您可以使用語意編寫這段程式碼，不必使用 role，也不必為結尾標記加上註解：

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

這段程式碼使用兩個語意地標：<header> 和 <nav>。

這是主要標題。<header> 元素不一定是地標。視巢狀結構的位置而定，其語意會有所不同。當 <header> 位於頂層時，它是網站 banner，這是一個地標角色，您可能已在 role 程式碼區塊中注意到。如果 <header> 巢狀結構位於 <main>、<article> 或 <section> 中，系統只會將其識別為該區段的標題，而不是地標。

<nav> 元素會將內容識別為導覽。由於這個 <nav> 巢狀結構位於網站標題中，因此是網站的主要導覽。如果巢狀結構位於 <article> 或 <section> 中，則只會是該部分的內部導覽。使用語意元素，即可建構有意義的無障礙物件模型 (AOM)。AOM 可讓螢幕閱讀器通知使用者，這個部分包含主要導覽區塊，使用者可以瀏覽或略過。

使用 </nav> 和 </header> 結尾標記，就不需要使用註解來識別每個結尾標記關閉的元素。此外，為不同元素使用不同標記，就不需要 id 和 class 鉤子。CSS 選取器的特異性可能較低，因此您可以使用 header nav a 指定連結，不必擔心發生衝突。

您編寫的標頭只有極少 HTML，且沒有類別或 ID。使用語意 HTML 時，就不需要這麼做。

網站 <footer>

編寫網站頁尾程式碼。

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

與 <header> 類似，頁尾是否為地標取決於頁尾的巢狀結構位置。如果用來表示網站頁尾，則屬於地標，應包含您希望在每個網頁上顯示的網站頁尾資訊，例如著作權聲明、聯絡資訊，以及隱私權和 Cookie 政策連結。網站頁尾的隱含 role 為 contentinfo。否則，頁尾沒有隱含角色，也不是地標，如以下 Chrome AOM 螢幕截圖所示 (其中 <article> 包含 <header>，而 <footer> 位於 <header> 和 <footer> 之間)。

這張螢幕截圖中有兩個頁尾：一個在 <article> 中，另一個在頂層。頂層頁尾是具有 contentinfo 隱含角色的地標。另一個頁尾不是地標。Chrome 會顯示為 FooterAsNonLandmark，Firefox 則會顯示為 section。

這並不代表您不應使用 <footer>。舉例來說，如果您有網誌，網站頁尾可能會有隱含的 contentinfo 角色。每篇網誌文章也可以有 <footer>。在網誌的主要到達網頁上，瀏覽器、搜尋引擎和螢幕閱讀器會知道主要頁尾是頂層頁尾，而所有其他頁尾都與其巢狀結構中的貼文相關。

如果 <footer> 是 <article>、<aside>、<main>、<nav> 或 <section> 的子系，則不屬於地標。如果貼文單獨顯示，視標記而定，該頁尾可能會升級。

頁尾通常會包含聯絡資訊，並以 <address> (聯絡地址元素) 包裹。這個元素的名稱不太好，是用來包含個人或機構的聯絡資訊，而非實體郵寄地址。

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

文件結構

本單元一開始會介紹 <header> 和 <footer>，因為這兩個元素有時只是地標 (或「分區」) 元素。還有幾個更常見的分區元素。

包含標頭、兩個側欄和頁尾的版面配置稱為聖杯版面配置。標記這類內容的方式有很多種，包括：

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

如果您要建立網誌，<main> 中可能會有一系列文章：

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

使用語意元素時，瀏覽器可以建立有意義的無障礙樹狀結構。這有助於改善螢幕閱讀器的瀏覽方式。這裡的 banner 和 contentinfo 是透過網站 <header> 和 <footer> 提供。這裡新增的元素包括 <main>、<aside> 和 <article>，以及您先前用過的 <h1> 和 <nav>，還有尚未用過的 <section>。

<main>

只有一個 <main> 地標元素。<main> 元素會識別文件的主要內容。每個網頁只能有一個 <main>。

<aside>

<aside> 適用於與文件主要內容間接或略微相關的內容。舉例來說，這份文件與 HTML 有關。在三個網站標頭範例 (div、role 和語意) 的 CSS 選取器特異性部分，相關的附註可以包含在 <aside> 中；和大多數情況一樣，<aside> 可能會顯示在側欄或圖說文字方塊中。<aside> 也是地標，隱含角色為 complementary。

<article>

我們在 <main> 中加入兩個巢狀 <article> 元素。在第一個範例中，主要內容只有一個字詞，或在實際情況中，只有一個內容區段，因此不需要這麼做。但如果是撰寫網誌 (如第二個範例)，每篇貼文都應放在 <main> 內部的 <article> 中。

<article> 代表完整或獨立的內容部分，原則上可獨立重複使用。文章就像報紙上的文章，在平面媒體上，關於紐西蘭總理 Jacinda Ardern 的新聞報導可能只會出現在一個版面，例如世界新聞。在報紙網站上，同一篇新聞報導可能會出現在首頁、政治版、大洋洲或亞太地區新聞版，以及體育、生活風格或科技版 (視新聞主題而定)。文章也可能顯示在其他網站，例如 Pocket 或 Yahoo 新聞！

<section>

如果沒有更具體的語意元素可用，<section> 元素可用來涵蓋文件的一般獨立區段。除了少數例外，各節都應有標題。

回到 Jacinda Ardern 的例子，在報紙的首頁上，橫幅會包含報紙名稱，後面接著一個 <main>，分成幾個 <section>，每個都有一個標題，例如「世界新聞」和「政治」；在每個部分中，您會看到一系列的 <article>。每個 <article> 中可能也有一或多個 <section> 元素。如果查看這個頁面，整個「標題和區段」部分就是 <article>。接著，這個 <article> 會分成多個 <section>，包括 site header、site footer 和文件結構。文章本身和各個部分都有標題。

<section> 必須有無障礙元素名稱，才能成為地標；如果具有無障礙元素名稱，則隱含角色為 region。地標角色應謹慎使用，用於識別文件中較大的整體區段。使用過多地標角色可能會在螢幕閱讀器中產生「雜訊」，導致使用者難以理解網頁的整體版面配置。如果 <main> 包含兩或三個重要子區段，為每個 <section> 加入無障礙元素名稱可能會有幫助。

標題：<h1>-<h6>

有六個章節標題元素：<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。每個標記代表六個章節標題層級之一，其中 <h1> 是最高或最重要的章節層級，<h6> 則是最低。

如果標題位於文件橫幅 <header> 內，則代表應用程式或網站的標題。如果巢狀結構位於 <main> 中 (無論是否位於 <main> 的 <header> 中)，則為該網頁的標頭，而非整個網站的標頭。如果巢狀結構位於 <article> 或 <section> 中，則為該網頁子區段的標頭。

建議你使用與文字編輯器中類似的標題層級：以 <h1> 做為主要標題，<h2> 做為子區段的標題，如果這些子區段有區段，則使用 <h3>；避免略過標題層級。請參閱這篇文章，瞭解如何設定章節標題。

部分螢幕閱讀器使用者會透過標題瞭解網頁內容。原本標題應該用來建立文件大綱，就像 MS Word 或 Google 文件可以根據標題產生大綱一樣，但瀏覽器從未實作這個結構，且建議的大綱演算法已從 HTML 規格中移除。過去瀏覽器會以較小的字型大小顯示巢狀結構在分節元素中的 <h1> 元素，但新式瀏覽器已移除這些預設樣式，且不支援自動文件大綱。

您現在已具備足夠的知識，可以勾勒出 MachineLearningWorkshop.com 的架構：

MLW.com 的<body>大綱

以下是機器學習研討會網站可見內容的大綱：

由於沒有任何內容是獨立、完整的內容，因此 <section> 比 <article> 更合適；雖然每個部分都有標題，但沒有任何部分值得使用 <footer>。

這點應該不言自明，但請不要使用標題將文字設為粗體或放大，而應使用 CSS。如要強調文字，也可以使用語意元素。我們將在討論文字基本概念時，說明並填入大部分的網頁內容，然後深入探討屬性。

隨堂測驗

測試您對標題和區段的瞭解程度。