标准答案
- 语义化 HTML 就是根据内容含义选择标签，而不是只用 div 和 span 拼视觉效果。
- 比如导航用 nav，主体用 main，独立内容用 article，按钮操作用 button，表单说明用 label。
- 对可访问性来说，语义标签能让屏幕阅读器识别区域、控件和操作上下文。
- 对 SEO 来说，标题层级、正文区域和链接语义能帮助搜索引擎理解页面主题。
- 对团队维护来说，结构含义清楚后，样式、脚本、测试和重构都更稳定。
题目解析
- 可访问性：屏幕阅读器可以识别 nav、main、button、label、fieldset 等语义，用户能更快理解页面区域、表单问题和可操作控件。
- SEO：搜索引擎更容易识别页面标题、主体内容、导航链接和文章结构，但语义化只是基础信号，不能替代内容质量和性能体验。
- 团队维护：语义清楚的结构降低沟通成本，后续加样式、绑定事件、写测试或做重构时，不需要只靠 class 名猜元素用途。
回答时可以先讲定义，再按可访问性、SEO、维护性三条展开，最后补一句边界：语义化不能代替内容质量、性能优化和可访问性细节。
代码示例
同样是页面导航，用 nav 和真实链接比 div 绑定点击事件更清楚，也更容易被键盘和屏幕阅读器使用。
HTML
<header>
<h1>程序员的代码世界</h1>
<nav aria-label="主导航">
<a href="/articles/">文章</a>
<a href="/categories/">分类</a>
<a href="/categories/interview/">面试题</a>
</nav>
</header>
<main>
<article>
<h2>语义化 HTML 的作用</h2>
<p>这里是文章正文。</p>
</article>
</main>常见误区
- 认为语义化就是多用几个 HTML5 新标签。真正关键是元素和内容含义匹配。
- 为了 SEO 滥用 h1 或堆叠关键词，这会破坏结构。
- 把 button 写成 div 再绑定 click，导致键盘操作、焦点状态和默认行为缺失。