语义化核心是用对标签而非取好class名，header/nav/main/article/aside/footer等必须替代div，section与article不可混用，标题需严格层级，time/strong/button/img等细节标签不可忽略。
直接用对的标签，比“怎么加语义”更重要。HTML语义化不是给
套class取个好名字，而是让浏览器、搜索引擎和屏幕阅读器一眼看懂结构——
就是头部，
就是导航，
就是主内容，没商量。
哪些标签必须立刻替换掉 div？
不是所有
都要删，但以下几类场景中，
属于明确违规，应无条件替换：
页面顶部区域（含 logo、主导航）→ 改用
，不要
headernavmaindivdivheader
主导航链接集合 → 改用
nav
，且建议加
aria-label="主导航"
（辅助技术依赖这个）
整页主体内容容器 → 必须用
main
，且整个页面只出现一次；别用
div id="content"
独立可分发/可订阅的内容单元（如博客文章、新闻条目）→ 用
article
，不是
div class="post"
侧边栏、广告位、相关推荐等辅助内容 → 用
aside
，而非
div class="sidebar"
错误示例：
section
和
article
都表示“一块内容”，但语义完全不同，混用会误导搜索引擎和辅助工具：
立即学习
“
前端免费学习笔记（深入）
”；
article
：内容能独立存在、可被单独分发或重用（比如一篇博客、一条微博、一个用户评论）
section
：只是主题性分组，不具备独立传播价值（比如“产品介绍”“客户评价”“技术参数”这些区块）
一个
article
内部可以嵌套多个
section
，但反过来不行
没有标题的
section
很可疑——W3C 明确建议每个
section
应有
h1
–
h6
标题
反例：
这是用户评论
这是用户评论
article
、
section
、
nav
等区块，都该有且仅有一个标题（
h1
–
h6
），哪怕视觉上不明显
标题必须严格递进：不能
h1
后面直接跟
h3
；也不能在
section
里用
h1
（除非它是整个页面唯一
h1
）
h1
全局只应出现一次，代表页面核心主题；子区块用
h2
起始，依此类推
别为了样式省标题——可用 CSS 隐藏文字但保留语义，例如
h2 { font-size: 0; }
+
h2::before { content: "产品特性"; }
常见坑：
正文…
time
，并带
datetime
属性：
strong
，不是
b
；
b
只是视觉加粗，无语义权重
所有可点击交互控件 → 优先用
button
，不用
div
或
span
模拟；否则键盘 Tab 焦点、屏幕阅读器朗读、禁用状态都会失效
img
必须带
alt
，空字符串
alt=""
仅适用于纯装饰图；功能图（如提交按钮图标）需描述行为，如
alt="提交表单"
最常被跳过的细节：
button
缺少
type
属性，默认是
submit
，放在表单里可能意外触发表单提交。
语义化真正的难点不在“用什么标签”，而在“理解每个标签背后的内容模型约束”。比如
nav
里面不能放段落，
main
不能嵌套在
article
里——这些不是样式问题，是 HTML 规范强制要求，违反会导致可访问性工具直接跳过整块内容。