HTML 語義化標籤完全指南：爲什麼 div 不能解決所有問題？

滿屏 div 有什麼問題

打開瀏覽器開發者工具，審查很多網頁的 HTML，會看到這樣的結構：

<div class="header">
  <div class="nav">
    <div class="nav-item">首頁</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">文章標題</div>
    <div class="content">正文內容...</div>
  </div>
</div>
<div class="footer">版權信息</div>

從視覺上看，這沒什麼問題——瀏覽器會正常渲染。但對於搜索引擎爬蟲和屏幕閱讀器來說，這是一團沒有意義的盒子。它們無法判斷哪部分是導航、哪部分是主要內容、哪部分是頁腳。

HTML 語義化就是爲了解決這個問題。

什麼是語義化 HTML

語義化 HTML 是指用能夠表達內容含義的標籤來組織頁面結構，而不僅僅用 div 和 span 充當純佈局容器。

HTML5 引入了大量語義標籤，讓標籤本身就能告訴瀏覽器、搜索引擎和輔助技術"這塊內容是什麼"。

語義化帶來三個直接好處：

1. SEO：搜索引擎能更準確理解頁面結構，判斷內容的重要性和相關性，有助於提升排名。

2. 無障礙訪問（Accessibility）：屏幕閱讀器依賴語義標籤爲視覺障礙用戶導航，<nav> 讓他們快速跳轉到導航，<main> 讓他們直接跳到主內容。

3. 代碼可維護性：看到 <article> 就知道這是獨立文章內容，比看到第 47 個 <div class="box"> 直觀得多。

核心語義標籤詳解

`<header>`：頁眉

表示頁面或區塊的頭部區域，通常包含 Logo、標題、主導航。

<header>
  <img src="logo.png" alt="網站Logo">
  <h1>網站名稱</h1>
  <nav>...</nav>
</header>

注意：<header> 不只能用於頁面頂部，<article> 和 <section> 內部也可以有自己的 <header>。

`<nav>`：導航

專門用於導航鏈接區域，主菜單、麪包屑、分頁都適合用它。

<nav aria-label="主導航">
  <ul>
    <li><a href="/">首頁</a></li>
    <li><a href="/blog">博客</a></li>
    <li><a href="/about">關於</a></li>
  </ul>
</nav>

不是頁面裏所有鏈接都要放進 <nav>，只有作爲主要導航功能的鏈接集合才用它。

`<main>`：主內容

頁面的核心內容區域，每個頁面只能有一個 <main>，且不應該嵌套在 <header>、<footer>、<nav>、<aside> 內。

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <!-- 頁面核心內容放這裏 -->
  </main>
  <footer>...</footer>
</body>

屏幕閱讀器用戶通過快捷鍵直接跳到 <main>，跳過重複的導航和頁眉。

`<article>`：獨立內容

表示頁面中可以獨立存在、可以被單獨分發的內容塊，如博客文章、新聞條目、論壇帖子、評論。

判斷標準：這塊內容脫離頁面上下文，單獨出現是否仍然有意義？如果是，就用 <article>。

<main>
  <article>
    <header>
      <h2>文章標題</h2>
      <time datetime="2024-04-06">2024年4月6日</time>
    </header>
    <p>文章正文...</p>
    <footer>
      <p>作者：張三</p>
    </footer>
  </article>
</main>

`<section>`：主題分區

表示文檔中的一個主題性分組，通常有自己的標題。<section> 和 <div> 的區別在於：<section> 有明確的主題，<div> 只是佈局容器。

<article>
  <section>
    <h2>背景介紹</h2>
    <p>...</p>
  </section>
  <section>
    <h2>核心功能</h2>
    <p>...</p>
  </section>
</article>

常見誤用：把每個 <div> 換成 <section> 並不是語義化，只有內容真正有主題分組時才用。

`<aside>`：側邊內容

與主內容相關但非核心的內容，如側邊欄、相關文章推薦、廣告、作者簡介。

<main>
  <article>主文章內容</article>
  <aside>
    <h3>相關文章</h3>
    <ul>
      <li><a href="#">文章A</a></li>
      <li><a href="#">文章B</a></li>
    </ul>
  </aside>
</main>

`<footer>`：頁腳

頁面或區塊的底部區域，通常包含版權信息、聯繫方式、備案號、友情鏈接等。

<footer>
  <p>© 2024 toolshu.com 版權所有</p>
  <nav aria-label="頁腳導航">
    <a href="/about">關於我們</a>
    <a href="/privacy">隱私政策</a>
  </nav>
</footer>

和 <header> 一樣，<footer> 也可以出現在 <article> 內部。

`<figure>` 和 `<figcaption>`：圖文組合

表示獨立的圖片、圖表、代碼示例等，配合說明文字使用。

<figure>
  <img src="architecture.png" alt="系統架構圖">
  <figcaption>圖1：系統整體架構示意圖</figcaption>
</figure>

`<time>`：時間

標記日期或時間，datetime 屬性提供機器可讀的格式。

<p>發佈於 <time datetime="2024-04-06T10:30:00+08:00">2024年4月6日</time></p>

`<address>`：聯繫信息

表示最近的 <article> 或 <body> 的聯繫信息，不是通用地址標籤。

<address>
  作者：<a href="mailto:hello@example.com">張三</a><br>
  北京市朝陽區
</address>

語義化 vs 非語義化：對比一眼看懂

場景	非語義寫法	語義寫法
頁眉區域	`<div class="header">`	`<header>`
導航菜單	`<div class="nav">`	`<nav>`
主內容區	`<div class="main">`	`<main>`
博客文章	`<div class="post">`	`<article>`
內容分區	`<div class="section">`	`<section>`
側邊欄	`<div class="sidebar">`	`<aside>`
頁腳區域	`<div class="footer">`	`<footer>`
圖片說明	`<div class="img-wrap">`	`<figure>` + `<figcaption>`

幾個常見誤區

誤區1：<section> 是升級版 <div>

不是。只有內容有明確主題歸屬時才用 <section>，純佈局容器仍然用 <div>。

誤區2：<article> 只能放文章

不對。評論、論壇帖子、產品卡片、小工具（widget）都可以是 <article>，只要它能獨立存在。

誤區3：語義化會影響樣式

不會。語義標籤默認沒有特殊樣式（除了少數如 <address> 是斜體），用 CSS 可以隨意定製外觀，和 <div> 完全一樣。

誤區4：用了語義標籤 SEO 就一定好

語義化只是 SEO 的基礎之一，內容質量、頁面速度、外鏈等因素同樣重要。但語義化是成本最低、收益最穩的基礎優化，沒有理由不做。

動手驗證

寫完一段 HTML 想看實際渲染效果？直接粘到 toolshu.com 的 HTML 在線編輯器，支持語法高亮、格式化和實時預覽，不用搭本地環境。

HTML 語義化標籤完全指南：爲什麼 div 不能解決所有問題？

滿屏 div 有什麼問題

什麼是語義化 HTML

核心語義標籤詳解

<header>：頁眉

<nav>：導航

<main>：主內容

<article>：獨立內容

<section>：主題分區

<aside>：側邊內容

<footer>：頁腳

<figure> 和 <figcaption>：圖文組合

<time>：時間

<address>：聯繫信息