语义化是通过准确标签表达内容角色，提升可访问性、SEO与维护性。应使用header、nav、main等标签明确结构，避免div滥用；嵌套需合理，如article内含独立header/footer；结合BEM命名和功能类名统一class，禁用表现性命名；表单、图片须遵循a11y规范，正确设置alt、label等；通过PR审查、ESLint插件及培训机制保障执行，将语义化融入团队开发文化，确保代码清晰易读且可持续维护。
HTML语义化不是写得好看就行，而是让标签表达内容的真实含义，提升可访问性、SEO和团队协作效率。制定一套清晰的语义化编码规范，能有效减少代码歧义，提高项目可维护性。
明确语义化标签的使用场景
避免用 div 和 span 滥用代替有语义的标签。每个标签应反映其内容的角色：
- header：用于页面或区块的顶部区域，通常包含标题、导航或品牌标识
- nav：只包裹主导航链接组，如顶部菜单、侧边栏导航
- main：页面核心内容容器，每个页面最多一个 main
- article：独立内容单元，如博客文章、新闻条目
- section：主题性内容分组，应自带标题（h2-h6）
- aside：与主内容相关但可独立存在的旁注、广告、侧栏
- footer：页面或区块的底部信息，如版权、联系方式
嵌套要合理。比如 article 内可包含自己的 header 和 footer，不要为了结构而堆砌标签。
统一团队的命名与结构约定
语义化不只是标签选择，还包括 class 命名和DOM结构的一致性。
立即学习“前端免费学习笔记（深入）”；
- 采用 BEM 或简洁语义命名法，如 .card、.card__title、.card--featured
- 避免表现性命名，如 .red-text、.float-left，改用功能或角色命名
- 建立常用组件的语义模板，如搜索框用 form + label + button，而非 div 模拟按钮
团队可通过共享代码片段或文档定义“标准结构”，减少重复决策成本。
结合无障碍（a11y）要求强化语义
语义化直接影响屏幕阅读器用户的体验。必须关注以下细节：
- 正确使用 heading 层级，保持逻辑顺序，不跳级（如 h2 后直接 h4）
- 为图片添加 alt 属性，装饰性图片设为 alt=""
- 表单元素必须有对应的 label，并用 fieldset + legend 组织多选题等复合控件
- 通过 aria-label、aria-labelledby 等补充复杂组件的语义
建议在代码审查中加入 a11y 检查项，使用工具如 axe 或 Lighthouse 进行自动化检测。
建立检查机制与持续培训
规范落地靠流程保障。推荐以下做法：
- 在 PR（Pull Request）中明确要求语义化合规，由至少一人专项审查结构合理性
- 使用 ESLint 插件（如 eslint-plugin-jsx-a11y）或 HTML 验证工具预检问题
- 定期组织内部分享，分析典型反模式，比如“div 嵌套八层”案例
- 新成员入职时提供语义化编码手册，附带正反示例
把语义化纳入团队技术文化，而不是一次性任务。
基本上就这些。规范不在厚，而在执行一致。一个语义清晰的页面，不仅机器能读懂，新人接手也更容易理解意图。
