HTML 語義元素
語義元素 = 具有含義的元素。
什麼是語義元素？
語義元素能夠清晰地向瀏覽器和開發者描述其含義。
非語義元素的例子： <div> 和 <span> - 它們不會告訴你任何關於其內容的資訊。
語義元素的例子： <form>, <table>, 和 <article> - 它們清晰地定義了其內容。
HTML 中的語義元素
許多網站包含類似這樣的 HTML 程式碼： <div id="nav"> <div class="header"> <div id="footer"> 來表示導航、頁首和頁尾。
在 HTML 中，有一些語義元素可用於定義網頁的不同部分：
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML <section> 元素
<section> 元素定義文件中的一個節。
根據 W3C 的 HTML 文件：“一個 section 是內容的邏輯分組，通常包含一個標題。”
可以使用 <section> 元素的例子
- 章節
- 介紹
- 新聞專案
- 聯絡資訊
一個網頁通常可以分為介紹、內容和聯絡資訊等部分。
示例
文件中的兩個 section
<section>
<h1>WWF</h1>
<p>世界自然基金會（WWF）是一個致力於環境保護、研究和恢復的國際組織，前身為世界野生動物基金會。WWF 成立於 1961 年。</p>
</section>
<section>
<h1>WWF 的熊貓標誌</h1>
<p>熊貓已成為 WWF 的象徵。WWF 著名的熊貓標誌源於一隻名叫“奇奇”的熊貓，它在 WWF 成立的同年從北京動物園遷往倫敦動物園。</p>
</section>
自己動手試一試 »
HTML <article> 元素
<article> 元素指定獨立、完整的內容。
一篇 article 應該能夠獨立理解，並且可以與網站的其餘部分分開分發。
可以使用 <article> 元素的例子
- 論壇帖子
- 部落格文章
- 使用者評論
- 產品卡片
- 報紙文章
示例
三篇具有獨立、完整內容的 article
<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是由 Google 開發的網路瀏覽器，於 2008 年釋出。Chrome 是當今世界上最受歡迎的網路瀏覽器！</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 開發的開源網路瀏覽器。自 2018 年 1 月以來，Firefox 一直是第二受歡迎的網路瀏覽器。</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是由 Microsoft 開發的網路瀏覽器，於 2015 年釋出。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
自己動手試一試 »
示例 2
使用 CSS 樣式化 <article> 元素
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>最受歡迎的瀏覽器</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome 是由 Google 開發的網路瀏覽器，於 2008 年釋出。Chrome 是當今世界上最受歡迎的網路瀏覽器！</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 開發的開源網路瀏覽器。自 2018 年 1 月以來，Firefox 一直是第二受歡迎的網路瀏覽器。</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是由 Microsoft 開發的網路瀏覽器，於 2015 年釋出。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
</article>
</body>
</html>
自己動手試一試 »
巢狀 <article> 在 <section> 中或反之？
<article> 元素指定獨立、完整的內容。
<section> 元素定義文件中的一個節。
我們可以使用這些定義來決定如何巢狀這些元素嗎？不行，我們不能！
因此，你會發現 HTML 頁面中有包含 <article> 元素的 <section> 元素，以及包含 <section> 元素的 <article> 元素。
HTML <header> 元素
<header> 元素代表一個容器，用於放置介紹性內容或一組導航連結。
一個 <header> 元素通常包含
- 一個或多個標題元素 (<h1> - <h6>)
- logo 或圖示
- 作者資訊
注意：一個 HTML 文件中可以包含多個 <header> 元素。但是，<header> 不能放在 <footer>、<address> 或另一個 <header> 元素內。
示例
一個 <article> 的頁首：
<article>
<header>
<h1>WWF 做什麼？</h1>
<p>WWF 的使命：</p>
</header>
<p>WWF 的使命是阻止我們星球自然環境的退化，
並建立一個人類與自然和諧相處的未來。</p>
</article>
自己動手試一試 »
HTML <footer> 元素
<footer> 元素為文件或 section 定義頁尾。
一個 <footer> 元素通常包含
- 作者資訊
- 版權資訊
- 聯絡資訊
- 站點地圖
- 返回頂部連結
- 相關文件
一個文件中可以包含多個 <footer> 元素。
示例
文件中的一個頁尾 section
<footer>
<p>作者：Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
自己動手試一試 »
HTML <nav> 元素
<nav> 元素定義了一組導航連結。
注意，文件中並非所有連結都應該放在 <nav> 元素內。 <nav> 元素僅用於主要的導航連結塊。
瀏覽器，例如用於殘障使用者的螢幕閱讀器，可以使用此元素來判斷是否應省略此內容的初始渲染。
示例
一組導航連結
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
自己動手試一試 »
HTML <aside> 元素
<aside> 元素定義了與它所在內容相關的一些附加內容（例如側邊欄）。
<aside> 的內容應與周圍內容間接相關。
示例
顯示一些與所在內容相關聯的附加內容
<p>今年夏天，我的家人和我參觀了 Epcot 中心。天氣很好，Epcot 棒極了！我度過了一個和家人在一起的美好夏天！</p>
<aside>
<h4>Epcot 中心</h4>
<p>Epcot 是華特迪士尼世界度假區的一個主題公園，提供激動人心的景點、國際展館、屢獲殊榮的煙花表演和季節性特別活動。</p>
</aside>
自己動手試一試 »
示例 2
使用 CSS 樣式化 <aside> 元素
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>今年夏天，我的家人和我參觀了 Epcot 中心。天氣很好，Epcot 棒極了！我度過了一個和家人在一起的美好夏天！</p>
<aside>
<p>Epcot 中心是華特迪士尼世界度假區的一個主題公園，提供激動人心的景點、國際展館、屢獲殊榮的煙花表演和季節性特別活動。</p>
</aside>
<p>今年夏天，我的家人和我參觀了 Epcot 中心。天氣很好，Epcot 棒極了！我度過了一個和家人在一起的美好夏天！</p>
<p>今年夏天，我的家人和我參觀了 Epcot 中心。天氣很好，Epcot 棒極了！我度過了一個和家人在一起的美好夏天！</p>
</body>
</html>
自己動手試一試 »
HTML <figure> 和 <figcaption> 元素
<figure> 標籤指定自包含的內容，如插圖、圖表、照片、程式碼列表等。
<figcaption> 標籤為 <figure> 元素定義了標題。 <figcaption> 元素可以作為 <figure> 元素的第一個或最後一個子元素。
<img> 元素定義了實際的影像/插圖。
示例
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>圖 1 - Trulli，普利亞，義大利。</figcaption>
</figure>
自己動手試一試 »
為什麼要使用語義元素？
根據 W3C 的說法：“語義 Web 允許資料在應用程式、企業和社群之間共享和重用。”
HTML 中的語義元素
下面是 HTML 中一些語義元素的列表。
| 標籤 | 描述 |
|---|---|
| <article> | 定義獨立、完整的內容 |
| <aside> | 定義頁面內容之外的內容 |
| <details> | 定義使用者可以檢視或隱藏的附加詳細資訊 |
| <figcaption> | 為 <figure> 元素定義標題 |
| <figure> | 指定自包含的內容，如插圖、圖表、照片、程式碼列表等。 |
| <footer> | 為文件或 section 定義頁尾 |
| <header> | 為文件或 section 指定頁首 |
| <main> | 指定文件的主要內容 |
| <mark> | 定義標記/高亮文字 |
| <nav> | 定義導航連結 |
| <section> | 定義文件中的一個節 |
| <summary> | 為 <details> 元素定義可見標題 |
| <time> | 定義日期/時間 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
