Nesting <article> and <h1> tags?

Question:

Which of these is the proper way to nest the <h1> and <article> tags, and what is your reasoning behind it?

Choice A:

<article>
    <h1>Some Title</h1>
    <p>Here's some text and whatnot.</p>
    <p>Here's another paragraph filled with other text and other whatnots.</p>
</article>

Choice B:

<div class="post">
    <h1>Here's a Really Awesome Title</h1>
    <article>
        <p>Here's a paragraph with text and whatnot.</p>
        <p>And here's another paragraph. I think this one is pretty awesome too.</p>
    </article>
</div>

Opinions seem mixed about this, and I'm not 100% which is the correct answer.

⚠ Warning ⚠

This answer is severely out-of-date and relies on the now-obsolete document outline algorithm.

both are fine

@David Dorward has a great answer, and I was going to comment to expand on it, but when I realized my comment was getting too long I decided I'd just add my own answer instead.

The h# elements semantically belong to their parents.

This h1 is the primary header for the page

<body>
  <h1>Some text</h1>
</body>

While this h1 is the primary header for the article

<body>
  <article>
    <h1>Some text</h1>
  </article>
</body>

This allows us to expand the usage of h# elements in meaningful ways as follows:

<body>
  <h1>Blag Tottle</h1>
  <article>
    <h1>Article 1 Title</h1>
    <p>Lorem ipsum etc</p>
  </article>
  <article>
    <h1>Article 2 Title</h1>
    <p>Lorem ipsum etc</p>
  </article>
</body>

Now you may want to separate your article heading some more, which is a perfect application of the header element:

<body>
  <h1>Blag Tottle</h1>
  <article>
    <header>
      <h1>Article 1 Title</h1>
      <span class="author">And not a mouse</span>
    </header>
    <p>Lorem ipsum etc</p>
  </article>
  <article>
    <header>
      <h1>Article 2 Title</h1>
      <span class="author">Somebody</span>
    </header>
    <p>Lorem ipsum etc</p>
  </article>
</body>

Headings are scoped to article elements (and other sectioning elements). The heading should be inside the article to which it applies.

The first element of heading content in an element of sectioning content represents the heading for that section

— http://www.w3.org/TR/html5/sections.html#headings-and-sections

Choice A is better if it is the heading for that article.

Choice B is better if it is the heading for all the articles that follow it.

I'm using first option. Because , article's mean is a part of external content . So this content should have a header.

Nesting <article> and <h1> tags?

Question:

Choice A:

Choice B:

both are fine

Related

Recent Posts