本节书摘来自异步社区《HTML5开发手册》一书中的第1章,第1.10节,作者: 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.10 中级“菜谱”:使用HTML5大纲工具验证结构
利用前面讲到的新元素,我们现在可以使页面内容更加连贯,更有逻辑,并允许人们使用这种层次结构(比如使用屏幕阅读器)来浏览我们的内容,获得与浏览目录一样便捷的体验。对大纲进行测试可以帮助检查是否正确地使用了标题和section。有很多的浏览器插件和网站应用可供你选择。
下载并安装后,在地址栏可以看到如图1.11所示的图标。
点击图标会显示类似目录的数据,其中内容通常是缩进的。
如果内容安排合理,显示的将是结构整齐、有逻辑的目录。如果看到有“Untitled section/article”,这通常代表使用了错误的标记,需要重新检查所使用的标记。需要注意的是,nav和aside标记中出现的“Untitled article”无需计较。
正确的大纲与下面类似:
1.网站名
a.博客
i.文章题目
ii.文章题目
b.关于我
i.我的名字
ii.我喜欢的东西
iii.我讨厌的东西
c.联系我
图1.12所示为某个文档大纲的示例,缩进是正确的,而且没有“Untitled Section”(nav中的无需考虑)。
在此“菜谱”中建立的页面的大纲如下所示:
1.Loads of News
a.Bring you all kinds of news!
b.Untitled NAV
c.Sports News
d.Entertainment News!
e.Nerdy News
代码1.12所示为该页面的源代码。
代码1.12 创建一个基本的文档大纲
在页面顶端有一个header元素,在大纲中用作第一个节点(而不是页面标题),然后是各自包含标题的section元素。header元素中还有一个内容为“Bringing you all kinds of news!”的hgroup元素,但是大纲中并没有出现h2元素。这是因为大纲只读取元素中的第一个标题(h1~h6)。
section、article、nav和aside元素在大纲中显示的时候会有缩进。section包含了h1,所以在大纲中正常显示。也可以使用其他标题标记(h2或h3)替换。如果某个section中有内容而没有标题,那么大纲会显示“Untitled Section”,你需要避免这种情况。