I am creating a single-post template for my blog. With multiple posts per page, it's simple:
<header class="page-header">
<h1>Recipes</h1>
...
</header>
<main>
<article>
<header class="entry-header">
<h2>Article 1</h2>
... other metadata ...
</header>
<p>Body</p>
<article>
<header class="entry-header">
<h2>Article 2</h2>
... other metadata ...
</header>
<p>Body</p>
</article>
</main>
But with single posts, I can't decide what's more elegant:
<header class="page-header">
...
</header>
<main>
<article>
<header class="entry-header">
<h1>The article title</h1>
... other metadata ...
</header>
<p>The article body</p>
</article>
</main>
<header class="page-header">
<h1>The article title</h1>
... other metadata? ...
</header>
<main>
<article>
<p>The article body</p>
</article>
</main>
Option 1 keeps the structure of <article> elements consistent, whether they are part of a list or stand-alone. The title is always within the <article> tag, changing between <h1> and <h2> depending on the context.
Option 2 keeps the structure of the <header> tag consistent, the <h1> tag always in the same place on the page.
By extension, the same applies to the rest of the article header metadata.
Part of this decision might come down to personal preference, but perhaps there are recommendations (for example, the article title and meta needs to be inside the article tag, etc). The spec says that the <article> element should be a "self-contained" piece of content. It then proceeds to show an example similar to my 1st option. Is that, then, the preferred approach? This question on StackOverflow also asks something very similar, but there's no direct answer unfortunately.
The spec defines an <article> as:
...a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.
In order for it to be "self-contained", the title of the article needs to be within the <article> element. Otherwise, various technologies (and users) may incorrectly interpret the first heading within the <article> as the title of the article.
Go with option 1. Always keep the title of the article within the <article> tag.