应优先使用语义化标签替代无意义的<div>布局：header、nav、main、article、section、aside、footer各司其职，提升可访问性、SEO与可维护性；仅在纯样式隔离、JS钩子或组件约束等无语义场景下才用<div>。
用语义化标签替代无意义的 <div> 布局
直接结论：能用 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 的地方，就别套 <div class="header"> —— 浏览器不认 class，但认这些标签名；屏幕阅读器、SEO、可维护性全靠它。
常见错误现象：div div div 嵌套三层以上，class 名全是 wrap、container、box，结构一动，CSS 全崩；调试时打开开发者工具，满屏 <div>，看不出哪块是导航、哪块是正文。
-
<header>不只是“顶部栏”，它代表整个页面或<article>的**引入性内容**（含 logo、标题、简介），一个页面可有多个 -
<nav>专指**导航链接集合**，不是所有按钮或菜单都算 —— 比如页脚里的“关于我们”链接列表，也该包在<nav>里 -
<main>**必须且只能出现一次**，且不能嵌套在<article>或<aside>内，它是页面核心内容容器 -
<section>表示有独立主题的**逻辑区块**，要有自己的<h2>～<h6>；纯样式分隔（比如加个 margin）不用它
什么时候还非得用 <div>？
不是所有容器都要语义化。当纯粹为了样式隔离、BEM 命名、或 JS 操作钩子，且没有内容语义时，<div> 是合理选择。
典型场景：
立即学习“前端免费学习笔记（深入）”；
- Grid/Flex 容器内部需要额外包裹一层来控制对齐或间距（
<div class="card__body">） - Vue/React 组件模板中，根节点必须是单个元素，而语义标签可能破坏结构层级（例如组件本该渲染为
<article>子内容，但父组件强制要求一个 wrapper） - 需要
display: contents或某些 CSS 重置行为，而语义标签自带默认样式或隐式 ARIA 角色，反而干扰
关键判断标准：删掉这个标签，内容是否仍能被正确理解其角色？ 如果答案是“是”，那大概率该用 <div>；如果删了就分不清哪是侧边栏、哪是正文，则该换语义标签。
避免 <div> 套语义标签的反模式
写成 <div class="article"><article>...</article></div> 是常见冗余 —— <article> 本身已具备语义和默认 display（block），再包一层 <div> 仅增加 DOM 节点，无实际收益。
更隐蔽的问题：
- 把
<nav>放进<div class="header-nav">，而非直接用<header><nav>—— 屏幕阅读器会读作“div 区域”，跳过导航语义 - 用
<section>包裹单个<p>，且无标题，违反<section>的“主题性”定义，应改用<div>或直接设样式 - 为兼容旧版 IE 强行降级：IE8 不支持语义标签，但现代项目早该用
document.createElement('header')或 posthtml 插件补全，而不是放弃语义
真正难处理的，往往是历史项目里那些没命名规则、没文档、又混着 JS 动态插入的 <div id="content_123"> —— 这类节点没法靠标签名推断用途，只能结合上下文、JS 变量名、网络请求响应结构一点点反推。
