Is It Valid to Have Paragraph Elements Inside of a Heading Tag in HTML5 (P Inside H1)

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

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.

Should a heading be inside or outside a p ?

It is impossible to put a heading element inside a p element in HTML markup, not just formally but because browsers implicitly terminate an open p element when they encounter a heading. So the question is meaningless: an element that cannot exist in a certain context cannot have any meaning (semantics) within that context.

Instead of using p to group text and headings together, you can use the div element or, with the usual caveats, HTML5 novelties like section and article.

The 'p' tag in 'h1' for SEO

Search engines may ignore p markup inside h1. Or they might dislike it, doing something nasty. In any case, there is nothing to be gained by using such markup. Instead, you can use

<h1>
some title<br>
<small>some subtitle</small>
</h1>

You can then tune the relative sizes by setting font-size on h1 small. You can also set padding-top on it, if you wish to have more spacing between the parts.

Search engines can be expected to treat the h1 element as just containing “some title some subtitle”. If this makes a long heading, they may discard part of it (near the end) or maybe just reduce the relative importance of the contents from the weight that a short heading would have.

In any case, you should expects words in headings have relative weight in SEO, relative to other contents on the page, not to the outside world (other web pages).

OK to have text in div without paragraph tag?

Yes, it is ok to use a <div> element without <p>.

A <p> would tell that the text within a <div> element is split into paragraphs, thus if you have text split into paragraphs, you should use <p>; on the other hand, a <p> cannot contain elements other than so-called phrasing content; thus you cannot have a <div> inside a <p>.

---

Related Topics