freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md

---
id: 587d774d367417b2b2512a9e
title: 使用标题显示内容的层次关系
challengeType: 0
videoUrl: 'https://scrimba.com/c/cqVEktm'
forumTopicId: 301026
---

# --description--

标题标签（包括`h1`到`h6`）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为更快地了解页面内容，可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化，不应仅仅为了获得不同字号而使用不同级别的标题标签。

*语义化*：标签名能准确地表达它所含内容的信息类型。

对于一篇含有引言、正文、结论的论文，把结论作为引言的一部分没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。

在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。

举个例子：一个`h2`标签后紧跟若干`h4`标签的页面，会让使用屏幕阅读器的用户感到困惑。尽管在页面中，使用这 6 个标题标签可以控制内容的的视觉样式，但我们应该使用 CSS 来调整。

最后一点，每个页面应该只有一个`h1`标签，用来说明页面主要内容。`h1`标签和其他的标题标签可以让搜索引擎获取页面的大纲。

# --instructions--

Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的`h5`标题标签调整为恰当的级别（即`h3`标题标签），使它们是`h2`标题标签的子级。

# --hints--

你的代码应该包含 6 个`h3`标签。

```js
assert($('h3').length === 6);
```

你的代码不应包含 `h5` 标签。

```js
assert((code.match(/\/h3/g) || []).length === 6);
```

代码不应该包含 `h5` 标记.

```js
assert($('h5').length === 0);
```

代码不应该包含 `h5` 结束标记。

```js
assert(/\/h5/.test(code) === false);
```

# --solutions--