section 必须包含 h1–h6 标题才具语义，否则等同于 div；标题须在 section 内部，子 section 也需独立递进标题；div 仅用于无语义布局；article 表示可独立分发内容，三者分工明确、不可互换。

section 必须带 <h1></h1> 到 <h6></h6> 才算有效语义

浏览器和读屏器不解析“空壳”<section></section>——没标题的 <section></section> 在语义层面等同于 <div>，只是多写了一个标签、多占一行 DOM 节点，还可能误导后续维护者。 <p>常见错误现象：</p> <ul> <li>用 <code><section></section> 包住纯 <p></p> + <button></button>，只为加个背景色或 margin

标题写在 <section></section> 外面，比如

<h2>关于我们</h2><section>...</section>

嵌套 <section> 时，子级没自己的 <code><h3></h3> 或更低级标题

正确做法：

• 标题必须在同一个 <section></section> 元素内部（位置不限，但不能跨标签）
• 子 <section></section> 也得有独立标题，层级建议递进（<h2></h2> → <h3></h3>）
• 可用 W3C HTML Validator 或浏览器 DevTools 的 “Accessibility” 面板验证结构树

div 是纯布局钩子，别硬塞语义

<div> 的唯一规范定义就是 “no special meaning at all”。它不是过时了，而是定位极清晰：只负责挂 <code>class、绑 id、当 Flex/Grid 容器、做 JS 操作靶点。

适合场景：

• <div class="sidebar"> —— 侧边栏布局容器 <li><code><div id="modal-overlay"> —— 模态框遮罩层 <li><code><div style="display: grid"> —— 纯样式驱动的网格项 <p>误用典型：</p> <ul><li>把整篇博客正文包进 <code><div class="article">，其实该用 <code><article></article>
• 为每个卡片加 <section></section> 却没标题，只因“看着像模块”

选错标签直接影响读屏器导航和 SEO 解析

搜索引擎和辅助技术靠标签语义理解内容关系，不是靠 class 名或 CSS 样式。

实测差异：

• NVDA / VoiceOver 朗读 <section><h2>服务介绍</h2>...</section> 会报：“section，服务介绍”；而同样结构换成 <div>，它直接跳到第一个 <code><p></p> 开始念，毫无上下文
• Google 的结构化数据工具可能忽略无标题的 <section></section>，导致“章节”不被识别为独立内容块

检查方法：

• Chrome DevTools → Elements 面板 → 右键节点 → “Show accessibility properties”
• 对比结构树中是否出现 “Section” 节点及其标题文本

article、section、div 三者分工不能混

它们不是替代关系，而是协作关系：

• <article></article>：内容可独立分发（如一篇博客、新闻稿），可包含多个 <section></section>
• <section></section>：页面中一个主题明确、有标题的逻辑区块（如“产品特色”、“客户评价”），必须依附于更大上下文
• <div>：不传达任何内容意图，只服务样式或脚本 <p>容易被忽略的一点：一个 <code><section></section> 内部完全可以再用 <div> 做布局，只要那层不需要语义。语义层级是嵌套的，不是互斥的。</div>