语义化HTML通过header、nav、main等标签明确页面结构，提升可读性与无障碍访问；合理使用标题层级（h1-h6）、表单label关联及ARIA属性，确保辅助技术准确解析内容，增强用户体验。
HTML语义化不仅是提升代码可读性和SEO的关键，更是实现无障碍访问的基础。屏幕阅读器、语音识别工具等辅助技术依赖HTML的结构来理解页面内容，因此合理使用语义化标签能显著提升残障用户的浏览体验。
使用正确的语义标签构建页面结构
语义化标签如 header、nav、main、article、section、aside 和 footer 能明确划分页面区域，帮助辅助技术快速定位关键内容。
- 用 nav 包裹主导航链接，让屏幕阅读器用户快速跳转到导航区
- 通过 main 标记页面核心内容，避免用户在重复元素中迷失
- 使用多个 section 或 article 区分独立内容模块，增强逻辑层次
标题层级保持清晰与连贯
正确使用 h1 到 h6 构建内容大纲，相当于为视障用户提供“目录导航”。
- 每个页面应有且仅有一个 h1，代表主标题
- 标题不可跳跃使用，例如从 h2 直接到 h4 会破坏结构逻辑
- 避免仅通过样式调整标题外观，应保持标签与语义一致
表单元素需具备明确的上下文关联
表单是交互重点，也是无障碍易出问题的区域。语义化能确保每个输入都有清晰说明。
立即学习“前端免费学习笔记（深入）”；
- 所有 input 都应有对应的 label，并使用 for 属性关联
- 用 fieldset 和 legend 组织相关控件（如单选按钮组）
- 错误提示需通过 aria-describedby 与输入框关联，确保被读出
增强语义：ARIA角色与属性的合理补充
当原生语义不足时，可用WAI-ARIA补充信息，但不能替代语义化标签。
- 优先使用原生元素（如 button），而非 div + onclick + role="button"
- 用 aria-current="page" 标示当前导航项，比单纯加粗更可访问
- 动态内容更新可配合 aria-live，让屏幕阅读器及时播报
基本上就这些。语义化不是额外负担，而是编写高质量HTML的自然结果。把结构写清楚，机器才能读懂，用户才能顺畅访问。不复杂，但容易忽略细节。
