必须含语义标题（如至），否则被视为空章节，损害SEO与可访问性；无语义，仅作布局或交互容器，二者功能等价但语义迥异。
section 必须带标题，否则语义失效
浏览器和读屏器不认空 <section></section> —— 它不是“高级 div”，而是“有主题的章节”。没 <h1></h1> 到 <h6></h6> 的 <section></section> 会被解析为无意义区块，甚至干扰页面大纲（outline），导致 SEO 权重分散或屏幕阅读器报“空章节”。
常见错误现象：<section class="hero-banner"></section> 或 <section><div class="card-list">...</div></section>，里面没标题，纯当样式容器用。
- ✅ 正确写法：必须含语义标题，哪怕视觉上隐藏：
<section><h3 class="visually-hidden">推荐商品</h3> <div class="grid">...</div></section> - ❌ 错误写法：
<section><div class="carousel-controls">...</div></section>（轮播控制区无主题，也不该有标题） - 标题层级要合理：嵌套
<section></section>时，子<section></section>应用<h2></h2>或更低，不能全用<h1></h1>
div 是无语义容器，适合布局和交互钩子
<div> 不传递任何内容含义，只说“我这儿划了个框”。它对搜索引擎、读屏器、代码审查工具来说等于透明——它们只看你加的 <code>class、id 或 ARIA 属性。
使用场景明确：<div id="modal-overlay">、<code><div class="dropdown-menu">、<code><div data-js="tab-panel"> 这类纯功能/样式/脚本绑定容器，<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/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul><li>✅ 推荐：<code><div class="grid-col-3"> 做 CSS Grid 布局列；<code><div aria-live="polite"> 做 JS 动态内容更新区
<li>❌ 滥用：<code><div class="product-section"> —— 类名带 “section” 不代表它该是 <code><section></section>，得看内容有没有独立主题和标题
section 和 div 都能加 class、设样式、绑事件，功能完全等价
别被“HTML5 新标签”误导：<section></section> 不提供额外 API，不支持新 CSS 伪类，不改变盒模型。它和 <div> 在 DOM 操作、CSS 选择器、JS 查询（<code>document.querySelector('section')）上行为一致。
真正区别只在「信号」：一个告诉浏览器“这是个有主题的逻辑块”，另一个什么也不说。
- SEO 影响：Google 会用
<section></section>+ 标题组合识别内容主干，但不会因此给排名加权；乱用反而稀释关键区块权重 - 可访问性影响：NVDA、VoiceOver 等读屏器会把
<section></section>当作可跳转章节，用户按Ctrl+Alt+1（Windows NVDA）可快速定位到<h2></h2>对应的<section></section> - 代码维护提示：
<section></section>出现在组件中，意味着这个区块理论上可被抽取复用（比如 RSS 输出、CMS 内容块导出）
页脚、导航、轮播控件这些地方别硬套 section
很多开发者看到“区域划分”就条件反射用 <section></section>，结果把 <footer></footer>、<nav></nav>、<aside></aside> 这些更精准的语义标签覆盖掉，或者把纯交互容器也塞进 <section></section>。
典型反例：<section><footer>© 2026 ...</footer></section> —— <footer></footer> 本身已有明确语义，再包一层 <section></section> 反而模糊了结构。
- ✅ 优先用专用语义标签：
<header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside>、<footer></footer> - ✅ 纯样式/交互容器：用
<div>，哪怕它在视觉上看起来像“一节” <li>⚠️ 容易被忽略的点：一个页面里 <code><section></section>不是越多越好，它应该对应真实的内容分节逻辑（如“客户评价”“技术参数”“服务流程”），而不是视觉分隔线数量
