How to make new heading tag numbers such as h7, h8, etc.?

Question

How can I make another heading in HTML?

I have used

,

,

,

,

Answer 1

None of the answers posted so far are quite correct. Some are quite misleading.

In html5 you can indeed use h7, h8 and so on, and select them with corresponding css selectors, but semantically speaking these are not headings, they're just elements with unknown semantics - much like divs and spans. Also I'd be surprised if all browsers treated these 'custom' elements consistently without providing a CSS value for display at least.

But you can specifying the missing semantics with a role attribute of "heading", and this will be important for assistive technology such as screenreaders. It might (conceivably) affect SEO somewhat, but there are many far bigger SEO issues than this.

The correct way to specify a heading level higher than 6 is to include the attribute aria-level="7" (or whatever level you prefer). If you apply this attribute to anything other than h1-h6 you will also need role="heading".

Therefore any of the following "h7" examples are valid and correct according to w3:

<h1 aria-level="7">... (heading semantics provided by "h1", but 7 overrides 1)

<h7 role="heading" aria-level="7">... (heading semantics provided by role)

<div role="heading" aria-level="7">... (heading semantics provided by role)

And of course to select any of these in css you could do something like:

*[aria-level="7"] {
    font-size:0.5em;
}

Finally: Don't nest headings of different levels inside each other! This is known to confuse all screenreaders, and probably not valid HTML either. Close each heading element completely before starting a new one. It's easy to overlook this if you are using div, and validators will most likely not notice the error.

Answer 2

On another of my questions, which was completely unrelated, i received an answer to this question:

---

You can't make a heading 7, because there's only six different HTML headings (h1, h2, h3, h4, h5 and h6; reference: http://www.w3schools.com/tags/tag_hn.asp), but you can make a heading 6 with this CSS code:

h6.special { color:#464646; outline:0;
    font-family:Raleway, sans-serif; font-size:17px; }

and this HTML code:

<h6 class="special">I am special!</h6>

---

This solution does not damage seo and is fairly simple. I just though I should let everyone know. As a side question, can you change the "special"? Say if i changed it to

h6.raleway { color:#464646; outline:0;
    font-family:Raleway, sans-serif; font-size:17px; }

and this HTML code:

<h6 class="raleway">I am raleway!</h6>

Would this work? Thanks again for all you answers!

Answer 3

The simple way will be to use classes

.h7{ font-size:10px;}
.h8{font-size:7px;}

something that way and use it with spans divs .

Answer 4

h7, h8, h9 are not a valid html tag and the browser can do what it wants with it. You can create your own css class and use css property like h2, h3 etc.

Like:

 h7{
        display: block;
        font-size: 0.51em;
        -webkit-margin-before: 2.99em;
        -webkit-margin-after: 2.99em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
    }

Answer 5

If you really need headings below the 6th level (which means that your document corresponds to a large book in structure and nesting of sections), use div elements with class attributes. (Using “custom tags” like h7 does not conform to specifications, causes problems in IE, and creates an illusion of using headings – they won’t be headings, to search engines, outline construction, etc.) Example:

<style>
.h7 { font-weight: bold; margin-top: 1em; }
</style>

<div class=h7>Some text</div>

(It will be difficult to style headings at 7 or 8 levels so that the level is clearly reflected in the appearance and the font sizes of topmost levels are not excessively huge.)

In theory, you could use the HTML5 section elements to define the nesting structure of parts, chapters, sections, subsections, etc. in the document and just e.g. h1 heading inside each section. By the HTML5 CR, the nesting of section elements then defines the levels of headings, so at the 7th level of nesting, <h1> would be a 7th level heading. But even to people who generally favor HTML5, this might be rather confusing, and to make this work in old versions on IE, you would need <script>document.createElement('section')</script> as well assection{display:block}` plus code that formats the headings using contextual selectors.

The formulation “different text types that I need to use” suggests that you might be looking for just possibilities for styling elements. In that case, use div or p or some other elements, with class attributes as needed, as suitable for the content and structure, and do the styling in CSS.

Answer 6

You can declare this in your stylesheet

h7, h8, h9 { /* You can just go on adding headings */
   display: block; /* Because this is block level element */
}

h7 {
   font-size: /*Whatever */ ;
}

h8 {
   font-size: /*Whatever */ ;
}

But I would suggest you not to do so, as it doesn't carry any semantic meaning, also it will be bad from SEO point of view

Also take a look at html5shiv, just add the elements you want in the script