语义化是让HTML标签自身表达内容角色，而非依赖类名猜测结构；用<header><main><nav><article><aside><section>等标签明确区分页面功能区块，提升可访问性、SEO与维护性。
语义化不是让代码“看起来更专业”，而是让代码自己“说清楚它在干什么”。用对标签，别人扫一眼就能分清哪是导航、哪是正文、哪是侧边推荐；机器也能准确识别内容角色，避免靠猜 class 名或翻 CSS 才能搞懂结构。
让结构一目了然，降低理解成本
传统写法中大量使用 <div class="header"> 或 <div class="main-content">，类名易过时、难统一、无强制约束。换成 <header> 和 <main>，标签本身即文档——无需注释，新成员打开源码就能定位核心区块。
-
<nav>明确表示“这是跳转入口集合”，不是任意一组链接 -
<article>暗示该区块可独立分发（如 RSS 订阅、分享链接） -
<aside>表明内容与主文相关但非必需，比如作者简介或推荐阅读 -
<section>要搭配标题（<h2>～<h6>），否则容易沦为“视觉分隔 div”
避免“改一处崩三处”的维护陷阱
当所有区块都靠 class 控制逻辑时，JS 查询（如 document.querySelector('.sidebar')）、CSS 样式、甚至 SEO 抓取都绑定在脆弱的类名上。一旦设计师改版、组件库升级，class 名可能失效，而语义标签保持稳定。
-
<main>全页唯一，且不能嵌套在<header>、<footer>或另一个<main>中——这是 DOM 查询稳定的前提 - 禁止“语义套娃”：比如
<section><article><section>这类无实际区分意义的嵌套，反而模糊层级 - 纯图标按钮旁的说明文字，用
<small>或<span>更合适；只有完整信息块（含标题、时间、摘要）才用<article>
支撑自动化工具与团队协作
语义结构是 axe、Lighthouse 等工具校验无障碍和 SEO 的基础。一个正确使用 <nav> 和 <main> 的页面，能直接通过“跳转到主要内容”快捷键测试；而靠 role="navigation" 模拟的 <div>，屏幕阅读器支持不稳定。
立即学习“前端免费学习笔记（深入）”；
-
document.querySelector('main')总能稳稳拿到主体内容，不依赖 class 变更 - CI 流程中可用 HTML 验证器检查
<main>是否重复、<article>是否缺失标题 - 用
data-module替代 class 做 JS 锚点，把行为逻辑从样式层解耦出来
不是堆标签，而是讲清角色
语义化不是给每个 div 换个名字，而是动手前先问：这块内容能单独存在吗？它在整个页面里承担什么角色？去掉样式后，别人还能看出它是导航还是正文吗？
- 能独立分发 → 用
<article> - 整页最核心的信息区 → 用唯一
<main> - 一组主要跳转链接 → 用
<nav> - 与主文相关但非必需的补充 → 用
<aside> - 按主题划分的连续内容块 → 用
<section>，并配上<h2>～<h6>
