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> 配备标题，就能写出结构良好的语义化页面。
