How to Get h7 and h8 Headlines in HTML

If you need many levels of heading or headline, more than the six that HTML specifically supports, it is possible. Here’s an indirect method that’ll work with pretty much any browser.

HTML 5.2 provides the h1 element for the most important, most general, headline for the page or for an article on a page. It’s typical to have only one per page (although limiting to one is not a requirement). It also provides the h2, h3, h4, h5, and h6 elements, for inferior headlines. For most purposes, that’s plenty. As it is, h6 is usually styled to be not much more prominent than the text in a p element (the p element encloses a paragraph). But you might want more levels. I don’t need to know why. All that matters is how, and here’s how.

Write it like this:

<h6 class="h7-like">Minor Headline Example</h6>

Then all h6 headlines of that “h7-like” class will inherit the style of h6. You only have to specify the stylistic difference between h6 and what you want for h7-like. You can do the same for h8-like and so on.

When you define styles for h[n]-like, you probably should not make the font size any smaller than it would be for ordinary h6 elements, nor should you make the font gray or a color, since, at a small size, it would likely be inaccessibly harder to read, especially for people with visual impairments. But you may like bold or roman over italic, different alignments, and other changes.

Beyond that, if you want HTML to have more elements, that’s possible.