在上一節中,您學到瞭如何理解文件的大綱,即使您不知道網頁上的字詞為何,語意元素仍具有有意義的結構文件,其他部分則包括搜尋引擎、輔助技術、日後的維護人員、新團隊成員等。
在本節中,您將瞭解文件結構、回顧上一節的章節元素,並標記應用程式的大綱。
在編寫程式碼的同時,為工作選擇正確的元素,就不必重構 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>©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>©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>
元素?