Irrational Headings

For years developers have been confused about, fought over, ignored advice on, and generally mis-treated headings. It has bordered on irrational.

But let’s look at some actual irrational headings.


<hφ> corresponds to a heading at roughly level 1.618033988749…. This represents the Golden Ratio and is handy for identifying a heading that is less important than an <h1>, more important than an <h2>, and also architecturally sound.


<h𝑒> is for a heading level at roughly 2.718281828459…, or Euler’s number. Similar to above, less important than an <h2>, more important than an <h3>. Luckily, headings at this level do not compound if you use more than one.


You are not restricted to using <hπ> on March 14 in the US. That would be ineffectual, given the need to go in and change your heading structure twice a year. With a value of roughly 3.14159265358…, you can see where pi fits into the heading levels (between <h3> and <h4>).


The Feigenbaum constant delivers us <hδ>, at roughly 4.669201609102…. Between <h4> and <h5>, its use in non-linear mapping makes it a natural fit for the varied types of meandering content on the web.


<h√26> can be tricky since it has numerals in it. Because there is no named irrational number in the range of 5, this clearly feels like a hack. Either way, it comes in at roughly 5.09901951359.


The last one, <hτ>, is pretty easy to understand. Unless you think about it. Its value is approximately 6.283185307179…, or exactly 2π, or definitely not 2<hπ>. Or all of this will be if the mathematical community accepts τ.

Unreal Irrational Headings

If you see constructs like <h√−1>, those would be imaginary so they do not belong on your site. Similarly <h1i> is right out.

<h0> is not irrational. In fact, it is perfectly rational given most content on the web and how important it is to users (like this post). It is, however, imaginary. Somewhat.

Other Clearly Absurd Values

Mosaic web browser, Options menu expanded that allows the user to choose the font for H7. Regardless of possible prior art, <h7> is not legit. I don’t care what Mosaic lead you to believe.

If you are using <h∞>, then you are telling the user the heading, and its content, is so insignificant that you might as well remove it. Kind of like this post.

<hNaN> is not a number. It says so right in its name. I don’t know how this could be confusing. Unless, of course, you use JavaScript to render your page. In which case, sure. That’s already user hostile, so might as well pile on.

Why Are You Doing This?

Twitter broke me. Don’t let it happen to you.



Now this is what I call quality humor.


I tried to give this comment a <h7> heading, but the tag would’ve gotten stripped anyway.

But now I want to use dynamic font scaling to allow any arbitrary heading level to be appropriately scaled somewhere between h0 (infinitely large?) and h∞ (infinitesimally small). The big challenge is accessibility…

No wait… the big challenge is dealing with infinities.


I fully approve of this article.

Incidentally, how about ? A header that is the size of the difference of the previous two, that’ll keep ’em guessing…

In response to Andrew Somers. Reply

Andrew, I am guessing you did not escape the HTML (&lt; and &gt;). If you comment here or re-submit, I will clean it up and delete this comment.

Leave a Comment or Response

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=""> <s> <strike> <strong>