2.1 KiB
2.1 KiB
id | title | challengeType | videoUrl | forumTopicId |
---|---|---|---|---|
587d774d367417b2b2512a9e | 使用标题显示内容的层次关系 | 0 | https://scrimba.com/c/cqVEktm | 301026 |
--description--
标题标签(包括h1
到h6
)有很高的使用率,它们用于描述内容的主题。在屏幕阅读器中,用户为更快地了解页面内容,可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化,不应仅仅为了获得不同字号而使用不同级别的标题标签。
语义化:标签名能准确地表达它所含内容的信息类型。
对于一篇含有引言、正文、结论的论文,把结论作为引言的一部分没有任何意义,因为结论应该是独立的章节。类似地,页面中的标题标签也应该是有序的,并且能表明内容的层次关系。
在使用中,相同级别(或者更高级别)的标题标签用于开启新的章节,低一级别的标题标签用于开启上一级标题标签的子小节。
举个例子:一个h2
标签后紧跟若干h4
标签的页面,会让使用屏幕阅读器的用户感到困惑。尽管在页面中,使用这 6 个标题标签可以控制内容的的视觉样式,但我们应该使用 CSS 来调整。
最后一点,每个页面应该只有一个h1
标签,用来说明页面主要内容。h1
标签和其他的标题标签可以让搜索引擎获取页面的大纲。
--instructions--
Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签,使它们语义化且顺序正确。你需要将所有的h5
标题标签调整为恰当的级别(即h3
标题标签),使它们是h2
标题标签的子级。
--hints--
你的代码应该包含 6 个h3
标签。
assert($('h3').length === 6);
你的代码不应包含 h5
标签。
assert((code.match(/\/h3/g) || []).length === 6);
代码不应该包含 h5
标记.
assert($('h5').length === 0);
代码不应该包含 h5
结束标记。
assert(/\/h5/.test(code) === false);