Should a Heading Be Inside or Outside a ≪P≫

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.

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 Navigation be above a following nav element, or inside it?

nav is a sectioning element and as such, if you have a heading that describes the navigation it should be inside:

<nav>
  <h1>Navigation</h1>
  <ul>
    <li>...</li>
  </ul>
</nav>

Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav element.

The W3C HTML5 spec provides a near-identical example:

Code Example:

In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 ...
</body>

In HTML5, should the main navigation be inside or outside the header element?

It's completely up to you. You can either put them in the header or not, as long as the elements within them are internal navigation elements only (i.e. don't link to external sites such as a twitter or facebook account) then it's fine.

They tend to get placed in a header simply because that's where navigation often goes, but it's not set in stone.

You can read more about it at HTML5 Doctor.

h1 inside or outside of a ?

As w3 describes the markup A:

An anchor is a piece of text which marks the beginning and/or the end
of a hypertext link.
The text between the opening tag and the closing tag is either the
start or destination (or both) of a link. Attributes of the anchor tag
are as follows.

This means both are correct, and they don't have the exact same effect. So it depends on what you want to make a hyperlink, in case you surround the entire <h1> you need to put it as a parent. This will make the entire block clickable, including the space to the right:

<a href="#"><h1 style="background-color: yellow">Anchor for entire title</h1></a>

Should I specify h2-h6 sub-headings for a details tag to make the details a distinct section?

The <details> element is a sectioning root, so you don't have to add a heading. Having said that, feel free to add a heading to its enclosed <summary> element, as the <summary> element can accept either phrasing content, or one heading element which will serve as the heading for its enclosing <details> element.

Should a Heading Be Inside or Outside a ≪P≫