70. section 标签

<section> 定义文档中的一个主题分区。通常有一个标题。

section 的典型用法

<section>
  <h2>关于我们</h2>
  <p>我们是一支专注于前端技术的团队...</p>
</section>

<section>
  <h2>服务项目</h2>
  <ul>
    <li>网页开发</li>
    <li>移动应用</li>
    <li>技术咨询</li>
  </ul>
</section>

<section>
  <h2>联系方式</h2>
  <p>邮箱：contact@example.com</p>
</section>

每个 section 是一个主题块，有自己的标题。

section 和 article 的核心区别

对比	section	article
含义	主题分组	独立内容
独立性	内容之间有关联	抽走也能独立存在
标题	通常有	通常有
类比	书的一个章节	报纸的一篇报道

简单判断：

• 内容能独立分发（RSS、分享链接）→ article
• 内容只是页面的一部分，需要上下文 → section

section 包裹 article

常见模式：一个 section 包含多个 article。

<section>
  <h2>最新资讯</h2>

  <article>
    <h3>新闻标题 1</h3>
    <p>内容...</p>
  </article>

  <article>
    <h3>新闻标题 2</h3>
    <p>内容...</p>
  </article>
</section>

section 给一组 article 一个共同的标题。

article 包裹 section

反过来也可以：一篇文章里有多个章节。

<article>
  <h1>CSS 完全指南</h1>

  <section>
    <h2>第一章：选择器</h2>
    <p>选择器是 CSS 的基础...</p>
  </section>

  <section>
    <h2>第二章：盒模型</h2>
    <p>每个元素都是一个盒子...</p>
  </section>
</article>

不要当 div 用

section 不是有语义的 div。如果只是为了样式分组，用 div。

<!-- 不好：纯样式分组 -->
<section class="wrapper">
  <div>内容</div>
</section>

<!-- 好：用 div 做样式分组 -->
<div class="wrapper">
  <div>内容</div>
</div>

<!-- 好：有主题内容的用 section -->
<section>
  <h2>功能介绍</h2>
  <p>本产品具有以下功能...</p>
</section>

完整示例

<main>
  <article>
    <h1>HTML5 语义化完全指南</h1>

    <section>
      <h2>什么是语义化</h2>
      <p>语义化就是让标签表达含义...</p>
    </section>

    <section>
      <h2>常用语义标签</h2>
      <p>header、nav、main、article...</p>
    </section>

    <section>
      <h2>语义化的好处</h2>
      <p>SEO、可访问性、代码可读性...</p>
    </section>
  </article>
</main>

一篇文章，三个章节。每个 section 有标题，结构清晰。