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