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