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
If you have written for the web, you surely have found out,
<H1> headings are
too fat for a
page title, as well as are
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?
<H> markup completely for marking up
In this article I'll explore a systematic approach
fixing headings markup, namely by re-defining
reality, stating that innermost textual content,
<p>, is always nested inside
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
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
<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
By now it is understood, that marking up some text gives it
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
headings from the early times of HTML:
- In shallow documents, the section headers are too big with respect to the body text.
- HTML templating software * has to adjust the level of all headings of nested documents in relation to the parent document.
HTML5 heroically tried to solve this problem with
<section> nesting, but this has failed by lack of
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:
- The headings font size is tied to the heading number
- The closest header to text content varies in dependency to the nesting level of the content.
Let's take an example HTML document skeleton to show how top down and bottom up numbering looks like:
In the bottom up document, the deepest
<p> is always preceded
<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
The level of any heading h can be calculated with this formula:
Authoring Bottom Up Headings in Shallow Documents
This document is shallow. It has just one level of
headings and all headings are
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
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