標題和章節

在上一節中，您瞭解到即使不瞭解網頁上的字詞含義，只要語意元素為文件提供有意義的結構，其他人 (搜尋引擎、輔助技術、日後的維護人員、新進團隊成員) 就能瞭解文件的架構。

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

在編寫程式碼時選擇適合工作的元素，表示您不必重構或註解掉 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>，<article> 之間有 <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>

使用語意元素時，瀏覽器可以建立有意義的無障礙樹狀結構，有助於改善螢幕閱讀器的瀏覽方式。這裡透過網站 <header> 和 <footer> 提供 banner 和 contentinfo。新增的元素包括 <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>，每個 <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> 巢狀結構內有 <header>，無論是否巢狀結構內有 <main>，都是該網頁的標頭，而非整個網站。如果巢狀結構位於 <article> 或 <section> 中，則為該網頁子區段的標題。

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

部分螢幕閱讀器使用者會存取標題，瞭解網頁內容。標題原本應該要列出文件大綱，就像 MS Word 或 Google 文件可以根據標題產生大綱一樣，但瀏覽器從未實作這項結構。雖然瀏覽器會以越來越小的字型大小顯示巢狀標題 (如下例所示)，但實際上並不支援大綱。

您現在已具備足夠的知識，可以規劃 MachineLearningWorkshop.com 的大綱：

概述 MLW.com 的 <body>

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

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

此時應該不用多說，請勿使用標題將文字設為粗體或放大，請改用 CSS。如要強調文字，也可以使用語意元素。我們將在討論文字基礎知識時，涵蓋這項主題並填寫大部分的頁面內容；深入探討屬性後，我們也會一併說明。

隨堂測驗

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

用來包含網站區域的元素，包括網站標誌/標題和主要導覽。

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

網頁上最多可使用多少個 <main> 元素？

一：
答對了！
無，這個元素無效。
請再試一次。
只要具有無障礙元素名稱，即可視需要新增任意數量的按鈕。
請再試一次。
上一頁
語意 HTML
下一頁
屬性