必须用而非的判断依据是：该内容是否天然带有可命名的主题并出现在文档大纲中；是语义化标签，浏览器和屏幕阅读器识别为“页面或区域的头部”，而无语义，仅用于布局或JS锚点等纯控制场景。
什么时候必须用 <section></section> 而不是 <div>
<p>判断依据只有一个：<strong>这块内容是否天然带有可命名的主题，并出现在文档大纲中</strong>。</p>
<ul>
<li>产品页里的「核心功能」「客户案例」「技术参数」——每个都该是 <code><section></section>，因为它们各自有 <h2></h2> 或 <h3></h3> 标题，且可被单独链接或摘要
<article></article>，不是 <section></section>；整个“最新文章”容器才是 <section></section>
<div> + <code>class 更准确
<section></section> 却一时想不出标题，大概率说明它不该是 <section></section>
<section></section> 必须配 <h2></h2>–<h6></h6>，否则语义断裂。没有标题的 <section></section> 在 NVDA 和 VoiceOver 中基本等于隐身：自动大纲提取工具无法识别，CSS 作用域也失去结构锚点。
<header></header> 和 <div class="header"> 的本质区别在哪
<p><code><header></header> 是语义化标签，浏览器和屏幕阅读器会直接识别为“页面或区域的头部”；<div class="header"> 只是一个带 class 的通用容器，语义为零。
<ul>
<li>
<code><header></header> 默认包含 Logo、导航、搜索框等典型头部内容，辅助设备会播报“进入页面头部区域”
<div class="header"> 的 class 名一旦写成 <code>top 或 nav-wrap，其他开发者或爬虫就无法推断用途
<header></header> 直接加分，但全用 <div> 套娃会让爬虫更难提取核心结构
<li>
<code><header></header> 可以嵌套在 <article></article> 或 <section></section> 内部，表示该区块自身的头部，而 <div class="header"> 无法表达这种层级关系
<h3>哪些场景只能用 <code><div>，硬套语义标签反而出错
<p><code><div> 不是过时标签，而是唯一能承担“无语义、纯控制”任务的元素。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul><li>做 CSS Grid / Flex 布局的直接父容器：<code><div class="grid-container"> —— 语义无关，纯为样式服务
<li>作为 JS 操作锚点：<code><div id="modal-root">、<code><div data-chart-id="sales-2025"> —— hook 才重要，语义不重要
<li>包裹 <code><canvas></canvas>、<svg></svg>、WebGL 渲染区 —— 这些本就不属于文档语义流，用 <section></section> 会误导辅助技术<div class="loading-spinner"> —— 没主题、没标题、纯 UI 容器，用 <code><section></section> 属于语义污染
一个快速自查清单：你正在写的这个容器，该选谁？
对着代码问自己这 4 个问题：
- 它有没有一个自然、可命名的主题？（比如“用户评论”“配置说明”）→ 有 → 考虑
<section></section>或<article></article> - 它是否独立存在、脱离当前页面也能被理解？（比如一篇博客、一条微博）→ 是 →
<article></article>更合适 - 它是否只是为样式、JS 或动画服务，不传达任何内容含义？→ 是 →
<div> 是唯一正解 <li>你能不能立刻给它配上一个 <code><h2></h2>～<h6></h6>？如果卡住，就别用<section></section>
最常被忽略的一点：语义标签不是“越多越好”，而是“刚好够用”。<section></section> 嵌套三层以上、<article></article> 包着按钮和 loading 图标，往往意味着结构设计本身出了问题，而不是标签选错了。
