標籤配置範例
主體
article
section
1.頁首標籤 <header>
<header>標籤如果是在<body>內，它可以表示網頁的頁首，但如果位於<article>或<section>內，則可以表示文章或區塊內的首要區塊(但不要和title和heading混淆)。
放在`<body>`內範例
<header>
<div class="banner">
<div class="banner-photo">
</div>
<div class="banner-content">
<h2>標題</h2>
<p>內容</p>
</div>
</div>
</header>
放在`<article>`或`<section>`內範例
<article>
<header>
<h2>我是標題</h2>
<p>作者:XXX</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae veniam dolore error at quos facere iure accusamus qui odit.</p>
</article>
2.導覽列<nav>
只要是在網站內的導覽區塊，都適合使用<nav>標籤(navigation 導航之意)，像是主選單、頁尾選單等。
<nav>
<ul>
<li><a hrref="#">功能一</a></li>
<li><a hrref="#">功能二</a></li>
<li><a hrref="#">功能三</a></li>
</ul>
</nav>
3.主要區塊<main>
用來放置網頁主要資訊的區塊，展現網頁內容的獨特性。每個頁面只能有一個< main >標籤，且理想狀態下，不能被放在<nav>、<article>、<aside>、<footer>和<header>內。
4.區塊或文章區塊<article><section>
在HTML5之前，都需要建立一個區塊通常會使用<div>，而當HTML5語意化標籤出現後，可以使用<section>搭配<h1~h6>的標題來呈現內容，而<section>內一些無明顯含義的區塊或為了排版目的的區塊則使用<div>來包，<div>這時可以視作一個無意義的容器。
<article>標籤近似<section>標籤，但<article>主要用於包覆文章。
要注意的是，<article>可以有很多個<section>，也可以是<section>有很多<article>，取決於內容。
使用範例<article>
<article>
<header>
<h2>我是標題</h2>
<p>作者:XXX</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae veniam dolore error at quos facere iure accusamus qui odit.</p>
</article>
使用範例<section>
<section>
<header>
<h2>熱門文章清單</h2>
</header>
<ul>
<li>
<div class="card-img"></div>
<div class="card-content">
<h2>熱門文章一</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<div class="card-img"></div>
<div class="card-content">
<h2>熱門文章二</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<div class="card-img"></div>
<div class="card-content">
<h2>熱門文章三</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ul>
</section>
5.側欄<aside>
<aside>語意算是跟主要區塊內容無關的區塊，也就是額外資訊，像是側邊欄、廣告、其他連結、推薦文章等都蠻適合使用的，不一定是側邊位置才能使用。
<aside>
<div class="box"><p>廣告欄位</p></div>
<div class="box"><p>廣告欄位</p></div>
<div class="box"><p>廣告欄位</p></div>
</aside>
6.頁尾<footer>
表示頁尾或表尾部分，使用方式同<header>。
<footer>
<p>這是頁尾</p>
</footer>
7.時間<time>
用來表示時間日期
📌加上格式datetime="YYYY-MM-DD"， 這樣的格式讓搜尋引擎能解析時間
<p>活動開始於 <time datetime="2025-06-02">2025-06-02</time></p>
8.註記<mark>
就像是用螢光筆來註記此段重點，強調此段的意思。
9.包覆 圖像、插圖、圖表、程式碼範例<figure>
✅ 語意化標籤：讓內容更有組織性
✅ SEO 友善：搜尋引擎可以解析圖像與說明的關聯
✅ 可搭配 <figcaption>：提供額外的解釋或說明
範例：使用 <figure> 包覆圖片
<figure>
<img src="performance.jpg" alt="網頁效能優化示意圖">
<figcaption>瀏覽器快取可提升載入速度</figcaption>
</figure>
📌 這樣的結構可以讓圖片不只是單純的視覺元素，而是包含資訊的內容！
📌 範例：使用 <figure> 包覆程式碼
<figure>
<pre>
<code>
function sayHello() {
console.log("Hello, world!");
}
</code>
</pre>
<figcaption>範例：JavaScript 函式輸出文字</figcaption>
</figure>
📌 這樣的方式適合技術文件、教學文章，能清楚標示程式碼的用途。
HTML5語意標籤的使用時機&意義
區塊類
- header：網頁的標頭，通常放置網站標題。
- nav：網頁的選單、導覽。
- main：網頁的主要內容。
- aside：網頁的側欄、附加內容。
- article：一篇文章內容。
- section：自訂的區塊，例如數篇摘要組成的空間。
- footer：網頁的頁尾，通常放置聯絡方式、著作權宣告等等。
非區塊類
- mark：強調一小塊內容。
- time：顯示日期時間。
- figure：包覆 圖像、插圖、圖表、程式碼範例
