必须含–才构成合法语义区块，否则被降级为普通流内容、大纲消失，lighthouse报错；明确无语义，适用于纯布局、样式分组或动态容器。
section 必须带 <h2></h2> 才算合法语义区块
浏览器和读屏软件不会把没标题的 <section></section> 当成独立章节——它会被降级为普通流内容，大纲里消失，Lighthouse 直接报“<section></section> missing heading”错误。W3C 明确要求每个 <section></section> 应含 <h1></h1>–<h6></h6>，不是“建议”，是语义成立的前提。
常见错误包括：
– 用 <section class="carousel-controls"></section> 包左右箭头（纯交互容器，无主题）
– 在页脚写 <section><p>© 2026</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>（应直接用 <footer></footer>）
– 嵌套 <section><section></section></section> 却只在外层有 <h2></h2>（内层缺失标题，语义断裂）
div 是唯一明确声明“此处无语义”的容器
它不参与文档大纲，不被读屏器识别为可跳转节点，也不影响 SEO 权重分配——这不是缺陷，是设计目的。当你只是加个背景色、设个 flex 容器、挂个 id="modal-root"，<div> 就是最诚实的选择。
<p>真实项目中高频使用场景：<br>– CSS Grid / Flex 布局的直接父容器（如 <code><div class="grid-container">）<br>– React/Vue 组件根节点（<code><div id="app"> 或 <code><div class="product-card">）<br>– 纯样式分组（<code><div class="btn-group">）<br>– 动态插入区域（<code><div id="toast-container">）
<h3>性能与渲染开销完全一致，但兼容性有硬边界</h3>
<p><code><section></section> 和 <div> 都是轻量标签，无默认 margin/padding，CSS 选择器行为相同，V8 和 Blink 渲染路径也无差异。所谓“性能对比”根本不存在。
<p>真正要注意的是兼容性断层：<br>– IE ≤ 8 完全不识别 <code><section></section>，JS 查不到、CSS 不生效、样式继承中断
– 若项目仍需支持旧 IE，必须用 document.createElement('section') + HTML5 Shiv，或直接回退到 <div role="region">
<br>– <code><div> 从 IE6 起就稳如磐石，无需任何 polyfill
<h3>DOM 查询漂移比你想象中更常见</h3>
<p>用 <code>document.querySelector('.sidebar') 本意是选侧边栏容器，但如果某天同事把 <div class="sidebar"> 改成 <code><section class="sidebar"></section>，而你 JS 里还有 el.parentElement.tagName === 'DIV' 这类判断，逻辑就崩了。
这类问题往往在重构后期才暴露：
– CSS 框架（如 Bootstrap）某些重置规则对 <section></section> 设了 margin-top，导致视觉错位
– 测试用例里 mock DOM 时 hardcode 了 <div>，实际跑起来匹配失败<br>– SSR 渲染后客户端 hydrate 阶段因标签不一致触发 Vue/React 警告
<p>语义标签的价值不在“看起来高级”，而在“让机器准确理解你的意图”。该用 <code><section></section> 的地方不用，结构就残缺；不该用却硬套，反而制造噪音。最常被忽略的点是：**标题不是装饰，是语义锚点——没有 <h2></h2> 的 <section></section>，等于没写。**
