Is it possible to create HTML tags h7, h8, h9 and so on? [duplicate]

Question

Is it possible to create more heading styles, like h7, h8, and so on?

Is it possible to have more than six different types of headings on a website?

Barrault

why do you need them? is it just for a design purpose? – Ringsmuth

Please do a search before asking a new question – Walkerwalkietalkie

Thanks @Unykvis it is necessary for me to have more than 6 headings yes. – Barrault

@Barrault whatever you try to create, it'll be hardly readable if it really has more than 6 nested sections. – Watchcase

doing so would be invalid in terms of markup but did you know that you can do <h2 class="subcat1"></h2>, and <h2 class="subcat2"></h2> then add the css classes like h2.subcat1 {} and h2.subcat2 {} so that they are styled differently? – Tamaru

It should be possible to use the techniques of html5shiv to add additional <h#> elements. However doing so will likely result in non or less accessible html. The html would also be questionably semantic due to its deviation from the standard. – Hesson

@LeeTaylor the questions that were considered as duplicates would not necessarily be found if the OP didn't already know exactly what he was asking. I also doubt that either of those questions would have been picked up by SO's detection algorithm when the OP created this question. – Mcmillian

Actually this question has better answers than the target. I propose to swap duplicates. – Onaonager

Answer 1

You can create any element you want on a page, but I think your question is whether it will be interpreted correctly by a user agent like a browser. Browsers will allow you to create, apply styles to, and access arbitrarily-created elements on the DOM regardless of whether they conform to the spec implied by your declared DOCTYPE.

However, in general, it's best to avoid creating deeply nested structures; users find such hierarchies difficult to follow. In addition, as other answers linked in the comments have pointed out, there may be unintended consequences with page accessibility, SEO, or script compatibility. I have yet to find a use case that actually needs such deeply nested hierarchies, except when posting long legal documents as a single HTML page.

Thenna

Thanks @Thenna I will restructure my site and make better use of the accepted 6 headings. – Barrault

Answer 2

The HTML specification defines six headings. Browsers recognize six headings. If you start using <h7> and so on, then you'll be using an invalid element.

If you find yourself needing an <h7> then you should probably take a look at how you're structuring your site. Not every single title deserves a heading element.

Chink

Thanks @Brian I will restructure my site and make better use of the accepted 6 headings. – Barrault

As long as OP is using HTML5 it is perfectly valid html to have <H7> – Mcmillian

Why is that not every single title deserves a heading element? Title is still a title hence this should be emphasized in the code semantics. Though I doubt the need to create 7 nested titles. – Frazzled

@German, which titles deserve heading elements are up to you, and will vary greatly depending on the design. What's important to remember is that heading elements are for search engines to assign priority to the titles, and it's important to structure your HTML accordingly. For many cases, <p class="title"> would be a fine element for a title, especially if that title isn't the main concern of the page. The objective is to balance SEO and semantic markup. There are certainly pages that will contain only heading elements, and others that will have a big mix. Depends on what you're creating. – Chink

The objective is to balance SEO and semantic markup. This is a right objective without a doubt. But if search engines encourage to make improper markup, this is something to blame them for. Standards need to somehow provide enough tags and rules to makes pages that would fit both aims. – Frazzled

<h7> and <h58925> is not invalid element at all in html 5 – Miner

@eirenaios It is now 5 years later so my response is no longer as valid but I would still suggest not using <h7> and so one because web components are not yet ready in Edge and Safari, although right now Safari is pretty close. – Chink

@Brian fine .... – Miner

<h7 role="heading" aria-level=7"> provides the missing semantics for any h7 you may need. I suggest also styling it with display:block; and a specific font size. This is entirely valid. – Desireedesiri

@brennanyoung, that should be an answer ;) – Onaonager

Answer 3

Generally speaking, you can create as many headings as you want, but they must be defined as classes. So if you are looking at making more than six headings for organization purposes do something like:

.h7{
    color: #111111;
    font-size: 16px;
    text-transform: uppercase;
 }

<p class="h7"> I'm an extra heading </p>

Jacobah

This will not provide the missing semantics that are provided by h1-h6 – Desireedesiri