HTML Academy · 课时

section 元素与 div 的区别

了解何时使用 section，何时使用普通 div

section 元素与 div 的区别 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

分区元素

<section> 元素将相关内容组合成一个主题分区：

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

分区元素与通用容器

关键问题是：这个分组是否具有可以命名的主题或用途？

<section> —— 有；它表示一个主题分组，并且应该有标题
<div> —— 没有；它只是用于样式或脚本的容器

分区元素需要标题

每个 <section> 都应该有标题（<h2>-<h6>）：

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

何时使用分区元素

以下内容适合使用 <section>：

文档的章节
向导中的标签页或步骤
长篇文章的各个部分（简介、方法、结果）
首页的营销分区（功能、定价、用户评价）

何时使用通用容器

当您只需要一个供 CSS 或 JavaScript 使用、且没有语义含义的容器时，请使用 <div>：

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

长篇文章中的分区

使用分区在文章内部创建章节：

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

首页分区

使用分区构建结构清晰的首页：

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

分区元素创建标题上下文

在 HTML5 文档大纲算法中，分区会创建新的标题上下文：

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

用于分区的标题关联属性

将分区与其标题关联起来，以便屏幕阅读器识别：

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

决策流程图

应该使用哪种容器元素？

主要导航？→ <nav>
页面的主要内容？→ <main>
自包含的内容？→ <article>
带有标题的主题分组？→ <section>
侧边栏或相关内容？→ <aside>
只是用于样式的容器？→ <div>

没有标题的分区：使用通用容器

如果无法为分区提供标题，请改用通用容器：

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

快速检查

什么时候应该优先使用通用容器而不是分区元素？

回顾：分区元素与通用容器

分区元素与通用容器的要点：

<section> —— 主题分组，应该有标题
<div> —— 用于样式或脚本、没有语义的中性容器
分区会为屏幕阅读器导航创建一个有名称的地标区域
添加 aria-labelledby，将分区与其标题关联起来
如果不确定，请使用通用容器；以后随时可以改为分区

常见问题解答

「section 元素与 div 的区别」课时是免费的吗？

是的 — 「section 元素与 div 的区别」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「section 元素与 div 的区别」这节课中我会学到什么？

了解何时使用 section，何时使用普通 div 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「section 元素与 div 的区别」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy