语义化标签替代div堆砌是提升可读性、无障碍支持和可维护性的关键。应使用header、nav、main等原生标签明确模块意图，避免无意义wrapper，采用功能型命名，利用template/slot复用结构。
用语义化标签替代 <div> 堆砌
很多页面结构混乱，本质是把 <div> 当万能容器用，结果导致逻辑不可读、无障碍支持差、后期改版成本高。语义化标签不是“锦上添花”，而是让浏览器、屏幕阅读器和开发者一眼看懂模块意图。
常见误用：<div class="header">、<div class="nav">、<div class="main"> —— 这些完全可以用原生语义标签替代：
-
<header>代替页头区域（注意：一个页面可有多个<header>，比如文章内也有独立标题区） -
<nav>仅用于导航链接集合，不是所有菜单都算<nav>（如页脚的友情链接一般不用） -
<main>必须且只能出现一次，代表页面核心内容，不能嵌套在<article>或<aside>内 -
<section>表示有主题的分组，需带标题（<h2>或更高），纯样式分隔不用它 -
<article>用于可独立分发/复用的内容块（博客、新闻、评论），不是每个卡片都得套一层
避免过度嵌套与无意义的 wrapper
三层 <div> 套一层 <div> 是维护噩梦。每加一层 wrapper，就多一层 DOM 节点、CSS 选择器复杂度、JS 查询开销，还容易引发定位/继承问题。
判断是否该删掉某层 wrapper 的关键点：
立即学习“前端免费学习笔记（深入）”；
- 这个
<div>是否承担明确职责？比如仅为了margin或padding加的，直接挂到子元素上更干净 - 是否有 JS 通过
document.querySelector('.wrapper .inner .content')强耦合路径？这种写法极易因结构调整失效 - 是否用它实现 BEM 的
block__element结构？BEM 不等于必须多层 DOM，可用 CSS 自定义属性或更扁平的类名设计
示例：不要这样写
<div class="card">
<div class="card__body">
<div class="card__content">
<p>文字</p>
</div>
</div>
</div>而应考虑：
<article class="card"> <p class="card-content">文字</p> </article>
为关键区域添加 id 或有意义的 class，但拒绝“样式类”命名
结构可维护的前提是：别人（包括三个月后的你自己）能快速定位并理解某段 HTML 是干什么的。命名必须反映功能或内容角色，而不是视觉表现。
坏例子：class="blue-box"、class="float-left"、class="mt-4" —— 一旦设计变更，类名立刻失效或误导
好做法：
- 用功能型命名：
class="search-form"、class="related-posts-list"、id="skip-to-main"（配合无障碍跳转） - 组件级结构用 BEM 时，
block名要真实存在业务语义，比如pricing-table比section-3强十倍 - 避免纯数字或位置命名：
class="section-1"、class="left-col"—— 页面重构后它们就失去意义
用 <template> 和 <slot> 管理重复结构，而非复制粘贴
当多个页面共用头部、侧边栏或表单模板时，硬拷贝 HTML 片段是最脆弱的做法。一处修改，十几处漏改，最终结构不一致。
现代方案优先级：
- 服务端渲染或构建工具（如 Webpack + HTMLWebpackPlugin）做 include / partial
- 客户端场景下，用
<template>配合 JS 克隆插入，比 innerHTML 字符串拼接更安全、更易调试 - Web Components 中使用
<slot>实现内容分发，让父组件决定子组件里放什么，而不是靠 class 控制显隐
简单示例（无需框架）：
<template id="site-header">
<header class="site-header">
<h1>我的网站</h1>
<nav><!-- 导航项由 JS 注入 --></nav>
</header>
</template>后续只需 document.getElementById('site-header').content.cloneNode(true) 插入，结构统一、修改集中。
真正难的不是写对第一版结构，而是让后续每次增删改都自然、低风险。语义准确、层级克制、命名务实、复用可控——这四点缺一，文档结构就会随时间熵增。
