语义化标签不是风格偏好，而是页面与外部世界通信的协议。浏览器、搜索引擎、读屏工具、维护页面的工程师，读的都是同一层语义。
四类受益者
| 受益者 | 依赖的语义 | 缺失的代价 |
|---|---|---|
| 浏览器 | 元素映射为具体接口 | 默认行为与样式丢失 |
| 搜索引擎 | 内容层级与重点 | 权重判断失真 |
| 读屏工具 | 角色与导航地标 | 页面无法按结构浏览 |
| 维护者 | 结构即文档 | 接手成本上升 |
一个具体例子
button 自带键盘聚焦、回车触发、禁用状态与读屏角色。用 div 模拟时，这四件事都要手写，漏一件就是缺陷。
常用地标
<header>页头</header>
<nav>导航</nav>
<main>主体</main>
<article>独立内容</article>
<footer>页脚</footer>读屏用户按地标跳转，可直达 main，不必逐条听完页头。纯 div 结构下这一步不存在。
不语义化的典型后果
- 全文只有 div 与 span，层级靠样式表达，机器读不出重点。
- 可点击元素不是 button 或 a，键盘无法操作。
- 标题层级跳跃，大纲工具生成的大纲断裂。