应优先用当内容有独立主题和标题，否则用；必须含–标题才具语义，影响大纲、seo与可访问性，无标题时等同且造成误导。
section 和 div 功能上都能装内容、加样式、绑事件，但浏览器、搜索引擎和读屏器“理解”它们的方式完全不同：一个在说“这是有主题的一节”，另一个只说“这里我划了个框”。选错不卡页面，但会悄悄影响可访问性、SEO 和长期维护成本。
看有没有标题——语义成立的硬门槛
一个 <section></section> 没有 <h2></h2>～<h6></h6>，就等于没身份证。它不会被读屏器识别为可跳转章节，大纲工具也提取不出结构，实际效果和 <div> 一样，还多一层误导。
<ul>
<li>✅ 正确：<pre class="brush:php;toolbar:false;"><section><h3>用户反馈</h3>
<p>“响应很快！”</p></section></pre>
</li>
<li>❌ 错误：<code><section><p>正在加载中…</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></section> → 应改用 <code><div>
<li>⚠️ 隐藏标题也可行：用 <code><h3 class="visually-hidden">评论区</h3> 配合 CSS 隐藏，语义保留，视觉不干扰
看内容是否自成一节——逻辑独立性是关键
这段内容能不能单独拎出来，让人一眼知道它讲什么？是否在文档大纲里天然占一节？满足这个，才轮到 <section></section> 出场。
- 适合
<section></section>：产品页的「技术参数」「售后服务」「客户案例」——每个都有明确主题、自带标题、可被链接或摘要 - 不适合
<section></section>：轮播图容器、下拉菜单外层、表单分组字段 —— 它们是交互或布局单元，不是内容主题 - 注意嵌套：子
<section></section>也必须有自己的标题，不能靠父级标题“代管”
看用途是不是纯技术需求——div 的不可替代性
<div> 不是旧标签，而是唯一明确声明“此处无语义”的精准工具。当目的只是样式控制、JS 操作钩子或布局分块，它就是最诚实的选择。
<ul><li>该用 <code><div>：CSS Grid/Flex 的直接父容器、模态框根节点、<code>data-chart-id 挂载点、带 class 的侧边栏包装器
<section></section>（应为 <nav></nav>），或把整篇正文塞进 <div class="article">（应为 <code><article></article> 或 <main></main>）
<section></section>
别混淆分工——它们不是升级关系，而是各司其职
<section></section> 不是“高级版 <div>”，<code><article></article> 也不是“更强版 <section></section>”。三者定位清晰：
-
<section></section>：有主题、有标题、可纳入大纲的内容区块（如“使用说明”“常见问题”） -
<article></article>：可独立发布、复用或 RSS 推送的内容单元（如一篇博客、一条新闻） <div>：无语义，纯为样式、脚本或布局服务的通用容器 <p>混用或强行替换，反而让结构更难懂。语义标签的价值不在“看起来规范”，而在让机器和人都能更快读懂页面骨架。</p> </div>
