应仅在无合适语义标签时使用div，如纯css布局容器、js临时包裹层、兼容旧浏览器或第三方嵌入点；有标题、独立内容或结构意义时须改用section/article/aside等语义化标签。

用 <div> 划分页面区块本身没问题，但直接套用容易让结构松散、语义模糊、后期维护变重——尤其当项目需要支持屏幕阅读器、SEO 或多人协作时。 <h3>什么时候该用 <code><div> 而不是语义化标签 <p><code><div> 是纯布局容器，没有内置含义。它真正该出场的场景很明确： <ul> <li>仅用于 CSS 布局（比如 flex 容器、grid 父项），内部不承载独立主题或内容单元</li> <li>需要 JavaScript 操作但无语义需求的临时包裹层（例如 <code><div id="modal-root">） <li>兼容老版本浏览器且无法使用 <code><section></section> / <article></article> 的遗留项目

第三方组件嵌入点（如 React root、地图 SDK 容器）

一旦你开始给 <div class="news-list"> 加标题、放多条新闻、考虑被 RSS 抓取，就该立刻换成 <code><section></section> 或 <article></article> ——否则语义断层，aria-labelledby 和搜索引擎都难识别。

<div> 嵌套层级过深会带来什么实际问题 <p>常见错误是写成：<code><div class="wrapper"><div class="container"><div class="content">...</div></div></div>。这种“div 套娃”看着整齐，实则埋雷：

• CSS 选择器越来越长（.wrapper .container .content p），优先级难控，易被意外覆盖
• JS 查询元素时路径冗长，document.querySelector('.wrapper .container .content') 不如直接 document.querySelector('main')
• 无障碍工具无法推断内容关系，<div> 不会暴露 role 或 implicit landmark <li>后续想加语义（比如把某块改成 <code><aside></aside>）得改 HTML + CSS + JS 三处，成本翻倍

建议：每层 <div> 都问一句“它有没有不可替代的布局职责？”——没有，就删；有，就加明确 class 并限制嵌套不超过 3 层。 <h3>用 <code><div> 配合 CSS 实现响应式分块的关键控制点 <p>单纯靠 <code><div> 无法响应，必须靠 CSS 配合。重点不在“怎么写”，而在“怎么约束”： <ul> <li>避免用 <code>float 布局（已废弃），优先用 display: grid 或 display: flex，并为容器设 box-sizing: border-box

• 给每个 <div class="sidebar"> 显式定义 <code>min-width 和 max-width，防止小屏下内容挤压变形
• 媒体查询中不要只改 width，同步调整 padding、font-size 和 gap，否则视觉断裂
• 若需 JS 动态显示/隐藏某块，用 visibility: hidden 或 display: none，别靠 opacity: 0 + pointer-events: none 模拟，会干扰焦点流

示例：一个带侧边栏的布局，<div class="layout"> 用 <code>display: grid; grid-template-columns: 1fr 300px;，小屏时改为 grid-template-columns: 1fr; 即可，无需改 HTML 结构。

如何快速判断当前 <div> 是否该替换成语义标签 <p>不用背标准，现场看三个信号：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>这个 <code><div> 里有没有 <code><h2></h2>～<h6></h6>？有 → 换 <section></section>

里面的内容能不能单独拎出来发到微博/微信公众号？能 → 换 <article></article>

它旁边有没有主内容？有且信息非核心（如广告、作者介绍）→ 换 <aside></aside>

剩下那些纯为了撑宽度、加阴影、做动画过渡的 <div>，留着没问题——但请确保 class 名不带语义（比如别叫 <code>class="header"，而用 class="shadow-container"）。

真正难的不是选标签，而是每次写 <div> 前停半秒：它现在只是个盒子，还是以后会变成一个“区域”？后者就得提前按语义标签设计 DOM 树。</div>