HTML语义化是让标签真实反映内容角色，而非视觉替换；main必须唯一且不嵌套，nav仅用于主导航，article须可独立分发，aside限相关补充信息，time需合法datetime值，标题层级须严格递进，img必有alt，表单控件须与label显式关联。
HTML语义化不是“把 div 换成 section 就完事”，而是让每个标签真实反映它包裹内容在整页中的角色。用错标签比不用更糟——比如把页脚链接塞进 nav，或给轮播图容器套 main，反而会误导屏幕阅读器和搜索引擎。
哪些标签必须严格按角色使用，不能“看着像就套”
语义标签失效的常见起点，就是脱离上下文强行替换。关键不是“能不能用”，而是“该不该用”：
-
main只能出现一次，且不能嵌套在article、aside、footer内部；它代表整个页面唯一的核心内容流，不是“视觉上最显眼的区域” -
nav仅用于主导航（如顶部菜单、左侧栏目导航），页脚的“关于我们”“加入我们”列表属于普通链接集合，用ul+li即可，不必硬套nav -
article必须是能独立分发、被单独引用的内容单元（如一篇博客、一条新闻、一个用户评论），不能用来包首页的多个卡片或广告位 -
aside是与主内容相关但可独立存在的补充信息（如侧边栏作者简介、相关文章推荐），不是所有“在右边的div”都算aside -
time必须带datetime属性，且值为合法机器可读格式（如2026-08-25），不能只写中文“2026年8月25日”就当语义化了
标题层级和 h1–h6 的硬性约束
标题结构是语义骨架中最易被破坏的一环，错误会直接导致大纲混乱、SEO降权、辅助技术误读：
- 每个页面有且仅有一个
h1，它是整页最高主题，不是“最大的字” - 子级标题必须连续递进：
h1→h2→h3，禁止跳级（如h1后直接h4）或倒退（如h2下再用h1） -
h1–h6不是样式工具，禁止用 CSS 改变字号/粗细来模拟标题；也不允许在标题内嵌套p、div或列表 - 同一层级的标题应语义等价，例如两个
h2应同属一个逻辑模块（如“产品功能”“客户案例”），不能一个是章节名、一个是按钮文字
审查语义化是否落地的三个实操检查点
靠肉眼扫代码容易漏掉隐性错误，建议结合工具+人工聚焦以下三处：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具的「Accessibility」面板，看「Document Outline」是否生成合理层级；若全是“generic”或缺失
h1，说明标题或语义标签未生效 - 用 W3C Markup Validation Service 提交 HTML，重点看警告（Warning）而非仅错误（Error）——例如 “
navelement has no heading” 就提示你该加h2作为导航标题 - 关掉 CSS 查看纯 HTML 渲染效果：如果结构仍能清晰传达内容关系（如导航可识别、文章段落分明、图片有文字描述），才算真正语义化到位
img、figure 和表单控件的不可妥协项
这些元素的语义缺失直接影响可访问性和基础功能，没有商量余地：
- 所有
img必须含alt属性：alt="公司Logo"或纯装饰图写alt=""（空字符串，不能省略） - 带说明文字的图片（如图表、截图、引用图）必须用
figure+figcaption包裹，不能只靠p标签写说明 - 表单中每个
input、select、textarea都需与label显式关联（用for/id或嵌套方式），不能只靠视觉对齐 -
fieldset+legend必须用于逻辑分组的表单控件（如多选性别、地址类型），不能只为了加个边框而滥用
最容易被忽略的是语义的“粒度”——section 不是万能占位符，它需要有明确的主题和内在逻辑；满屏 section 和满屏 div 在语义层面毫无区别。判断标准只有一个：删掉所有 CSS 和 JS，仅靠标签本身，能否让一个新来的开发者或一台爬虫准确说出这块内容在整个页面里“是干什么的”。
