1 如何理解HTML语义化

⚡ 30 秒速记

• 语义化 = 让标签本身说明内容是什么，而不是全用 div 靠 class 名暗示
• 可访问性：读屏器靠语义建地标和标题导航；<button> 自带焦点、回车 / 空格触发、disabled
• SEO：爬虫靠 h1~h6 层级、article、time datetime 理解结构
• 可维护：看到 <nav>、<aside> 就知道职责，不用猜 box2 是啥
• 边界：纯布局还是用 div；section 要有标题；能用原生元素就别靠 ARIA 补

HTML 语义化就是让标签自己说明「我是什么」，比如导航用 <nav>、按钮用 <button>，而不是全用 div 拼。 好处有三层：读屏器能识别出导航、主内容、按钮，键盘用户能 Tab 到控件上；搜索引擎更容易看懂页面结构；接手的人看标签就知道每块是干什么的。最典型的反例是 <div onclick> 当按钮，鼠标点没问题，但键盘停不上去，读屏器也只当普通文字念。换成 <button>，焦点、键盘操作、禁用状态全是白送的。但语义化不是标签越多越好，纯布局的容器照样用 div。

语义化的核心是让标签本身携带含义，而不是清一色 div 再靠 class 名去暗示用途。浏览器、搜索引擎和辅助技术读到 <nav> 就知道这是导航，读到 <button> 就知道它可点击、可聚焦、能用回车和空格触发 —— 这些行为是元素自带的，不是你写 JS 补出来的。

三层价值，面试按这个顺序讲：

1. 可访问性：读屏器靠语义构建"地标列表"，用户能直接跳到导航或主内容。<div onclick> 在读屏器里就是一段普通文本，键盘 Tab 也停不上去；换成 <button>，焦点、角色、键盘操作三样全都免费拿到。
2. SEO：爬虫用标签推断内容权重和结构。<h1> 到 <h6> 的层级、<article> 的边界、<time datetime> 的机器可读时间，都会影响索引和摘要展示。
3. 可维护性：结构自解释。接手的人看到 <aside> 就知道这是次要内容，不用去猜 class="box2" 是什么。

一个具体对比：

<!-- ❌ 键盘用不了、读屏器读不出、没有 disabled 语义 -->
<div class="btn" onclick="submit()">提交</div>

<!-- ✅ 免费获得：可聚焦、回车/空格触发、disabled 状态、读屏器播报"按钮" -->
<button type="submit">提交</button>

边界 —— 语义化不等于标签越多越好：

• 纯粹为了布局包的容器就该用 div，强行套 <section> 反而会在辅助技术里多出一堆无名地标。
• <section> 必须配标题才有意义，没有标题时用 div。
• 别为了 SEO 堆 <h1>：一个页面多个 h1 在 HTML5 里合法，但标题层级错乱会让大纲失效。
• ARIA 是补丁不是替代品 —— 官方规则第一条就是"能用原生元素就别用 role"，因为 role="button" 只改了播报，键盘行为还得自己补。