section是专指带标题（h1–h6）的独立主题内容区块，无标题则语义失效；它用于文档逻辑可命名、引用的一节，如“实验方法”，不可用于无主题容器或布局目的。

section不是“随便套的容器”，它专指文档中一个有独立主题的内容区块，必须自带标题（h1–h6），否则语义失效。

section的本质：带标题的主题段落

它代表文档逻辑上可被单独命名、引用或导航的一节内容。比如文章中的“背景介绍”“实验方法”“结果分析”，每节都应有明确标题——没有标题的

，屏幕阅读器和搜索引擎会视作语义缺失，等同于用

。

• ✅ 正确用法：<section><h2>用户反馈</h2> <p>…</p></section>
• ❌ 错误用法：<section><div class="card">…</div></section>（无标题、无主题）
• ⚠️ 注意：同一
  内多个

  不推荐；若需多级结构，优先嵌套

  或用

  等子级标题

section vs. div：关键区别在“是否承载主题”

div是纯样式/布局容器，无语义；section则声明“这里是一块有名字的内容”。浏览器大纲生成、无障碍导航、SEO结构化数据都依赖这个声明。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 用
  时，检查能否为它起一个准确的中文标题（如“产品特性”“常见问题”）——能，则合适；不能，则该用

  侧边栏、页脚、轮播图容器等无独立主题的区域，一律不用

  即使视觉上是卡片式布局，只要内容属于同一主题且有标题，仍可用

  ；反之，多个无关卡片拼在一起，应各自用

  或

  section与article、aside的协作关系

  它们不是替代关系，而是层级与角色分工：

  • <section></section>：宏观分块（如“技术方案”大节）
  • <article></article>：可独立传播的完整内容单元（如一篇博客、一条新闻）——可嵌套在
    内
  • <aside></aside>：与当前
    或

    相关但非核心的补充信息（如术语解释、作者简介）
  • 不要用
    包裹单个按钮或表单字段；这类原子级交互元素不属于“内容节”范畴

  实际开发中容易踩的坑

  语义错误往往源于“看起来像一块”就套标签，而忽略内容意图：

  • 首页轮播图区域加
    ？→ 错。轮播是UI控件，无主题性，用

    更准确

    商品列表页每个商品用

    ？→ 错。应使用

    （每个商品是独立内容）

    用

    替代CSS Grid容器？→ 错。布局任务交给CSS，HTML只负责表达内容结构

    所有页面顶部都写

    …

    ？→ 不必要。

    已隐含顶层主题，重复套section反而稀释语义

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！