CODEWITHSUNDEEP
html
iJade
iJade

Reputation: 23811

Is nesting a h2 tag inside another header with h1 tag semantically wrong?

Is nesting a h2 tag inside another header h1 tag semantically wrong?

 <h1 class="fixed">
    <h2 class="absolute">
        Absolute Div
    </h2>
</h1>

Upvotes: 8

Views: 15772

Answers (4)

Ciro Santilli OurBigBook.com
Ciro Santilli OurBigBook.com

Reputation: 384474

HTML5 standard quote that says you can't

https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements 4.3.6 The h1, h2, h3, h4, h5, and h6 elements says that those elements can only have phrasing content ("inliny things" like bold or italics or links):

Content model: Phrasing content.

But h1-6 themselves are not phrasing content: they are flow content, the other major category of "blocky things" like parapgraphs:

Categories: Flow content. Heading content. Palpable content.

So you can't nest them.

Upvotes: 1

DCook
DCook

Reputation: 1

Yes absolutely you can nest H tags and it is good idea to do so for best page SEO ranking.
The reason you want to do this is to pack a page with correct heading tags but allow the CSS numerical H setting you desire for display formatting.

You have a few options:

  1. the one you have shown is correct: <h1><h2> Your heading</h2></h1> W3C validation will have a fit with this so I recommend option 2 that fakes W3C validation and browsers out.

  2. Use a Themco X-Theme with the [custom_headline] tag.
    Here is how this works: 

    [custom_headline type="center" level="h1" looks_like="h2"]Your Heading[/custom_headline]

Upvotes: -8

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

“Semantically wrong” is largely a matter of opinion (“semantics” means “relating to meaning”, but what would be the meaning here?), but the construct isn’t even syntactically (formally) correct. According to all HTML specifications and drafts, an h1 element must not contain an h2 element.

As regards to markup for a “subheading”, or a secondary part of a heading, there have been heavy debates on it, especially as regards to the proposed hgroup element (which would let you use h1 followed by h2 as if it were a single heading). The practical approach has been, and still is, to use markup like

<h1 class="fixed">
Primary heading text<br>
<small class="absolute">
Secondary heading text
</small>
</h1>

I have preserved your class names here, but they suggest that perhaps you should not be using heading elements at all. The h1 element is supposed to be the overall heading for the page, and an h2 element is supposed to be a heading at the next lower level, for a top-level section of the page.

Upvotes: 16

Dustin Cook
Dustin Cook

Reputation: 1305

It would be yes, as the <h> tags are meant for headers and should not be nested.

So you are putting a header within a header. Easier to just separate as normal:

<h1 class="fixed">
    </h1>
<h2 class="absolute">
    </h2>

Upvotes: 1

Related Questions