Menu
The default <h5> and <h6> section headings in HTML5 have font sizes of 0.83em and 0.67em, respectively, while the default <p> font size is 1em. That means in a block of text containing <h5>, <h6> and <p> tags, these headings will be smaller than the text they head:
(Default body font size above is 14px)
This seems counter-intuitive: headings are supposed to draw the eye and command the start of a section, and font size is an important visual cue. Is there a reason why the default font sizes make these headings smaller than the text under them?
416
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size. The default font size is 3, and the largest font size that can be displayed in a browser is 7.
I've been searching through W3C mailing lists but haven't found any debate on this decision.
Here's what I can infer:
The first published version of the HTML spec (before CSS came into play) actually specified that h4 and h5 should be "normal font" size. The font size for h6 wasn't explicitly specified, but I would presume that it was also the normal font size.
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. CSS broke onto the scene. Or really, limped onto the scene and broke. The first recommended default style sheet for browsers specified only:
H1 { font-size: xx-large } H2 { font-size: x-large } H3 { font-size: large }
h4 through h6 would thus be 1em.
HTML 3.2 dropped any font-size recommendations relative to document text, only recommending:
More important headings are generally rendered in a larger font than less important ones.
This conflicts a bit with CSS1, but the two were not integral to each other at the time. Most styling was still done with inline HTML attributes, which were still very much not deprecated.
CSS2 came out, and it removed a default style sheet from its own spec, and instead linked to the new sample style sheet for HTML 4.0 in HTML's specification.
This is the origin of headers explicitly being set smaller than 1em, at least as far as I can tell. The recommended HTML 4.0 stylesheet specifies the values most browsers keep to today as defaults:
H5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 } H6 { font-size: .67em; margin: 2.33em 0 }
70
Ooh, digital archaeology!
So, it turns out that you can trace this back to the default "styles" (not exactly CSS!) of Internet Explorer 3-4 and Netscape Navigator 3-4. More specifically, they are likely pulled from IE4pp2 but introduced with IE3. How IE/Microsoft decided on those values is, unfortunately, lost to the sands of time (at least publicly - it may well be available in Microsoft internal email archives ... anyone know a MS employee?).
I've tried to reconstruct the chain below.
As Jacob mentioned, the earliest draft of CSS2 from November 1997 includes a sample stylesheet that defines h5 as .83em and h6 as .67em. It also notes:
The Base Stylesheet describes the typical rendering of all HTML 4.0 [HTML40]) elements visual UAs. The style sheet is based on extensive research on how current UAs render HTML, and developers are encouraged to use it as a default style sheet in their implementations.
Digging a bit further, we can find a "base stylesheet" with the same values, which notes:
I developed the sample stylesheet for the W3C CSS2 Draft, but the editorial development of materials at this location has no official W3C status.
...
The Base Stylesheet describes the "consensus default" rendering of all HTML 4.0 elements in Mosaic-derivative Web browsers (Netscape Navigator and Microsoft Internet Explorer). It is intended as a basis for editing or "cascading in" other stylesheet modules, an informative reference, an (unofficial) complement to the HTML 4.0 specification, an exercise in stylesheet architecture, and a browser testing tool. The Base Stylesheet captures the status quo in order to move beyond it.
We can further track this base stylesheet back to the www-style mailing list.
em: https://lists.w3.org/Archives/Public/www-style/1997Jul/0190.html SerifMedium, Normal is 12 (pt, probably), H1, H2, H3, H4, H5, and H6 were 24, 18, 14, 12, 10, and 8 respectively.em with "Normal" (12pt) as 1em, match the base stylesheet sizes! H5 at 10/12 = .83em, H6 at 8/12 = .67em!Of possible interest is that around that time, W3C endorsed a set of "Core Style Sheets" intended(?) to become a better default. These stylesheets (now accessible via the Internet Archive) do use larger values for all headings, resulting in h6 at 1em and h5 at 1.17em. Unfortunately, it seems this set of stylesheets never really took off, so we're left with the weirdly small h5 and h6.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
