2

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.

Stanislav Kralin
  • 11,070
  • 4
  • 35
  • 58
Dwarf Vader
  • 429
  • 1
  • 5
  • 14
  • 1
    You can have multiple h1 on a page so if it makes sense to have one at the top of your article too then have one, but if you are worried about seo more than semantics, then perhaps you should ask this question on https://webmasters.stackexchange.com/help/on-topic – Pete Jan 02 '20 at 13:37
  • 2
    @Pete I always read that you should only use one h1 per page, has that changed? Also, at this point I'm only concerned with elegance and semantics, SEO can come later. Thanks! – Dwarf Vader Jan 02 '20 at 13:54
  • 1
    best to have 1 `

    ` per page. I would go with the first option for single posts, keep in mind you will have a lot of metadata for articles like author, date, etc.

     – Tomas Ramirez Sarduy Jan 02 '20 at 14:25
  • 1
    It was a misconception that you should only have one h1 as google would mark you down for it in seo. If a page has multiple sections each as important as each other then the heading for those sections should each have the same weight - if that be a h1 then so be it. There is nothing that states that there should be only one h1 in a page - if there was then it would fail any online validator if you had multiple in a document (which it doesn't do) – Pete Jan 02 '20 at 14:28

1 Answers1

1

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.

Sean
  • 6,873
  • 4
  • 21
  • 46