很多人把语义化 HTML 理解成“写标签更规范一点”，这只说对了一半。
在真实网站里，语义化同时影响三件事：
- 搜索引擎能否理解页面结构
- 键盘和辅助技术能否正确使用页面
- 后续开发者能否快速接手和维护
所以它不是“代码洁癖”，而是网站质量的底层协议。建议结合阅读 HTML 格式化与校验清单、设计中的可访问性指南、Title 与 Description 优化指南 和 HTML 编辑器导出部署工作流。
先给结论：语义化标签不是让代码更优雅，而是让页面更可理解
浏览器能渲染很多错误结构，但“能显示”不等于“能理解”。
当你使用正确的标签时，你是在同时向：
- 浏览器
- 搜索引擎
- 屏幕阅读器
- 后续维护者
声明这块内容到底是什么。
一、结构语义：页面要先有骨架，才能谈内容
最基础的页面骨架通常包括：
headermainfootersectionnavarticle
这些标签的意义，不是让页面“更高级”，而是让工具能够判断：
- 哪块是主内容
- 哪块是导航
- 哪块是独立文章
一个简单判断法
如果去掉所有样式，你还能从结构层面看懂这页是在讲什么，说明语义通常不会太差。
二、标题层级：H1 到 H3 不是字号，而是信息关系
最常见的问题不是“少一个 H3”，而是：
- 一页多个 H1
- 为了视觉把普通文本写成 H2
- 标题层级跳跃，H2 后直接进 H4
标题层级的作用是表达内容树，而不是视觉大小。
对 SEO 而言，它帮助搜索引擎理解页面主题与子主题；对读屏工具而言，它帮助用户快速跳转到目标内容。
三、交互语义：不要让可点击的东西看起来像按钮、实际上只是 div
这是前端页面里非常高频的可访问性问题。
错误写法通常是：
- 用
div模拟按钮 - 用
span做链接交互 - 表单输入没有关联
label
这会直接导致：
- 键盘用户难以操作
- 辅助技术无法正确朗读角色
- 行为与结构不一致，后续维护风险上升
正确原则
- 能用
button就不用div - 能用
a就不要用 click 模拟跳转 - 表单控件必须有 label、错误提示和状态说明
四、可访问性与 SEO 为什么经常一起出问题
因为它们都依赖结构清晰度。
例如：
- 图片没有
alt，可访问性和图片搜索都会受损 - 表单结构混乱，既影响转化也影响使用体验
- 页面标题层级混乱，既不利于爬虫理解，也不利于辅助工具导航
所以很多“SEO 问题”本质上其实是结构问题。
五、语义化最常见的失败案例
失败 1：页面很好看，但主内容埋在一堆容器里
这种页面视觉上没有问题，但结构上只有大量 div，主内容区域不清晰，搜索和可访问性都吃亏。
失败 2：表单字段全都有，但屏幕阅读器不知道它们是什么
字段本身可见，不代表可理解。没有 label、错误提示不绑定、状态说明缺失，都会让表单可用性大幅下降。
失败 3：图片承担信息，却没有文字替代
如果一张图包含关键文案或业务信息，但 alt 为空，读屏用户和搜索引擎都会失去重要上下文。
最小审计清单
- 页面是否有明确的
header / main / footer - 是否只有一个 H1，且层级连续
- 导航、文章、区块是否使用合适语义标签
- 可点击元素是否使用原生交互标签
- 表单是否为输入项提供 label 和错误提示
- 图片是否按信息性提供合适 alt
- 去掉样式后，页面结构是否仍然可理解