语义化标签通过明确结构语义降低维护成本，解决DOM查询错误、样式误覆盖、SEO降权和无障碍问题；main、nav、article等标签天然排他、职责清晰，配合data-module实现逻辑与样式的解耦。
语义化标签不是让代码“看起来更专业”，而是把维护成本从“猜结构”变成“看标签就懂”。它直接减少 DOM 查询出错、样式误覆盖、SEO 降权和无障碍报错这些高频问题，是工程长期稳定的关键支点。
用 锚定唯一主体，终结 class 名混乱
- CSS 直接写 main { margin: 0 auto; max-width: 960px; }，不用再维护 .content-wrapper、.page-main、.article-body 等一堆易过时的类名
- JS 查询统一用 document.querySelector('main')，避免因 class 改名或重复导致 document.querySelectorAll('.content') 拿到弹窗、侧边栏里的干扰节点
- SEO 工具和爬虫能明确识别核心内容区块，不再靠 class 名推测权重
用
导航和页头常被混在一个 div.header 里，结果改 Logo 样式时意外隐藏了菜单，或加键盘焦点逻辑时误伤搜索框。语义标签让结构自带隔离层。
负责页头整体（Logo、标题、搜索、用户入口），非导航内容仍保留在其中，但纯导航链路明确放进 - 移动端折叠菜单？只操作
用 和 区分内容层级，避免“所有非主内容都塞进 aside”
很多人把推荐文章、广告位、作者简介全扔进
立即学习“前端免费学习笔记（深入）”；
用于可独立分发的内容单元，如一篇博客、一条新闻、一个商品卡片；它自带隐含的语义权重 表示有明确主题的分组，且建议配 ～
标题；例如“相关文章”“技术细节”“用户评价”都适合用
用 data-module 配合语义标签，解耦 JS 逻辑与视觉命名
class 名容易随 UI 改动而失效（比如 .btn-blue 变成 .btn-green），但模块意图不变。data-module 把“这是导航”“这是评论区”的意图显式声明出来。
- 统一用 data-module="navigation"、data-module="comment-thread"，不带样式暗示
- CSS 仍基于语义标签写基础样式（如 nav { … }），保持视觉一致性
- JS 查询写成 document.querySelector('nav[data-module="navigation"]')，精准命中，不怕 class 名变更
