標題和章節

在上一節中，您學到瞭如何理解文件的大綱，即使您不知道網頁上的字詞為何，語意元素仍具有有意義的結構文件，其他部分則包括搜尋引擎、輔助技術、日後的維護人員、新團隊成員等。

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

在編寫程式碼的同時，為工作選擇正確的元素，就不必重構 HTML 或加入註解。思考到工作時，您通常會選擇正確的元素。如果您不願意，可能就不需要。

現在您已瞭解標記語意，也知道選擇正確的元素的重要性，一旦瞭解所有不同的元素，通常很快就能選擇正確的元素 (如果有的話)。

我們來建立網站標頭。您將先從非語意標記著手，再想辦法使用良好的解決方案，以便從中瞭解 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>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

與 <header> 類似，頁尾是否為地標，取決於頁尾的巢狀結構。網站頁尾代表地標，且必須包含每個頁面的網站頁尾資訊，例如版權聲明、聯絡資訊，以及隱私權和 Cookie 政策的連結。網站頁尾隱含的 role 為 contentinfo。否則，頁尾沒有隱含角色，也不是位置標記，如下方螢幕截圖所示，您可以在 Chrome 中使用 AOM (<article> 在 <header> 和 <footer> 之間有 <header> 和 <footer>)。

Chrome 中的無障礙功能物件模型。

螢幕截圖中有兩個頁尾：一個位於 <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、角色和語意) 的 CSS 選取器具體說明，<aside><aside><aside> 也是地標，隱含角色為 complementary。

<article>

在 <main> 中巢狀結構，我們新增了兩個 <article> 元素。在第一個示例中，如果主要內容只有單一字詞，或在現實生活中只有單一內容區段，則不需要這麼做。不過，如果您要編寫網誌，如我們的第二個範例所示，每篇貼文都應位於 <main> 中的 <article> 巢狀結構中。

<article> 代表完整的或獨立內容部分，原則上可獨立重複使用。文章就像報紙上的文章一樣。有關紐西蘭首相 Jacinda Ardern 的新聞報導，報導可能只出現在單一版面，或許是全球新聞。在論文網站上，同一篇新聞報導可能會顯示在首頁、政治專區、大洋洲或亞太地區新聞版面，另外，視新聞的主題、運動、生活風格或科技新聞主題可能不同。該文章也可能出現在其他網站上，例如 Pocket 或 Yahoo News!

<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 文件」可以根據標題產生大綱，但瀏覽器從未實作這種架構。雖然瀏覽器能夠以更小的字型大小顯示巢狀標題 (如下例所示)，但實際上卻並不支援摘要。

您現在已擁有足夠知識，可以概述 MachineLearningWorkshop.com：

概述 MLW.com 的<body>

以下概述機器學習研討會網站顯示的內容：

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

請不要以此方式直接寫出，但請勿使用標題將文字設為粗體或大。請改用 CSS。如要強調文字，您也可以使用語意元素來強調效果。我們將探討這部分的內容，並在討論文字基本概念後，再深入探究屬性。

隨堂測驗

測驗您對標題和章節的瞭解程度。

哪些元素可用來包含網站的區塊，包括網站標誌或標題，以及主要導覽元素。

<heading>
請再試一次。
<header>
答對了！
<title>
請再試一次。

單一網頁最多可允許幾個 <main> 元素？

一：
答對了！
無，這不是有效的元素。
請再試一次。
沒有數量限制，只要其有可存取的名稱即可。
請再試一次。