语义化标签通过明确责任边界提升可维护性。用<main>替代div类名可避免命名冲突与多节点误选；<nav>和<header>分离导航与页头逻辑，支持独立操作；data-module配合语义标签实现模块化选择，增强稳定性与可读性。
语义化标签直接缩小修改影响范围，让“改一处不崩三处”成为可能。
用 <main> 替代 div 类名定位主体内容
当页面主体内容被包裹在 <main> 中，所有 JS 查询、CSS 样式、SEO 配置都可直接锚定这个唯一标签。浏览器保证一个文档中最多一个 <main>，且不嵌套——这天然排除了 class 冲突、多层嵌套误选、命名漂移等问题。
常见错误现象：document.querySelector('.content-wrapper') 在重构时失效，因为 class 名从 content-wrapper 改成 page-main，而 JS 未同步更新；或多个 div.content-wrapper 导致 querySelectorAll 拿到意外节点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保整个页面只出现一次
<main>，且不嵌套在<article>或<section>内 - CSS 中优先写
main { … }而非.main或.content - JS 中用
document.querySelector('main')获取主体容器，避免依赖 class 字符串匹配
用 <nav> 和 <header> 切分导航与页头逻辑
导航区和页头常被混写进同一个 div.header，导致后续想单独隐藏导航（如移动端折叠）、替换 Logo 区样式、或给导航加键盘焦点管理时，必须翻查 class 层级、担心误伤其他元素。
使用原生语义标签后，DOM 结构自带边界：导航归 <nav> 管，Logo/标题归 <header> 管，两者可独立存在、也可嵌套（<header> 内含 <nav> 是合法且推荐的）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<nav>必须包含至少一个可访问的链接列表，不能空着或只放按钮 - 不要用
<nav>包裹面包屑（用<ol>+aria-label="breadcrumb"更合适） - 如果页头里有搜索框、用户头像等非导航内容，仍应保留在
<header>内，但把纯导航链路明确放进<nav>
用 data- 属性配合语义标签做模块化选择
光靠语义标签还不够——比如多个 <aside> 怎么区分“相关文章”和“广告位”？这时候别再加 class="aside-ad" 或 class="aside-related"，而是用 data-module 显式声明意图。
这样做的好处是：CSS 仍可走语义标签基础样式（aside { … }），而 JS 或构建工具能精准命中特定模块，不受 class 命名风格影响。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
data-module="navigation"、data-module="related-posts"这类命名，避免带样式暗示的词（如data-type="blue"） - JS 查询写成
document.querySelectorAll('[data-module="navigation"]')，比document.querySelector('.nav')更稳定 - 禁止在
data-属性里塞 JSON 字符串或复杂结构，保持扁平、可读、可调试
真正难维护的不是写错一个标签，而是整个 DOM 缺乏「责任边界」：哪个区域该被 SEO 抓取、哪个该被屏幕阅读器跳过、哪个模块允许独立复用——这些信息全靠标签名本身承载。一旦退回到 div 套娃，你就得靠注释、文档、约定甚至运气来维持理解一致性。
