Marc's brain backups (incremental)

Proposal to HTMLWG: New element ‘hd’, deprecate H1-H6

H1-H6 makes me cringe

HTML5 logoEvery 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.

How did we get here

The original H1-H6 elements were introduced in November 1995 in the HTML 2.0 specification[1]:

“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.”

Would you like headings with that?

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.”

So just as the rest of HTML now headings were even messier.
HTML (previously HTML5) as defined by WhatWG
adds something new to the mix:

“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.

Lets fix it

I really think we should get with the times and clean this mess up. To summarize here’s what I propose:

  1. Introduce a new HTML tag HD to mark up headings.
  2. HD inherits H1’s specification.
  3. Deprecate H1-H6, discourage their use. Browsers will still be backwards-compatible with them however.
  4. Hierarchy of headings can be created by assigning an integer value to HD’s level attribute.


  1. Maybe if the HD tag does not have a defined id we can even have the browser automatically create one in a predictable manner?
  2. 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.
  3. 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.

3 Responses

  1. Pingback: H1-H6 makes him cringe – A proposal to the HTMLWG » memonic

  2. David

    Read the article with great interest as the issue is all too familiar. Simple example: I have to fill in an article in the editor of CMS xy. Now, with what level of heading should I start within the article, what level to use for subtitles…

    So there we are in the middle of the problem which awaits a better solution. One suggestion you outline in your article.

    Not sure though if your draft of a new system ultimately helps to resolve the issue as the level attribute itself doesn’t bring a real advantage over the old h1, h2 tags – apart from offering indefinite levels. Unless one looked at the level attribute’s value as a relative value. This way as an author I’d always start with level 1 within a given container and structure the content accordingly. This would then, in old terms, lead to the result that if a parent container’s last heading is a heading with in a child container would be interpreted as .

    Actually would be an interesting problem to solve if this is possible somehow to solve with the current html, css implementation…

    September 21, 2011 at 07:33

    • admin

      Hey David! The crucial part of your comment appears to have been mangled by WordPress… (“interpreted as …”)

      September 22, 2011 at 14:28

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>