HTML5語意化標籤完整教學與SEO應用

Li Wen Chiou

發佈於自我學習

更新於 2025/06/02發佈於 2025/06/02閱讀時間約 9 分鐘

標籤配置範例

主體

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>