Appearance
语义化 HTML：文档结构、辅助技术与默认行为
主题边界
- 语义化是让元素名称与它在文档中的职责一致，例如
header、main、nav、article、button。 - 它不仅影响开发者阅读体验，还会影响辅助技术、键盘交互、默认样式和搜索引擎理解。
机制与流程
- 浏览器会根据元素语义生成 DOM 与 accessibility tree 中不同的角色、名称计算与 landmark 区域。
- 按钮、链接、表单控件等语义元素自带焦点行为、键盘响应和提交逻辑，替代元素要手动补齐这些能力。
- 正确的标题层级、列表结构和表格语义会改善文档导航与内容抽取。
关键差异
- 语义化不是“少用 div”，而是优先使用真正具备相应语义和默认行为的元素。
- 视觉样式与语义职责是两层问题，样式完全可以把
button做得像链接，但交互语义不能反过来省略。
边界条件
- 滥用 ARIA 角色替换原生语义通常是退步，因为原生元素的默认行为更完整。
- 多个
main、错乱的标题层级、把可点击区域做成裸div都会破坏结构信号。
工程落点
- 组件库设计时应先选对底层语义元素，再在其上封装样式与行为。
- 语义化错误会直接放大为无障碍缺陷、SEO 损失和测试自动化的定位困难。