简而言之,HTML5规范允许我们使用多个h1
元素.然而,关于这一特征存在相当大的争议,有2个主要声明为什么不使用它.
1.搜索引擎优化:主要是可疑的声称,搜索机器人不支持它,未经证实的声称它将"混淆"他们.但是,让我们将这种推测推迟到其他帖子.
2.用户代理不支持它:不幸的是,这背后的推理似乎不如SEO声明.
HTML5文档的章节和大纲的MDN文章包含以下警告:
重要提示:目前在图形浏览器或辅助技术用户代理中没有已知的轮廓算法实现,尽管该算法是在其他软件中实现的,例如一致性检查器.因此,不能依赖轮廓算法将文档结构传达给用户.建议作者使用标题等级(h1-h6)来传达文件结构.
但它不像使用新文档大纲结构的文档不起作用.为了亲自了解浏览器的反应,我创建了一些样本,这些样本可以在同一页面上使用多个独立文章.
HTML4:
Outline HTML4
Section List
Alpha
Alpha is the first letter of the greek alphabet.
Subheading
This is just filler.
Beta
Beta is the second letter of the greek alphabet.
Subheading
This is just filler.
HTML5:
Outline HTML5
Section List
Alpha
Alpha is the first letter of the greek alphabet.
Subheading
This is just filler.
Beta
Beta is the second letter of the greek alphabet.
Subheading
This is just filler.
唯一潜在的视觉问题,我看是,浏览器可能使所有的h1
标签相同的大小,但是默认用户代理样式Firefox和Chrome浏览器目前减小的尺寸h1
内标签article
,aside
,nav
,和section
标签(似乎指示浏览器确实识别此功能).另外,我们没有任何问题,识别第二个h2
标题意味着最后一个h2
部分的结尾,所以我认为没有任何理由我们会有多个h1
标签的视觉问题.
虽然我不能说出那些依赖于屏幕阅读器的人更喜欢浏览网页,但Apple的VoiceOver确实可以正确识别每个标题级别.
我的问题是,图形浏览器或辅助技术究竟需要做些什么才能"支持"他们尚未做过的大纲?