<think>我们参考了用户提供的引用内容，其中引用[
1]提到
HTML5新增的
语义化标签是为了让代码更易读，提升无障碍访问和SEO效果，并提到W
3C调查显示使用
语义化标签的网站在搜索引擎排名平均提升
17%。引用[2]详细介绍了部分
标签，如`<section>`和`<article>`的区别：`<article>`用于独立完整的内容，`<section>`用于对主题相关的内容分组，并举例说明它们可以相互嵌套，以及当内容组没有联系时使用`<div>`。
用户的问题：想了解
HTML5新增的
语义化标签及其使用场景，具体是哪些
标签以及在什么场景下使用。
根据
HTML5标准，我们列出主要
新增的
语义化标签，并说明使用场景：
1. **结构型
标签**（用于页面布局）：
- `<header>`：页面或内容区块的页眉，通常包含标题、导航等。
- `<footer>`：页面或内容区块的页脚，通常包含版权信息、联系方式等。
- `<nav>`：导航链接的容器，如菜单、目录等。
- `<main>`：页面主要内容，一个页面只能有一个。
- `<article>`：独立的内容块，如博客文章、新闻、评论等，可独立于上下文被复用或分发。
- `<section>`：主题性内容分组，通常包含一个标题。例如，一本书的章节、一个主题下的多个段落。
- `<aside>`：与周围内容相关但不是主要内容的部分，如侧边栏、广告、引用等。
2. **内容分组
标签**：
- `<figure>`：包裹媒体内容（如图像、图表、代码）及其标题`<figcaption>`。
- `<figcaption>`：为`<figure>`元素定义标题。
3. **文本级
语义标签**：
- `<mark>`：突出显示文本（如高亮关键词）。
- `<time>`：表示日期或时间，机器可读格式（如`<time datetime="202
3-
10-0
1">`）。
- `<meter>`：表示度量衡（如磁盘使用量、投票结果）。
- `<progress>`：表示任务进度（如下载进度）。
使用场景选择建议：
- 使用`<article>`的场景：当内容本身是独立的、可重复使用的，例如：
- 一篇博客文章
- 一则新闻
- 用户评论
- 论坛帖子
- 使用`<section>`的场景：将内容按主题分组，但每个分组不是完全独立的，例如：
- 文章中的章节
- 一个页面中的不同主题区域（如“产品特点”、“用户评价”）
- 注意：如果内容独立则用`<article>`，如果只是样式分组则用`<div>`
- 嵌套关系：
- 一个`<article>`内部可以包含多个`<section>`（如文章中的章节）。
- 一个`<section>`内部可以包含多个`<article>`（如一个新闻列表页面，每个新闻是`<article>`，整个列表区域是`<section>`）。
- 其他
标签使用场景：
- `<header>`/`<footer>`：不仅用于整个页面，也可用于`<article>`或`<section>`内部。
- `<nav>`：用于主要导航，通常放在`<header>`内，但也可独立。
- `<aside>`：用于与主要内容相关但非核心的内容，如侧边栏、广告、相关链接等。
最佳实践：
1. 不要滥用
语义标签：如果仅为了样式而包裹内容，且没有
语义含义，则使用`<div>`。
2. 确保可访问性：
语义化标签本身有助于屏幕阅读器理解页面结构，因此应正确使用。
3. 避免将`<section>`作为样式容器，它应当有标题（如`<h2>`）来表明主题。
示例代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>
语义化标签示例</title>
</head>
<body>
<header>
<h
1>网站标题</h
1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>一篇关于
HTML5的文章</h2>
<section>
<h
3>
HTML5简介</h
3>
<p>...</p>
</section>
<section>
<h
3>
语义化标签</h
3>
<p>...</p>
<figure>
<img src="semantic-tags.png" alt="
语义化标签结构图">
<figcaption>图
1:
HTML5语义化标签结构</figcaption>
</figure>
</section>
</article>
<aside>
<h
3>相关阅读</h
3>
<ul>
<li><a href="#">链接
1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 202
3 版权所有</p>
</footer>
</body>
</
html>
```
总结：
HTML5语义化标签通过提供有意义的
标签名，使代码结构更清晰，提升可访问性和SEO效果。使用时应根据内容的意义选择
标签，并注意嵌套关系[^
1][^2]。
§§相关问题§§
1. 如何正确嵌套
HTML5语义化标签（如`<article>`和`<section>`）？
2. 使用
语义化标签对网站SEO有哪些具体影响？
3. 在旧版浏览器中如何兼容
HTML5语义化标签？
4. 除了结构
标签，
HTML5还
新增了哪些功能特性？</think>###
HTML5 新增语义化标签及其使用场景
HTML5 引入了多种
语义化标签，使开发者能更精确地描述内容结构，提升代码可读性、可访问性和 SEO 效果。以下是核心
标签及其使用场景：
#### 一、结构型
语义标签
1. **`<header>`**
**作用**：定义页面或内容区块的页眉
**使用场景**：
- 页面顶部（包含 Logo、导航栏）
- 文章/章节的标题区域（包含标题和发布日期）
```
html
<header>
<h
1>网站标题</h
1>
<nav>...</nav>
</header>
```
2. **`<footer>`**
**作用**：定义页面或内容区块的页脚
**使用场景**：
- 页面底部（版权信息、联系方式）
- 文章末尾（作者信息、相关链接）
```
html
<footer>
<p>© 202
3 公司名称</p>
<a href="#">隐私政策</a>
</footer>
```
3. **`<nav>`**
**作用**：定义导航链接集合
**使用场景**：
- 主导航菜单
- 侧边栏目录
- 页内快速跳转链接组
```
html
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
</ul>
</nav>
```
4. **`<main>`**
**作用**：定义页面核心内容（一个页面仅一个）
**使用场景**：
- 包裹页面唯一主要内容区块
- 避免包含重复内容（如导航栏）
```
html
<main>
<h2>产品介绍</h2>
<p>核心内容描述...</p>
</main>
```
---
#### 二、内容分组
标签
5. **`<article>`**
**作用**：定义独立完整的内容块
**使用场景**：
- 博客文章/新闻条目
- 论坛帖子/用户评论
- 可独立分发的内容（如 RSS 订阅项）
```
html
<article>
<h
3>如何学习
HTML5</h
3>
<p>详细教程内容...</p>
</article>
```
6. **`<section>`**
**作用**：对主题相关内容分组
**使用场景**：
- 文章中的章节（如 "第一章"）
- 产品页的功能介绍区块
- 与 `<article>` 嵌套使用（如文章内的章节）[^2]
```
html
<section id="chapter
1">
<h2>
HTML5 基础语法</h2>
<p>
标签使用规范...</p>
</section>
```
7. **`<aside>`**
**作用**：定义与主内容间接相关的补充内容
**使用场景**：
- 侧边栏（相关文章、广告）
- 文章内的注解或引用
- 主内容区的附加说明
```
html
<aside>
<h
3>相关阅读</h
3>
<ul>...</ul>
</aside>
```
---
#### 三、媒体与数据
标签
8. **`<figure>` 与 `<figcaption>`**
**作用**：包裹媒体内容及其标题
**使用场景**：
- 图片/图表/代码段的说明
- 视频/音频的配套描述
```
html
<figure>
<img src="chart.png" alt="销售数据">
<figcaption>图
1：202
3年季度销售额</figcaption>
</figure>
```
9. **`<time>`**
**作用**：定义机器可读的日期/时间
**使用场景**：
- 新闻发布日期
- 活动日程表
- 博客发布时间戳
```
html
<p>发布于 <time datetime="202
3-
10-0
5">
10月
5日</time></p>
```
10. **`<mark>`**
**作用**：高亮标记关键文本
**使用场景**：
- 搜索结果的关键词高亮
- 文档中的重要提示
```
html
<p>这是<mark>
语义化标签</mark>的核心价值</p>
```
---
### 选择使用场景的原则
1. **内容独立性优先**
- 独立完整内容 → **`<article>`**（如单篇新闻）
- 主题相关分组 → **`<section>`**（如新闻列表的分类区块）
- 无明确
语义 → **`<div>`**
2. **嵌套关系**
- `<article>` 可包含多个 `<section>`（如文章包含多个章节）
- `<section>` 可包含多个 `<article>`（如分类板块包含多篇文章）[^2]
3. **SEO 与可访问性**
- 屏幕阅读器依赖
语义标签导航
- 搜索引擎对 `<article>`/`<section>` 内容赋予更高权重[^
1]
4. **避免滥用**
- 不要用 `<section>` 替代样式容器（应用 `<div>`）
- `<header>`/`<footer>` 不限于页面顶部/底部，可在任意区块使用
> 研究显示：使用
语义化标签的网站在搜索引擎排名平均提升
17%[^
1]
本文探讨了HTML5中新增的语义化标签，强调了它们在网页设计中的重要作用，尤其是在改善搜索引擎优化和移动设备体验方面。文章还提到了为确保在IE9等旧浏览器中的兼容性，需将这些元素设置为块级元素。
xi'hau'u
扫一扫
3958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
