为什么在大多数用户代理默认样式表中,<h5>和<h6>的字体大小比<p>小?

35

在HTML5中,默认的<h5><h6>标题的字体大小分别为0.83em0.67em,而默认的<p>字体大小为1em。这意味着在包含<h5><h6><p>标签的文本块中,这些标题将比它们所在的文本更小:

Default font sizes from h1 to h6 in relation to paragraph font size

(默认正文字体大小为14px

这似乎是违反直觉的:标题应该吸引眼球,引导进入一个小节,并且字体大小是一个重要的视觉提示。那么为什么默认字体大小使得这些标题比它们下面的文本更小呢?


1
它们是默认值。我从未在一个大量使用默认值的网站上工作过,也从未关心过它们是什么。H标签可能会覆盖一小段文字,而且现在主要是为了SEO目的而重要。 - bryan60
3
在第五级标题中,你正在涉及一些相当不重要的内容。标题比段落文本小,这使它们以不同的方式突出。当然,正如@bryan60所说,它们是HTML提供的默认值。覆盖它们非常简单。我不会说它们仅用于SEO目的;屏幕阅读器和其他辅助功能经常使用标题。 - Heretic Monkey
2
@HereticMonkey,CSS和HTML都有设计师决定了合理的默认值。通常,这些讨论和决策也会在公共邮件列表上进行,特别是针对W3C工作。我认为向熟悉历史的专家社区提出这个问题是合理的。 - Sean
2
事实上,关于h5h6是否应该比¶文本更小,这是一个有争议的问题。但这不是这个问题所要问的。研究并呈现已被编码为浏览器默认设置的_W3C作者意见_的文档证据是一项事实研究的任务。这就是这个问题所要问的,而且这是一个有效的问题。 - Jacob Ford
2
@JacobFord 看起来这些不是“W3C作者的观点”,而是W3C样例试图描述浏览器已经在做什么。 - Bob
显示剩余2条评论
2个回答

43
我已经搜索了W3C邮件列表,但没有找到关于这个决定的任何辩论。
以下是我的推断:
1995年
HTML规范的第一个发布版本(在CSS出现之前)实际上指定h4h5应该是“正常字体”大小。对于h6的字体大小没有明确规定,但我认为它也是正常字体大小。
H3
         Italic, large font, slightly indented from the left
         margin. One or two blank lines above and below.
H4
         Bold, normal font, indented more than H3. One blank line
         above and below.
H5
         Italic, normal font, indented as H4. One blank line
         above.
H6
         Bold, indented same as normal text, more than H5. One
         blank line above.

1996

CSS进入了舞台。实际上,它是蹒跚着走进来的,然后爆发了。第一个推荐的默认浏览器样式表只指定了:

H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }

的字号为1em

1997

HTML 3.2取消了任何相对于文档文字的字体大小建议,只是建议

较重要的标题通常以比较小的字体呈现。

这与CSS1有些冲突,但两者当时并不是必不可少的。大多数样式仍然使用内联HTML属性完成,这些属性仍然没有被弃用。

1998

CSS2发布了,并从其自己的规范中删除了默认样式表,改为在HTML的规范中链接到HTML 4.0的示例样式表

至少就我所知,这就是明确设置标题小于1em的起源。 推荐的HTML 4.0样式表指定了大多数浏览器今天保持的默认值:

H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }

哇,真是一份伟大的努力!感谢你的研究。我会看看能找到什么,但希望最终参与决策的人能找到这个并给出明确的答案! - Sean
4
我已经做了更深入的调查,并追溯到(可能是)IE4.0pp2。我们不太可能找出IE获取其默认值的位置。 - Bob

18

哦,数字考古学!

事实证明,您可以将此追溯到Internet Explorer 3-4和Netscape Navigator 3-4的默认“样式”(不完全是CSS!)。 更具体地说,它们可能是从IE4pp2中提取的,但是在IE3中引入。 不幸的是,IE / Microsoft如何决定这些值已经消失在时间的沙漠中(至少公开如此 - 它可能在Microsoft内部电子邮件档案中可用...有没有人认识微软员工?)。

我尝试在下面重构链。


如Jacob所提到的,CSS2的最早草案于1997年11月发布,其中包括一个样式表示例,将h5定义为.83em,将h6定义为.67em。它还指出:

基础样式表描述了所有HTML 4.0 [HTML40]元素在可视UA中的典型呈现方式。该样式表基于对当前UA如何呈现HTML的广泛研究,并鼓励开发人员在实现中使用它作为默认样式表。


深入挖掘一下,我们可以找到一个"基本样式表", 其中包含相同的值,并注明:

我为 W3C CSS2 草案开发了示例样式表,但此位置的编辑材料没有官方的 W3C 状态。

...

基础样式表描述了所有HTML 4.0元素在Mosaic衍生的Web浏览器(Netscape Navigator和Microsoft Internet Explorer)中的“共识默认”呈现方式。它旨在作为编辑或“级联”其他样式表模块的基础,提供信息参考,是HTML 4.0规范的(非官方)补充,是样式表架构的练习和浏览器测试工具。基础样式表捕捉现状以超越它。我们可以进一步追溯这个基础样式表到www-style邮件列表。
可能感兴趣的是,大约在那个时候,W3C认可了一组“核心样式表”,旨在成为更好的默认设置。这些样式表(现在可以通过互联网档案馆访问)确实使用更大的标题值, 导致h61emh51.17em。不幸的是,似乎这套样式表从未真正起飞,所以我们只能使用奇怪地小的h5h6

3
好挖掘!我认为最后一段关于W3C核心样式表似乎得出了答案:W3C希望标题更大,但IE默认使用较小的h5和h6成为事实上的默认值,我们现在被困在这个问题上。除非有人回应你呼吁微软员工挖出一封旧邮件,否则我会在一两周内接受你的答案! - Sean
样式表(有点)在Windows注册表中!大自然真是神奇。 - Jacob Ford

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接