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