必须含语义标题（如至），否则被视为空章节，损害SEO与可访问性；无语义，仅作布局或交互容器，二者功能等价但语义迥异。

section 必须带标题，否则语义失效

浏览器和读屏器不认空

—— 它不是“高级 div”，而是“有主题的章节”。没

到

的

会被解析为无意义区块，甚至干扰页面大纲（outline），导致 SEO 权重分散或屏幕阅读器报“空章节”。

常见错误现象：

或

...

，里面没标题，纯当样式容器用。

• ✅ 正确写法：必须含语义标题，哪怕视觉上隐藏：

  推荐商品

  ...
• ❌ 错误写法：
  ...
  （轮播控制区无主题，也不该有标题）
• 标题层级要合理：嵌套
  时，子
  应用
  或更低，不能全用

div 是无语义容器，适合布局和交互钩子

不传递任何内容含义，只说“我这儿划了个框”。它对搜索引擎、读屏器、代码审查工具来说等于透明——它们只看你加的 class、id 或 ARIA 属性。

使用场景明确：

、

、

这类纯功能/样式/脚本绑定容器，

就是唯一合理选择。

• ✅ 推荐：
  做 CSS Grid 布局列；

  做 JS 动态内容更新区
• ❌ 滥用：
  —— 类名带 “section” 不代表它该是

  ，得看内容有没有独立主题和标题
• 性能无差异：两者渲染开销一致，选哪个不影响页面速度，只影响结构可理解性

section 和 div 都能加 class、设样式、绑事件，功能完全等价

别被“HTML5 新标签”误导：

不提供额外 API，不支持新 CSS 伪类，不改变盒模型。它和
在 DOM 操作、CSS 选择器、JS 查询（document.querySelector('section')）上行为一致。
真正区别只在「信号」：一个告诉浏览器“这是个有主题的逻辑块”，另一个什么也不说。

HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• SEO 影响：Google 会用
  + 标题组合识别内容主干，但不会因此给排名加权；乱用反而稀释关键区块权重
• 可访问性影响：NVDA、VoiceOver 等读屏器会把
  当作可跳转章节，用户按 Ctrl+Alt+1（Windows NVDA）可快速定位到
  对应的
• 代码维护提示：
  出现在组件中，意味着这个区块理论上可被抽取复用（比如 RSS 输出、CMS 内容块导出）
页脚、导航、轮播控件这些地方别硬套 section
很多开发者看到“区域划分”就条件反射用
，结果把
、
、
这些更精准的语义标签覆盖掉，或者把纯交互容器也塞进
。
典型反例：
© 2026 ...
——
本身已有明确语义，再包一层
反而模糊了结构。
• ✅ 优先用专用语义标签：
  、
  、
  、
  、
  、
• ✅ 纯样式/交互容器：用
  ，哪怕它在视觉上看起来像“一节”
• ⚠️ 容易被忽略的点：一个页面里
  不是越多越好，它应该对应真实的内容分节逻辑（如“客户评价”“技术参数”“服务流程”），而不是视觉分隔线数量