Bottom Up Headers

What if the heading level just above the text were always the same?

By Georg Lehner on
The web is not TeX is not paper

It is common in text processing software to number text headings from the top to the bottom. What were parts, chapters, sections and sub sections in printed books, have been systematized traditionally as 1st, 2nd, 3rd, … and so on heading level, hence we got the HTML heading elements <H1>, <H2>, … <H6>.

If you have written for the web, you surely have found out, that <H1> headings are too fat for a page title, as well as are <H2> headings in relation to the font size of the following body text.

What did you do about it? Shifting to lower heading levels? Changing font size and weight? Omitting <H> markup completely for marking up headings?

In this article I'll explore a systematic approach for fixing headings markup, namely by re-defining reality, stating that innermost textual content, think <p>, is always nested inside the deepest heading level, which in turn is nested inside the upper next heading level and so on.

We'll apply the concept of bottom up heading numbering to two scenarios where problems arise with the top down numbering and see how this approaches fits. Then we turn to real world applicability.

Some Background and History

Books are static, the content is written by an author, revised by an editor and then the layout is elaborated by a typesetter. This is done once, and then the book is reprinted many times. A good deal of time is invested into getting the typesetting right: it is essential for the aesthetic reception of the work, readabilty, comprehension of meaning and retention of content.

In contrast, web content is marked up during authoring with semantically meaningful tags, and typeset (rendered) every time the document is retrieved by the readers browser — there's nobody there to fix up bad style.

Understandig about the double nature of text markup has developed since the inception of HTML. Originally, HTML elements have been a mix between typeset hints and semantic markup. The <I> element originally meant italic font. This font style is used in so many contexts that the, now semantically focused, HTML standard has still not found a single semantic definition for it * .

By now it is understood, that marking up some text gives it a rethorical or semantic meaning, which helps machine based text comprehension extract structured information. On the other side, the markup indicates to the User Agent — your web browser — what mode of speech is used for a specific passage of text, so that the User Agent selects the rendering (or uttering) of the text according to the end users preferences and needs.

At least two problems arise with the <H1…6> headings from the early times of HTML:

HTML5 heroically tried to solve this problem with <section> nesting, but this has failed by lack of implementation.

Bottom Up Headings to the Rescue?

The two problems mentioned before — heading level/text mismatch and parent/child heading level mismatch — stem from the same root causes:

Let's take an example HTML document skeleton to show how top down and bottom up numbering looks like: 

<html>
  <head>…</head>
  <body>
    <h1>…</h1>
    <h2>…</h2>
    <p>…</p>
    <h2>…</h2>
      <h3>…</h3>
      <p>…</p>
      <h3>…</h3>
      <p>…</p>
  </body>
</html>
 
<html>
  <head>…</head>
  <body>
    <h4>…</h4>
    <h5>…</h5>
    <p>…</p>
    <h5>…</h5>
      <h6>…</h6>
      <p>…</p>
      <h6>…</h6>
      <p>…</p>
  </body>
</html>

In the bottom up document, the deepest nested <p> is always preceded by <h6>. The first heading found in the document is the highest heading level of the document. The section nesting depth of the document can be calculated easily from this:

heading_levelmax - heading_levelfirst + 1 = 6 - 4 + 1 = 3

The level of any heading h can be calculated with this formula:

heading_leveln - heading_levelfirst + 1
Authoring Bottom Up Headings in Shallow Documents

This document is shallow. It has just one level of headings and all headings are <h6>. It is written with bottom up headings and uses just browser defaults for header fonts * .

If I want to create a sub section, I have to promote all existent headings.

Oops! That's surely more work then with top down headings, where I only have to create a heading with the next level.

To relieve this, I propose editor functionality to promote/demote headings instead of explicit selection of nesting level. A pseudo code proposal for implementation is given toward the end of the article. Making the HTML authoring software smarter once is surely less overall effort then having all authors always care about header font sizes for all of their created content.

Bottom Up Headings in HTML templating Software

If all pages to be included in a parent page have the same nesting depth, the parent heading level is one level less then heading_levelfirst.

If the nesting depth of the included pages is not known in advance the heading_levelfirst of all to be included documents has to be determined and the deepest one has to be taken for levelling all other include documents. Their headings have to be promoted by the respective difference.

With bottom up headings, the software can determine if the nesting is even possible just by looking up the heading_levelfirst of the included document. In the case of top down headings it would have to scan down to the deepest header until it can decide.

Notes for expanding the topic
- The conundrum with "standard" font sizes in headers. h6 is too small
  and this won't go away.
  - Firefox can be reconfigured, Chrome not
  - How about text, or alternate browsers?
  - What about accessibility?
- The conundrum with H1 standing out!
- Oh! there was this increasing indentation, wasn't it?
- A practical approach:
  - Let's start with h4 for "unstyled" documents and have a standard stylesheet
    for others?
  - Let's exclude h1 from counting
References
	
	https://html5doctor.com/computer-says-no-to-html5-document-outline/
	https://stackoverflow.com/questions/55696808/why-do-h5-and-h6-have-smaller-font-sizes-than-p-in-most-user-agent-default/56453685#answer-56453685
	https://web.archive.org/web/19980611023315/http://www.verso.com/agitprop/corestyle/modulor/#head
	https://ux.stackexchange.com/questions/126039/is-it-a-problem-if-h4-h5-and-h6-are-smaller-than-regular-text
	https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#sections-and-headings

      
	
h1: Err can't promote more
h2: promote
h3: promote
h4: promote
h5 and CSS promote, Else Err deep nesting, switch to CSS
h6 and CSS promote, Else Err deep nesting, switch to CSS
	
      
	
h1: demote
h2: demote
h3: demote
h4 and CSS demote, Else promote all other headings
h5 and CSS shift, Else Err deep nesting, switch to CSS
h6 and CSS promote all other headings, Else Err deep nesting, switch to CSS