HTML语义化是让机器准确解读页面结构：用<nav><main>等原生标签替代<div>套用，提升可访问性、SEO与性能；表单必须绑定<label>；<article>与<section>不可互换；重构应聚焦表单、骨架和内容区块三大高杠杆点。
HTML语义化不是“写得更漂亮”，而是让结构本身能被机器准确解读——不加 <nav>，屏幕阅读器就真不知道哪块是导航；不用 <main>，搜索引擎可能把侧边栏当正文索引。
为什么 <div> 套 <div> 是可访问性灾难
现实里大量页面仍用 <div class="header"> 或 <div id="content">，这在视觉上没问题，但对辅助技术等于“黑盒”：屏幕阅读器无法识别区域意图，用户得靠反复试听才能定位登录框或主导航。WebAIM 2023 年统计显示，98.1% 的首页存在可访问性错误，其中“缺失语义结构”是底层共性原因。
改用原生语义标签后，变化是静默但关键的：
-
<header>告诉浏览器：“这是页面顶部的全局区块”，不是随便一个带 logo 的<div> -
<nav>明确标识“此处为导航链接集合”，支持快捷键跳转（如 NVDA 的 N 键） -
<main>是文档唯一主内容容器，Lighthouse 审计会直接报错若缺失或重复 -
<article>和<section>不是互换的：<article>表示可独立分发的内容（如博客正文），<section>是逻辑分组（如“评论区”“相关文章”）
<label> 必须绑定 <input>，否则表单就“失明”
很多表单仍用 <div>用户名</div><input type="text"> 这种松散结构。问题在于：屏幕阅读器无法将文字和输入框建立关联，用户听到“编辑文本”却不知道要填什么；点击文字也无法聚焦输入框，触控体验差。
立即学习“前端免费学习笔记（深入）”；
正确做法只有一条铁律：
- 每个
<input>必须有且仅有一个<label>，通过for属性或嵌套实现绑定 - 避免
<label>用户名</label><input>这种无关联写法 - 复选框/单选按钮组要用
<fieldset>+<legend>包裹，否则语义断裂
示例：<label for="email">邮箱地址</label><input type="email" id="email"> —— 点击“邮箱地址”即聚焦输入框，NVDA 会读作“邮箱地址，编辑文本”。
语义标签不是“多此一举”，它直接影响性能与 SEO
Chrome DevTools 团队实测表明：正确使用 <header>、<nav>、<main> 等标签，可减少约 15% 的布局计算时间。因为浏览器无需再猜测 DOM 结构意图，能跳过部分解析路径。
SEO 方面，<main> 内容权重天然高于 <aside> 或 <footer>，Google 的结构化数据测试工具会优先提取 <article> 中的 <h1> 和时间信息生成富摘要。《卫报》重构后自然搜索流量提升 22%，核心动作之一就是替换掉 3700+ 处 <div class="post"> 为 <article>。
注意两个易错点：
-
<section>必须有标题（<h2>–<h6>），否则语义不成立，会被 Lighthouse 标为“无效语义” -
<aside>不是“侧边栏”的同义词，而是指与主内容相关但可独立存在的补充信息（如术语解释、引用来源）
语义化重构不是推倒重来，而是从关键节点切入
真实项目中，没人会一次性重写全部 HTML。最有效路径是盯住三个高杠杆点：
- 所有表单：先补全
<label>绑定，再加<fieldset>/<legend> - 页面骨架：把
<div id="header">换成<header>，<div class="main">换成<main>，立刻解决 Lighthouse “缺少主内容标识”警告 - 内容区块：识别出独立成篇的内容（博客、新闻、产品介绍），用
<article>替代<div class="card">
别纠结“哪个标签更高级”，先确保 <nav> 包住所有导航链接，<footer> 只放页脚信息——机器读得懂，人维护起来才不会在三个月后对着 <div class="foot"> 发呆。
