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:

... (heading semantics provided by "h1", but 7 overrides 1)

... (heading semantics provided by role)

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

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...