内容分区标签 - <section>

什么是 <section> 标签？

<section> 是HTML5引入的语义化标签，用于定义文档中的一个独立内容区块。它通常包含一个主题性的标题和相关内容，代表文档的一个逻辑部分。

基本语法

<section>
  <h2>区块标题</h2>
  <!-- 区块内容 -->
</section>

典型用法

页面内容分区

<main>
  <section>
    <h2>关于我们</h2>
    <p>公司介绍...</p>
  </section>
  
  <section>
    <h2>我们的服务</h2>
    <p>服务内容...</p>
  </section>
  
  <section>
    <h2>联系方式</h2>
    <p>联系信息...</p>
  </section>
</main>

文章章节

<article>
  <h2>文章标题</h2>
  
  <section>
    <h3>引言</h3>
    <p>引言内容...</p>
  </section>
  
  <section>
    <h3>主体部分</h3>
    <p>主体内容...</p>
  </section>
  
  <section>
    <h3>结论</h3>
    <p>结论内容...</p>
  </section>
</article>

功能模块

<section>
  <h2>产品特性</h2>
  <div class="feature">特性1</div>
  <div class="feature">特性2</div>
  <div class="feature">特性3</div>
</section>

与其他标签的区别

<section> vs <div>

• <section> 是语义化标签，代表有意义的内容区块
• <div> 是无语义的容器，主要用于布局和样式

<section> vs <article>

• <section> 代表文档的一个逻辑部分，通常需要上下文理解
• <article> 代表独立的、自包含的内容，可以单独存在

全局属性

<section> 标签支持所有HTML全局属性：

最佳实践

1. 主题性内容：只对有明确主题的内容使用 <section> 标签

2. 包含标题：每个 <section> 应该包含一个标题，增强内容结构

3. 避免不必要使用：不要为了样式而使用 <section>，应该使用 <div>

4. 合理嵌套：可以根据需要嵌套使用 <section> 标签，创建层级结构

浏览器兼容性

• Chrome 5+
• Firefox 4+
• Safari 5+
• Opera 11.1+
• IE 9+

总结

<section> 标签是HTML5语义化标签的重要组成部分，它提供了文档的逻辑分区，有助于：

• 提高文档的结构化程度，增强可读性
• 改善搜索引擎优化，使搜索引擎更好地理解内容组织
• 增强可访问性，帮助辅助技术用户理解页面结构
• 使代码更具维护性，便于未来的开发和修改