HTML5 footer element and confusing w3.org example

Question

I was browsing the w3.org page about the article element and one of the exemples surprised me:

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article>
   <footer>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <footer>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

As you can see, the comments info (poster name and date) are in a footer element at the begining of each comment.
According to W3.org 4.3.8 The footer element it is a valid usage, but it seems quite strange to use it that way.

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

It is right, nothing says that it should sit under the actual article.

I would have used a header element for this usage but on 4.3.7 The header element it is precised that

A header typically contains a group of introductory or navigational aids.

But they also say about the footer element:

The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.

So why are they using the footer element in the example? Wouldn't a header element be more intuitive and semantic?

<section>
  <h1>Comments</h1>
  <article>
   <header>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </header>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <header>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </header>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>

Is there a particular reason for that?

Answer 1

Rule of thumb here is that footer should be used to mark meta information about enclosing section (in your example, that is author and pubtime for each individual comment). Also, as you noted, per spec it's not required that footer must be at "the foot" of the section.

In contrast, header is used for introductory content of enclosing section and should contain at least one heading element. In fact, I would assume that exclusion of heading element is main reason why original example uses footer element.

To avoid confusion, this doesn't mean that every heading should be wrapped in header since in that case it doesn't add any semantic value.

So general rule of thumb: if it has header AND some additional information (subtitle, pubdate, TOC, nav...) it can usually be enclosed in header. Any additional information/meta data about section that don't appear near heading in document flow (footnotes, related links, autor information, copyright...) can be enclosed in footer.

Reference:
- HTML5Doctor - Footer
- HTML5Doctor - Header

Answer 2

The semantic difference between footer and header is not always clear. In unclear cases, the important thing is that you use one of them at all, not which one to use.

Position of footer and header

The position doesn’t matter (as long as it’s inside of the relevant section). As a header is for introductory content, it will of course typically appear near the top of the section. For footer, the spec notes:

Footers don't necessarily have to appear at the end of a section, though they usually do.

It would even be possible to use them multiple times (not that it would necessarily be a good idea):

<article>
  <footer>…</footer>
  <header>…</header>
  <p>Hello world</p>
  <footer>…</footer>
  <header>…</header>
  <header>…</header>
</article>

Semantic differences between footer and header

• What the elements represent, according to the spec’s definition:
  • footer: "a footer"
  • header: "introductory content"
• What the elements "typically" contain, according to the spec:
  • footer: "information about its section such as who wrote it, links to related documents, copyright data"
  • header: "group of introductory or navigational aids"
• What the elements may contain, according to the examples in the spec:
  • footer: "Back to …" link, publication date, navigation, copyright notice, link to ToS, references to the authors
  • header: introduction, title/heading, version number, date, links to related documents, copyright notice, navigation, status information, notices
• WAI-ARIA roles (only in case its the footer/header of the body sectioning root):
  • footer has the contentinfo role ("information about the parent document")
  • header has the banner role ("mostly site-oriented content, rather than page-specific content")