让网页更耐用，从语义化 HTML 开始

很多小型内容网站刚上线时，首先关注的是“看起来对不对”。为了快速完成页面，开发者可能大量使用 <div>，再借助 class 和 JavaScript 拼出标题、导航、按钮与文章结构。

这种做法短期内很快，但当页面需要适配手机、键盘操作、搜索引擎或屏幕阅读器时，维护成本便会迅速上升。

让元素表达自己的职责

语义化 HTML 的核心不是追求更多标签，而是让元素表达自己的职责：

• 站点的主要导航适合使用 <nav>；
• 文章主体适合放在 <article> 中；
• 页面内相对独立的主题分区可以使用 <section>；
• 标题应按照内容层级使用 <h1> 到 <h6>，而不是只根据字号选择；
• 执行动作的控件应优先使用 <button>；
• 跳转到另一个地址时，应使用 <a>。

浏览器已经为这些原生元素提供了相应的语义与交互基础。W3C《Using ARIA》也建议：当原生 HTML 元素已经具备所需语义和行为时，应优先使用原生元素，而不是重新包装普通元素并补充 ARIA。

清晰结构让页面更容易维护

语义化结构首先改善的是可维护性。开发者阅读 DOM 时，可以直接理解页面由哪些部分组成；CSS 选择器也能更贴近组件职责。

它也让渐进增强更容易实现：即使脚本加载失败，链接仍可跳转，表单仍可提交，文章仍能保持清晰的阅读顺序。对于网络不稳定或设备性能有限的读者，这关系到内容能否继续使用。

结构、表现与交互各司其职

语义并不意味着放弃视觉设计。更清晰的分工是：

1. HTML 负责结构；
2. CSS 负责表现；
3. JavaScript 负责必要的交互。

三者职责清楚后，桌面与手机可以共享同一份内容结构，只在布局层进行调整。

响应式设计也不应只检查截图宽度，还应检查：

• 页面是否出现横向溢出；
• 触控目标是否足够大；
• 焦点顺序是否自然；
• 放大文字后，内容是否仍然可以阅读。

从高价值区域逐步改造

改造旧页面时，不必一次重写全部代码。可以先从高价值区域开始：

1. 把可点击的 <div> 换成 <button> 或 <a>；
2. 为输入框补上可见的 <label>；
3. 把主要内容放进 <main>；
4. 校正标题层级；
5. 确保图片具有与内容相关的替代文本；
6. 只在原生语义不足时补充 ARIA。

每次改动后，都用鼠标、键盘和窄屏浏览器走一遍真实流程。原生 HTML 应优先于等价 ARIA 角色，这也是 W3C ARIA 结构角色指南给出的明确原则。

先把结构做对

语义化 HTML 最重要的价值，是让页面在样式变化、脚本失败、设备不同或辅助技术介入时，仍然保留基本含义。

对于内容网站，先把结构做对，再逐步增加视觉与交互，通常比复杂界面完成后再补救更省时间，也更可靠。