header、nav、main、footer是必须使用的刚性骨架标签；article和aside按内容是否独立可分发或辅助关联来选用；section用于有标题的主题分组；div仅在无明确语义时使用。
header、nav、main、article、aside、footer 这六个标签不是“可选加分项”，而是现代 HTML 页面结构的刚性骨架。用错或漏掉，轻则 SEO 抓取失真、屏幕阅读器朗读混乱，重则团队协作时别人看不懂你写的“结构意图”。
哪些标签必须用，哪些可以不用？
判断标准只有一个：内容是否天然具备该语义。
-
header用于页面顶部（含 logo + 主导航）或section/article内部的局部标题区——但别把它当“加个上边框的 div”用 -
nav只包裹真正起导航作用的链接组（如主导航、页内锚点跳转），侧边栏里的“相关文章链接”不算 -
main每个页面有且仅有一个，且不能嵌套在article、aside或footer里；它代表用户打开页面最想看的那块内容 -
article必须是能独立存在、可被 RSS 订阅或单独分享的内容单元（比如一篇博客、一条新闻、一个产品卡片）；普通介绍段落用section更合适 -
aside是“辅助性但非核心”的内容，比如博客页右侧的作者简介、标签云、广告位；它和main是平级关系，不是main的子容器 -
footer同样可出现在article内部（比如文章末尾的发布时间、作者署名），不只限于页面底部
为什么 div 还没被淘汰？
因为语义化不是万能胶——有些场景就是没现成语义标签可套。
- 纯样式容器：比如一个带阴影+圆角的卡片外壳，内部结构已由
article或section定义清楚，此时用div包一层只为了加 CSS 类，完全合理 - JS 动态插入区域：比如
id="modal-root"这种 React Portal 挂载点，本身无业务语义，div最干净 - 兼容老项目渐进改造：直接把
<div class="sidebar"> 替成 <code><aside></aside>可能触发已有 CSS 错位，先改语义再调样式更稳妥关键不是“能不能用
div”，而是“有没有理由不用语义标签”。看到<div class="header"> 就该警觉：这个 class 名已经暴露了语义，为什么不直接写 <code><header></header>？section和article容易混淆的边界两者都表示“内容分组”，但逻辑权重不同：
- 用
section：当一组内容共享同一个主题，但拆开后无法独立存在（比如“产品优势”下的三个小点，每点都不构成完整信息单元） - 用
article：当内容自带标题、时间、作者等元信息，且能被单独抓取、归档、推送（RSS/邮件简报） - 常见错误：
<section><h2>关于我们</h2> <p>我们是一家…</p></section>—— 这里section正确；但如果把这段文字复制到另一个网站还能成立，那它其实更接近article
一个快速检验法：把这段 HTML 单独保存为新文件，打开后是否仍能被理解为一篇完整内容？能 →
article；不能 →section或div。IE9 及以下必须加
html5shiv才能识别语义标签不加的话，老旧 IE 会把
<header></header>当作未知标签，既不渲染样式，也不纳入 DOM 树，整个区块直接消失。- 引入方式必须放在
里，且在所有 CSS 之前：<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> - 只对 IE9- 有效；IE10+ 和所有现代浏览器原生支持，无需额外脚本
- 如果项目已放弃支持 IE，这步可跳过——但得确认团队所有成员本地环境、测试机、客户访问统计都真实满足条件，不能靠“我觉得没人用了”拍板
最容易被忽略的是：即使加了
html5shiv，CSS 里仍要显式声明display: block给这些新标签（老 IE 默认不认为它们是块级元素），否则可能塌陷或错行。 - 用
