Search code examples
htmlfootersemantic-markup

HTML5 footer element and confusing w3.org example

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?

Solution

  • 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")