90% 的开发人员都不知道 section 标签与 div 标签的区别

前端小目标

于 2024-03-30 08:30:00 发布

阅读量1.4k

点赞数 11

分类专栏： # HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_30094821/article/details/137153976

版权

HTML 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

就像一本书需要清晰的章节来组织内容一样，网页也需要合适的结构来呈现文本和其他元素。

<section> 标签正是这样一个工具，它帮助我们将网页内容分割成有意义的段落和区块，优化用户阅读体验和页面的整体结构。

1. 基础语法

什么是 section 标签

<section> 标签是 HTML5 中引入的一个语义化标签，用于表示文档中的一个独立区段。

这个区段通常包含一组内容和对应的标题，比如章节、页眉、页脚或页面中的其他独立部分。

为何要使用 section 标签

使用 <section> 标签的主要目的是为了提高网页的语义化，使得内容的结构更加清晰。

不仅有助于读者更好地理解页面内容，也让搜索引擎更容易理解网页结构，从而有助于 SEO（搜索引擎优化）。

如何使用 section 标签

只需要将相关内容包裹在 <section> 和 </section> 之间即可。

通常，每个 <section> 都应该包含一个标题（如 <h1> 到 <h6>），这样有助于定义区段的主题。

适用场景

<section> 标签适用于划分页面中的不同内容区域，比如文章的不同章节、论坛的不同讨论主题、产品页面的不同特性介绍等。

任何你希望在逻辑上独立出来的内容，都可以使用 <section> 来组织。

section 标签与 div 标签的区别

1. 语义化

<section> 是一个语义化标签，它表示文档中的一个独立区段，通常用于页面的一个章节、一组内容或者页面中的一个功能区。每个 <section> 应该包含它的标题，并围绕一个主题将内容组织起来。

<div> 是一个非语义化的容器标签，用于布局的分块，没有具体的意义。它仅仅代表一个容器，用于 CSS 布局或者作为 JavaScript 操作的钩子。

2. SEO优化

<section> 是语义化标签，它能够帮助搜索引擎理解页面内容的结构和组织，从而可能提高页面在搜索结果中的排名。

<div> 标签对搜索引擎优化（SEO）没有直接的帮助，因为它不提供有关内容的额外信息。

3. 访问性

<section> 标签的使用有助于提高页面的可访问性，因为它可以被屏幕阅读器用来理解页面结构，并提供给视障用户更好的导航。

<div> 标签不具备这样的语义化特征，因此它对于辅助设备并没有额外的帮助。

4. 使用场景

<section> 适用于对网页内容进行逻辑上的划分，比如文章的不同章节、论坛的不同讨论主题等。

<div> 通常用于布局目的，比如创建一个侧边栏、一个内容块或其他不需要特定语义的页面元素。

2. 示例演示

以下是一个简单的 <section> 标签使用示例，展示了如何用它来构建一个包含多个章节的文章。

<!DOCTYPE html>
<html>
<head>
<title>使用Section标签</title>
</head>
<body>

<header>
  <h1>网页设计入门</h1>
</header>

<section>
  <h2>第一章：HTML基础</h2>
  <p>HTML是构建网页内容的基石...</p>
</section>

<section>
  <h2>第二章：CSS样式</h2>
  <p>CSS用于设置网页的视觉效果...</p>
</section>

<section>
  <h2>第三章：JavaScript交互</h2>
  <p>JavaScript让网页可以响应用户的操作...</p>
</section>

</body>
</html>

在这个示例中，使用了 3 个 <section> 标签来分别标记文章的 3 个章节，每个 <section> 都包含一个标题和一段描述性文本。

这样的结构使得文章内容清晰、有序，便于用户阅读和理解。