什么是 HTML 语义化？为什么面试经常问它？

简化版

HTML 语义化就是用合适的标签表达合适的内容，比如标题用 h1，导航用 nav，文章用 article。它能让浏览器、搜索引擎、读屏软件和协作开发者都更容易理解页面结构。

详细版

语义化的核心不是“标签看起来有什么样式”，而是“标签本身表达什么含义”。

header 表示页眉或区域头部。
nav 表示导航区域。
main 表示页面主体，一个页面通常只有一个。
article 表示一块可独立分发的内容，比如文章、题目详情。
section 表示有主题的一节内容，通常配合标题。
aside 表示补充内容，比如侧栏目录、相关推荐。
footer 表示页脚或区域底部。

它的好处主要有三点：

对 SEO 友好，搜索引擎更容易判断页面主题和结构。
对可访问性友好，读屏软件可以按语义区域导航。
对维护友好，团队成员看到结构就知道每块内容的职责。

面试时可以这样回答：语义化是用标签表达内容结构，不只为了样式；它能提升 SEO、可访问性和代码可维护性。实际开发中，我会优先用语义标签搭结构，再用 CSS 控制表现。

完整版教学

一、语义化解决的是“结构表达”问题

早期很多页面喜欢用 div 搭所有结构，再靠 class 命名区分：

<div class="top"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="bottom"></div>

人可以猜出来这些区域大概是什么，但机器很难直接理解。语义化标签相当于把结构信息写进 HTML 自身：

<header></header>
<nav></nav>
<main>
  <article></article>
</main>
<footer></footer>

这时即使没有 CSS，文档结构也更清楚。

二、语义化和 SEO 的关系

搜索引擎抓页面时，会分析标题、正文、链接、导航和页面主体。语义化不能保证排名一定更高，但它能减少搜索引擎理解页面的成本。

比如 h1 通常表达页面主标题，h2 表达章节标题；如果把所有文字都写成 div，再靠 CSS 放大字体，视觉上像标题，但语义上不是标题。搜索引擎和辅助技术拿到的是 DOM 结构，不是你的设计稿截图。

三、语义化和可访问性的关系

读屏用户可能不会从上到下“看”页面，而是按标题、导航、主体区域快速跳转。nav、main、button、label 这些标签能让辅助技术知道它们的作用。

一个典型错误是用 div 写按钮：

<div onclick="submit()">提交</div>

它看起来能点，但键盘焦点、回车触发、按钮角色都要额外补。更好的写法是：

<button type="submit">提交</button>

原生标签自带行为，少写很多“补丁代码”。

四、常见误区

不要为了语义化乱用标签。section 不是更高级的 div，它应该表示一个有明确主题的区域，通常应该有标题。article 也不是普通容器，它强调内容可以独立存在。

另一个误区是认为语义化和样式冲突。标签负责语义，CSS 负责表现，两者是分层关系。你完全可以把 button 样式做得像链接，也可以把 nav 做成横向菜单。

五、面试追问与工程落地

面试官常会继续追问：“语义化是不是只对 SEO 有用？”这时要回答得更完整：SEO 只是收益之一，更重要的是 HTML 变成可被机器理解的结构。读屏软件、浏览器阅读模式、搜索引擎摘要、自动化测试选择器，都会受益于清晰结构。

另一个常见追问是 section、article、div 怎么选。可以这样判断：如果这块内容有明确主题并且通常能配一个标题，用 section；如果它离开当前页面仍然能独立成立，比如一篇文章、一条评论、一道题目详情，用 article；如果只是为了布局、包一层样式、没有额外语义，用 div。

工程里不要为了“看起来高级”把所有 div 都换成语义标签。语义化的目标是准确，而不是标签多样。比如卡片列表里的每张卡可以是 article，但卡片内部纯粹用于 flex 布局的容器继续用 div 就很好。

六、用可操作性检查语义是否选对

判断标签不能只看视觉。以“提交”控件为例，原生 button 天然具备按钮角色、键盘聚焦、Space/Enter 激活和 disabled 语义；用 div 模拟时至少要补角色、焦点、键盘事件与禁用状态，而且仍容易遗漏平台行为。假设团队有 20个此类控件，原生元素等于复用浏览器已经实现和测试过的交互契约，而不是复制 20 份补丁。

内容职责	优先元素	关键边界
页面主要内容	`main`	文档中通常只有一个可见主区域
一组主要导航链接	`nav`	不是任意链接集合都需要 landmark
可独立分发的完整内容	`article`	离开当前上下文仍应有意义
有主题且通常带标题的章节	`section`	不能只为样式包裹而滥用
无额外语义的布局容器	`div`	它是合理的通用容器，不是错误标签
执行动作	`button`	跳转资源通常应使用 `a`

<main>
  <article aria-labelledby="question-title">
    <h1 id="question-title">CSS 盒模型是什么？</h1>
    <section aria-labelledby="answer-title">
      <h2 id="answer-title">答案</h2>
    </section>
  </article>
</main>

语义化的验收标准是结构与行为是否准确地表达内容，不是页面用了多少种 HTML5 标签；没有专用语义时使用 div 完全正确。

七、常见误区与追问

误区：把所有 div 换成 section 就叫语义化。 section 应表示有主题的文档章节，纯布局包裹没有新增语义时仍应使用 div。
误区：语义化只影响 SEO。 它同时影响辅助技术导航、键盘行为、阅读模式、测试定位与团队维护。
误区：视觉上像按钮的元素都可以用 a 或 div。 跳转到资源用链接，触发当前页面动作优先用按钮，交互语义应与行为一致。
追问：article 和 section 如何区分？ 前者强调内容可独立成立或分发，后者强调当前文档中的主题章节，两者也可以按内容关系嵌套。
追问：一个页面可以有多个 nav、header、footer 吗？ 可以，它们可属于页面或不同分区；多个同类 landmark 应通过可访问名称帮助用户区分。
追问：页面是否可以出现多个 h1？ HTML 语法允许在分区中使用标题，但浏览器并未实现曾设想的自动大纲算法；工程上通常保留清晰、连续且可预测的标题层级。
追问：有原生标签时为什么不优先用 ARIA 模拟？ 原生元素同时提供语义、行为和平台适配；ARIA 主要补充无原生表达的场景，不会自动补齐键盘交互。

八、加强记忆

语义化的记忆锚点是“先问内容是什么，再选标签”。如果这块是导航，用 nav；如果是页面主体，用 main；如果是可独立阅读的文章，用 article。别让 CSS 决定 HTML，HTML 先把文档讲清楚。

简化版

详细版