Christoph ZillgensBack to Home

I‘m an Interface Designer and Web Developer from Germany. Here are some example of my work at my one-man company

Are header and footer in HTML5 used correctly?

I’m just wondering how to use the header and footer element the right way.
Although those elements are not meant to be presentational I most often find people using a likewise presentational structure for marking up their articles (header always on top, footer at the end):

<article>
	<header>
		<h1>This is my headline</h1>
		<!--Some additional info like pubdate and author-->
	</header>
	<div class=“entry“>
		<p>…</p> 
		<p>…</p> 
		<p>…</p> 
	</div>
	<footer>
		<!--Some additional info like where it is archived and some tags-->
	</footer>
</article>

Based on research, mood, our design or whatsoever we decide which content to put into the header and which to put in the footer. So we decide rather presentational like “Should this be on top? Ok, let’s put in the header” or “Should it appear at the end? Let’s put it in the footer.”

Wouldn’t it be better to think the other way around: “We have this piece of content. What’s the appropriate element to mark it up, header or footer?” Let’s say we put the author info into footer because the spec says so. If we then decide to put the author info on top, I think it should look something like this:

<article>
	<h1>This is my headline</h1>
	<footer>
		<!--author info and copyright info goes here -->
		<!--Some additional info like where it is archived and some tags-->
	</footer>
	<div class=“entry“>
		<p>…</p> 
		<p>…</p> 
		<p>…</p> 
	</div>
</article>

The spec also says that the footer element doesn’t need to appear at the end of a section, so this should be ok.

But what if we want to show some additional info at the end of the section, can we use another footer element within that same section?

Could likewise the header element appear at the bottom with some info like table of contents, as the spec suggests?

What do you think?

7 comments

  1. Bob Marteal wrote 1075 days ago · #

    Interesting example. I think you are on to something. Perhaps an element called <meta> that would be various meta information, author, dateline etc., for the <article> would be more logical than throwing a <footer> above the content?

  2. Andrew wrote 1070 days ago · #

    According to the spec, it’s fine to have multiple footer elements within the nearest ancestor sectioning element.

    Syntactically, they would all be of the type of content that <footer> encompasses, but they don’t necessarily have to be displayed all in one location.

  3. Daniel Pataki wrote 1040 days ago · #

    Excellent thought, I think the confusion arises because the elements are named somewhat confusingly (or rather, there is no great alternative).

    “The header element represents a group of introductory or navigational aids.” Therefore it would be best to call it <introductory elements or nav aids> instead of naming it with a word which in itself implies “top”.

  4. Karl wrote 912 days ago · #

    I find this very interesting. You really gave me something to think about. I love new insights.

  5. Handleiding ipad wrote 821 days ago · #

    The HTML structure seems to be correct, but it was confusing to me to read. My bad!

  6. Joomla installeren wrote 808 days ago · #

    This is such a great structure for a good website!

  7. Juan Mata wrote 767 days ago · #

    This is vrty nice main very good web!

Commenting is closed for this article.