這七個 HTML5 語義標簽，你可能一直用錯了
Semantic HTML 不是概念課，它是讓你的網(wǎng)站可用的地圖。
很多團隊把語義標簽當“調(diào)味料”隨手一撒就完事。 結(jié)果：讀屏器被繞暈、搜索引擎靠猜、CSS 脆到一碰就碎。 我見過不少“看起來現(xiàn)代”的標記，實測卻傷害用戶。 問題不在 div，而在語義元素的錯誤使用。
1.<main> —— 每頁只有一個，且不嵌套
常見誤用： 一頁多個 <main>，或把它套進布局殼子里。為什么不行： 讀屏器會直跳 <main> 跳過頁面“外殼”；出現(xiàn)多個或嵌套會破壞跳轉(zhuǎn)。
正確示例：
<body>
<header>…</header>
<nav aria-label="Primary">…</nav>
<main id="content">
<!-- 此文檔的唯一主內(nèi)容 -->
</main>
<footer>…</footer>
</body>生產(chǎn)可落地規(guī)則：
- 一份文檔僅一個
<main> - 不得放在
<article> / <aside> / <header> / <footer> / <section>里面 - 若提供“跳到主內(nèi)容”，給它一個穩(wěn)定的 id
2. <section> 必須配標題
誤用： 把 <section> 當高級版 <div>。后果： 沒有標題的分區(qū)會破壞文檔大綱，讀屏導航混亂。
修正：
<section aria-labelledby="billing-h">
<h2 id="billing-h">Billing</h2>
<p>Update your payment method.</p>
</section>如果沒有自然的標題，就該用 <div>。
3.<article> 自包含、可單獨分發(fā)的單元
誤用： 隨手把頁面塊包進 <article>。后果： 它在向搜索/無障礙聲明：這塊內(nèi)容可獨立存在（如出現(xiàn)在訂閱流/郵件里）。
適用場景：
- 博文、新聞、論壇主題
- 產(chǎn)品評價、評論卡片、更新日志條目
修正：
<article>
<header>
<h1>Release 2.1</h1>
<p>Published by Dev Team</p>
</header>
<p>We added keyboard shortcuts and improved search.</p>
<footer>
<a href="#comments">12 comments</a>
</footer>
</article>能離開此頁也說得通 → 用 <article>；否則用 <section> 或 <div>。
4. <header> —— 局部引言，不只是站點頂欄
誤用： 只把 <header> 當全局導航條。后果： 文章/區(qū)塊內(nèi)錯過有用結(jié)構(gòu)。
**你可以在 <article> 或 <section> 里用 <header>組織標題與引言控件：
<article>
<header>
<h2>Keyboard Shortcuts</h2>
<p>Save minutes every day with these keys.</p>
</header>
<p>Press “?” to open the cheat sheet.</p>
</article>提示：<header> 里只放引導性元素；操作/正文放下面。
5. <footer> 閉合作用域的腳注，不是“雜物間”
誤用： 僅在頁面底部放一個全局 footer。后果： 文章/卡片失去元信息與動作的語義容器。
在“像文檔”的組件里也該使用 <footer>：
<article>
<h2>How We Cache</h2>
<p>We use a two-tier strategy with CDN and Redis.</p>
<footer>
<p>Last updated: <time datetime="2025-03-19">March 19, 2025</time></p>
<a href="/caching#discussion">Join the discussion</a>
</footer>
</article>全局頁腳保留給站點級導航、法律信息等。
6. <nav> —— 只包導航，并帶標簽
誤用： 任意鏈接列表都套 <nav>。后果： 無障礙期望它是導航地標；塞進雜項鏈接會稀釋信號。
正確用法： 主/次導航、面包屑、頁內(nèi)目錄，并始終標注：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/docs">Docs</a></li>
<li aria-current="page">API</li>
</ol>
</nav>好習慣：
- 用
aria-current="page"（或"step"）標記當前項 - 導航鏈接用列表（
ul/ol）分組
7.<aside> 相關(guān)但非必需
誤用： 把主內(nèi)容側(cè)欄或關(guān)鍵任務區(qū)用 <aside>。后果： 有些用戶會默認跳過 asides；如果是完成任務必需，那就不該放 aside。
正確場景：提示/標注/相關(guān)鏈接、拉引語、推廣模塊、補充圖表
<main>
<article>
<h1>Set Up Two-Factor Authentication</h1>
<p>Open Settings → Security and follow these steps.</p>
</article>
<aside aria-label="Security Tips">
<h2>Security Tips</h2>
<ul>
<li>Use a password manager.</li>
<li>Store backup codes offline.</li>
</ul>
</aside>
</main>一個可擴展的簡單骨架
+--------------------------- page ---------------------------+
| header (site) |
| nav (Primary) |
| |
| main [one] |
| +-- article/section with headings |
| +-- article/section with headings |
| +-- aside (optional, complementary) |
| |
| footer (site) |
+------------------------------------------------------------+上線前的快速體檢清單
- ? 僅一個頂層
<main>，且可“跳至主內(nèi)容” - ? 每個
<section>都有真實標題 - ?
<article>專用于可獨立分發(fā)的內(nèi)容 - ? 局部
<header>/<footer>組織引言與元信息 - ?
<nav>帶可讀標簽，且只放導航 - ?
<aside>補充而非必需，不影響任務完成
語義是你的可用性合同：寫給讀屏器、爬蟲，也寫給下一位接手你的你。把它用對，結(jié)構(gòu)穩(wěn)定、可訪問、可維護的頁面就有了骨與魂。
