HTML 的 ＜section＞ 元素

1. 什么是 <section> 元素

<section> 是 HTML5 引入的语义化标签，用于表示文档中一个独立的、主题相关的内容区块。它通常包含一个标题（<h1> 到 <h6>），用来概括该区块的主题。

<section>
  <h2>公司简介</h2>
  <p>我们是一家专注于 Web 技术的公司......</p>
</section>

2. 为什么使用 <section>

使用 <section> 而不是一堆无意义的 <div>，主要有以下好处：

• 语义清晰：让浏览器、搜索引擎和辅助技术（如屏幕阅读器）理解页面结构。
• 可访问性提升：帮助视障用户通过标题导航快速跳转到感兴趣的内容区块。
• SEO 友好：搜索引擎能更准确地抓取和索引页面内容。
• 代码可维护性：结构一目了然，便于团队协作和后期维护。

3. <section> 与 <div> 的区别

元素	语义	适用场景
<div>	无语义，纯粹用于样式或布局分组	包裹一组元素以便统一设置样式
<section>	有语义，表示一个主题相关的独立区块	文章章节、产品介绍、新闻条目等

<!-- 不推荐：用 div 包裹所有内容 -->
<div class="news">
  <h2>最新动态</h2>
  <p>......</p>
</div>

<!-- 推荐：用 section 表达语义 -->
<section class="news">
  <h2>最新动态</h2>
  <p>......</p>
</section>

4. <section> 与 <article> 的区分

<article> 表示一个独立、可完整分发 的内容单元（如一篇博客、一条新闻），而 <section> 表示文档内部 的一个主题分区。一个 <article> 内部可以包含多个 <section>。

<article>
  <h1>如何学习 HTML5</h1>
  <section>
    <h2>基础语法</h2>
    <p>......</p>
  </section>
  <section>
    <h2>进阶技巧</h2>
    <p>......</p>
  </section>
</article>

5. 使用 <section> 的注意事项

• 尽量包含标题 ：每个 <section> 最好有一个标题，否则语义不完整。
• 不要滥用 ：如果只是为了样式分组，应使用 <div>；如果内容可独立分发，应使用 <article>。
• 不要嵌套过深：避免无意义的深层嵌套，保持结构扁平清晰。
• 配合标题层级 ：注意 <h1> 到 <h6> 的层级顺序，不要跳级。

6. 实际案例：一个简单的页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>产品官网</title>
</head>
<body>
  <header>
    <h1>我的产品</h1>
  </header>

  <main>
    <section>
      <h2>产品特性</h2>
      <p>这里介绍产品的核心特性......</p>
    </section>

    <section>
      <h2>用户评价</h2>
      <p>这里展示用户的真实反馈......</p>
    </section>
  </main>

  <footer>
    <p>版权所有 © 2026</p>
  </footer>
</body>
</html>

7. 总结

<section> 是 HTML5 语义化布局的重要元素，它让页面结构更清晰、更易访问、更利于 SEO。使用时注意与 <div>、<article> 的区分，并尽量为每个 <section> 配备标题，就能写出结构良好的语义化页面。