Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?

Question

Is it OK to have paragraph elements inside of a header tags in HTML5?

In other words: is this markup correct in HTML5? What are the drawbacks of using this?

<h1>
    <p class="major">Major part</p>
    <p class="minor">Minor part</p>
</h1>

If not, how can I style these elements with CSS correctly?

Solution

Actually, no. This markup is not correct according to W3C. You should avoid using this.

It is stated that the correct content for header elements is a "phrasing content", which is phrasing elements intermixed with normal character data.

In other words you can use the following convenient elements inside of a header tag in HTML5: a, em, strong, code, cite, span, br, img. See the full list here.

The W3C validator will give you the following error if you will try to validate this markup: Element p not allowed as child of element h1 in this context.

The one major drawback of using this markup that you should consider is that search engines can incorrectly parse your heading tag and miss important data. So this practice can be bad for SEO.

If you would like a better SEO results it is a good practice to include only textual data inside of a heading elements. But, if you also need to apply some styles, you can use the following markup and CSS:

<h1>
    <span class="major">Major part</span>
    <span class="minor">Minor part</span>
</h1>

<style type="text/css">
    h1 span {
        display: block;
    }
    h1 span.major {
        font-size: 50px;
        font-weight: bold;
    }
    h1 span.minor {
        font-size: 30px;
        font-style: italic;
    }
</style>

See the jsfiddle for this.

As stated before, span tag is perfectly valid inside of a header elements (h1-h6). And you can apply "display: block;" style to it to make it render as a block level element (each on a different line). It will save you a br tag.

Of course you will need to change this CSS selectors according to your use case.

And yes, as stUrb said it's not semantically correct to use paragraphs inside of a headings. The most important idea behind HTML is that it must be a semantics first, presentation later.

Comments

[Josh Crozier]

@user2864740 Though he did provide a good answer, he should have posted it on the original question. He knew it existed, as he just made a suggested edit on one of its answers.

[Slava Fomin II]

I just wanted to address this issue in a more broader sense as i often see this in practice and i couldn't find an appropriate answer with Google or SA. I think it can save some time to less experienced developers. The so-called "original" question is just too narrow for my extended answer. Again, my question has a broader meaning.

[BoltClock]

Common sense would tell you that it's not, and as far as I'm aware, this is not one of the areas where HTML flagrantly violates common sense, even though it does define "paragraph" slightly differently from common usage of the word. (I realize this is self-answered; my comment is directed not at you but at anyone who happens to be asking themself the same question, and is meant to encourage them to just think about it for a moment.)

[codmitu]

react screamed once at me when i used a div inside a p, since then i've learned my lesson so i assume is not ideal for SEO as well

[stUrb]

Clear explanation! Its also semantic not correct: Having a paragraph within a heading.

[snow]

is a b tab valid inside a heading tag? Would that have any negative implications on SEO?

[Slava Fomin II]

Are you talking about <b> element? If so, you should avoid using it in the first place, because it's a representational element and HTML should be used for information structure and semantics. CSS should handle presentation layer on top of that.

[BoltClock]

@snow: b isn't purely presentational in HTML5, but there is almost never a situation in which you would find yourself using b in a heading.