Proposal to HTMLWG: New element ‘hd’, deprecate H1-H6
H1-H6 makes me cringe
Every time I have to use a heading element in HTML I cringe slightly. I’m forced to decide which element between H1 and H6 to use, yet most of the time I just want to semantically mark up a heading — a generic heading. Very often I’m not working on the whole document as it will be presented to the user, instead I’m usually working on a layout module. I need to get stuff done quickly and semantically correct. I already know that I will have to update the hierarchy of the headings later once the final structure of the document is finalized (pre HTML5). But having to change the element to update heading hierarchy feels wrong to me!
I really think we should get rid of H1-H6 and instead we should have a generic heading element <hd>. HTML should not have multiple elements that are semantically identical just to create a hierarchy. We don’t have any special elements for nested tables either. We shouldn’t have any for blocks of text. Because H1-H6 are UA-styled and those styles really seem to work for no one the hierarchy is more often than not abused by developers to create a visually useful appearance. The spec should not tell us how many levels of nesting we can use (H1-H6 ends at six, d’oh).
Therefore it would be best IMO to just have one element that always looks the same, changing its appearance should be done in CSS, exclusively. It should have an attribute level (or rank or similar) which is used by HTML parsers to create hierarchy or even a TOC (and to enable usage of CSS attribute selectors).
What’s the matter with just styling the H1-H6 tags ourselves, you might ask? If a web developer is relying on the default browser styling of a heading tag, then is it really a problem with the spec? The specifications nowadays are about getting it right, no? Well, in the past they often failed miserably at doing that (see below). Currently if you want to reset or apply a style to all headings your selector should look like this: h1, h2, h3, h4, h5, h6. Of course you’re to lazy to list them all, I know I am. And then later, when you change one of the headings, you run into problems. The new way to select headings would be much simpler: hd (any heading), hd[level] (all headings with a level attribute), hd[level=1] (all level 1 headings).
That’s why we need a single element with a level attribute. The fact that this would force the dev to actually style the element for hierarchical use is a welcome side effect.
Frequently I need to mark up some text as a heading knowing that it is outside of the flow of the main content. Having to choose one of H1-H6 just feels wrong. I’d much prefer using a hd without the level attribute.
The original H1-H6 elements were introduced in November 1995 in the HTML 2.0 specification:
“The six heading elements, <H1> through <H6>, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.”
They illustrate a way of thinking that is completely obsolete: “We shall give you six levels of headings. Surely six levels are enough for everyone.” Most of the time you don’t even need that many. But if you’re working with the kind of documents that can have six levels what do you do if you need one level more? Well there’s nothing you can do about that. The specification then goes on to propose detailed visual styles for each of the headings. We have been stuck with them ever since.
The HTML 4.0 spec added a commentary to the definition.
“Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.”
“The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.”
So now every section content element resets the use of H1-H6 hierarchy. The section content elements in turn get their rank from their place in the document structure. Child sections are subsections of their ancestors. This decreases the chance of having too few heading levels, yet the issues I have with H1-H6 remain the same. Adding an extra mechanism to rank sections just makes things more complicated.
I really think we should get with the times and clean this mess up. To summarize here’s what I propose:
- Introduce a new HTML tag HD to mark up headings.
- HD inherits H1’s specification.
- Deprecate H1-H6, discourage their use. Browsers will still be backwards-compatible with them however.
- Hierarchy of headings can be created by assigning an integer value to HD’s level attribute.
- Maybe if the HD tag does not have a defined id we can even have the browser automatically create one in a predictable manner?
- Should section content elements have an optional level/rank attribute too? The significance of their rank would only be apparent when a TOC is constructed from the document. This way the order of a TOC could be changed without forcing a change in DOM structure and maybe more importantly corresponding CSS rules.
- Should the attribute be called level, rank or something else?
I would like to invite any interested folks to get involved in a discussion about this. What do you think, is this idea an improvement? What criticisms do you have? Maybe together we can flesh out a proposal that has a fair chance at passing reviews at the standards bodies.