最常正确使用的HTML5语义化标签是<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>七个；其中<main>必须全局唯一且不可嵌套于其他语义标签内，<article>可嵌套但不宜超两层，<section>须有主题并配标题，IE9需CSS设display:block兼容。
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 这七个是实际项目中最常被正确使用的 HTML5 语义化标签。其余如 <figure>、<time>、<mark> 等虽属语义化范畴，但使用频率低、易误用，新手优先掌握这七个即可。
哪些标签必须成对出现且不能嵌套自身
像 <header>、<footer>、<nav>、<aside> 这类标签没有内容结构约束，可以多次使用，也能嵌套在 <article> 或 <section> 内部 —— 比如一篇博客的 <article> 可自带独立的 <header> 和 <footer>。
但要注意：<main> 必须全局唯一，且不能出现在 <article>、<aside>、<nav>、<header>、<footer> 内部；<article> 可以嵌套 <article>（例如评论区里的用户回复），但不建议超过两层，否则语义会模糊。
-
<main>是页面“唯一主内容区”，不是“主要内容容器” -
<section>必须有主题，不能只为了布局加 margin 而套一层 -
<article>内容需能独立分发（RSS、转发、搜索引擎抓取）
IE9 及以下浏览器里语义化标签不生效怎么办
IE9 把 <header> 这些标签当行内元素处理，导致样式错乱或无法设置宽高。最简方案是在 CSS 中统一声明：
立即学习“前端免费学习笔记（深入）”；
header, nav, main, article, section, aside, footer {
display: block;
}
不需要引入 html5shiv —— 如果你已放弃 IE8 及更早版本，这段 CSS 就够了。若仍需兼容 IE8，才需要通过 <script> 加载 html5shiv，并确保它在 <head> 中、CSS 之前执行。
- html5shiv 不修复 IE8 的 CSS 选择器 bug（比如
section > p会失效） - IE9+ 原生支持这些标签，但默认 display 是 inline，仅此而已
- 现代项目中，只要不支持 IE9，就完全不用管兼容性补丁
<section> 和 <article> 到底怎么选
关键看内容是否“可独立存在”。一个新闻列表页，整页是 <main>，每条新闻用 <article> 包裹；而“相关新闻”区块本身只是页面一部分，用 <section> 更合适。
常见误用：
- 把轮播图容器写成
<article>—— 它不是独立内容，只是 UI 组件 - 把整个用户个人中心页写成一个
<article>—— 它由多个主题区域组成，应拆为多个<section> - 用
<section>替代<div>却不加标题（<h2>~<h6>）—— 语义缺失，屏幕阅读器无法建立结构感知
简单记：能单独被 RSS 订阅、被搜索引擎单独索引、被转发分享的，用 <article>；只是页面中一个逻辑分组、有明确主题但不独立的，用 <section>。
最容易被忽略的是 <main> 的定位：它不是“视觉上居中的内容”，而是“对用户最有价值的那块内容”。很多 SPA 页面把整个路由出口塞进 <main>，结果每个子页面都重复包裹，反而破坏了语义唯一性。真正该做的，是让 <main> 始终对应当前路由下不可替代的核心区块。
