如何划分文档中具有相同主题的功能区块_SECTION标签组织结构-html教程-PHP中文网

必须含且仅含一个h2–h6标题，用于逻辑自洽、可命名、可锚点跳转的内容块；否则应使用或其他语义化标签。

如何划分文档中具有相同主题的功能区块_section标签组织结构

没标题的 `<section></section>` 就是废标签

浏览器不会报错，但语义链彻底断裂：屏幕阅读器跳过、Lighthouse 报 heading-level 错误、SEO 提取不到主题意图。它渲染出来和 <div> 一模一样，只是多敲了 17 个字符。 <ul> <li> <code><section></section> 必须含且仅含一个 <h2></h2>–<h6></h6>（不能是 <h1></h1>，也不能多个）

标题可以视觉隐藏，比如 <h3 class="visually-hidden">客户案例</h3>，但元素必须存在

如果内容只有一句话+按钮，比如

<p>点击下载 SDK</p>
<button>下载</button>

，别硬套 <section></section>——那是

<div class="cta-block"> 的活


<h3>
<code><section></section>

和

<div> 到底怎么选

<p>不看样式、不看嵌套深度，只问一句：这块内容删掉后，剩下部分是否仍逻辑自洽？它能不能被别人单独链接或引用？</p>

<ul>
<li>能起名字、进大纲、被锚点跳转 → 用 <code><section></section>

：<section id="deployment"><h2>部署流程</h2>...</section>

只为加 margin / 触发动画 / 给 JS 找个钩子 → 用

<div>：<code><div class="card-grid js-lazy-load">
<li>已有更具体语义标签 → 优先用它们：<code><nav></nav>

、<aside></aside>、<footer></footer> 都不该被 <section></section> 包裹

嵌套 `<section></section>` 时标题层级必须递进

父级用 <h2></h2>，子级就得用 <h3></h3>；全用 <h2></h2> 会让文档大纲扁平化，浏览器自动生成的结构树里看不出从属关系。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

正确：<section><h2>核心功能</h2> <section><h3>实时同步</h3></section></section>
错误：<section><h2>核心功能</h2> <section><h2>实时同步</h2></section></section>
同级多个 <section></section> 应逻辑并列，比如「技术原理」「代码示例」「测试验证」，不是「步骤1→步骤2→步骤3」这种线性流程（后者更适合用 <ol></ol>）