section 必须含 h2–h6 标题才具语义，否则等同 div；div 明示“无语义”，适用于布局、js 钩子等；错误嵌套或标题层级混乱会破坏可访问性与 seo。
别纠结“哪个更现代”，section 和 div 功能完全一样，选错只会影响 SEO、屏幕阅读器识别和团队协作理解——关键看这块内容有没有标题、能不能被一句话概括。
没标题的 section 就是废标签
W3C 明确建议每个 section 必须含 h2–h6 标题，否则它在语义上等同于 div，但多占一个标签、误导维护者、触发 Lighthouse 可访问性警告。
- 错误写法：
<section><p>加载中...</p> <div class="spinner"></div></section>—— 没主题、没标题，纯 UI 容器 - 正确写法：
<section><h3>用户反馈</h3> <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>—— 有明确主题，标题在内部即可（不强制紧贴开头） - 视觉隐藏标题也合法：
<h3 class="visually-hidden">推荐商品</h3>，只要 DOM 中存在且可被辅助技术读取
用 div 的典型场景：纯布局、JS 钩子、无主题 UI
div 不是过时标签，而是唯一一个**明示“此处无语义”** 的容器。它的价值恰恰在于“不说话”。
- CSS Grid/Flex 直接父容器：
<div class="grid-container"> —— 排版需要，无关内容结构<li>模态框外层：<code><div id="modal-overlay"> 或 <code><div data-js="chart-root"> —— JS 操作锚点，无需语义<li>轮播图控制按钮、下拉菜单、SVG 包裹层 —— 这些是交互组件，不是文档章节</li> <li>类名带 <code>section也不代表该用section标签，比如<div class="product-section"> 仍是合法的 <code>div嵌套
section很容易踩坑浏览器大纲视图和读屏器会把每个
section当作独立层级节点。嵌套过深或标题层级错乱，会导致语义结构断裂。- 禁止全用
h1：<section><h1>产品介绍</h1> <section><h1>核心功能</h1></section></section>—— 子section应用h2或更低 - 避免三层及以上嵌套：
<section><section><section></section></section></section>—— 大概率说明你该用article或重构逻辑分组 - 页脚、导航栏、侧边栏整块不用
section—— 它们有更合适的语义标签：<footer></footer>、<nav></nav>、<aside></aside>
最常被忽略的一点：你改一个
section标签，可能不会让页面看起来有任何变化，但会立刻影响 Lighthouse 的可访问性评分、NVDA 的导航节点列表、甚至 Google 抓取时对主次内容的权重分配——语义不是“锦上添花”，是结构基础设施的一部分。 - 禁止全用
