header and footer are two HTML5 elements which too often are considered only from the presentational point of view. In this post, I'd like to emphasize their semantic role in the overall structure of an HTML5 document.
header
This element doesn't represent only the top section put above a part of your main content. Instead, consider it as an introduction to your contents. It's not a case that you can have multiple header elements on the same page. For example, you can have the following structure borrowed from some Wordpress themes:
<header>
<hgroup>
<h1>Site Name</h1>
<h2>Description</h2>
</hgroup>
</header>
and, at the same time, you can use this structure several times:
<article>
<header>
<hgroup>
<h2>Article Title</h2>
<h3>Excerpt</h3>
</hgroup>
</header>
<!-- contents -->
</article>
<article>
<header>
<hgroup>
<h2>Article Title</h2>
<h3>Excerpt</h3>
</hgroup>
</header>
<!-- contents -->
</article>
<!-- more articles -->
header is not just the element above the content: it's an introduction, a preamble, a small sum of what the reader will encounter later.
footer
This element, as for header, is not a mere element that comes after the main content. Instead, it can be seen as a little postlude, an addition, something that completes your main contents. As for the previous element, it can be used several times on the same page:
<article>
<header>
<hgroup>
<h2>Article Title</h2>
<h3>Excerpt</h3>
</hgroup>
</header>
<!-- contents -->
<footer>
<!-- notes, metadata, etc. -->
</footer>
</article>
<article>
<header>
<hgroup>
<h2>Article Title</h2>
<h3>Excerpt</h3>
</hgroup>
</header>
<!-- contents -->
<footer>
<!-- notes, metadata, etc. -->
</footer>
</article>
<!-- more articles -->
As you can see, you can use this element to add something, to complete, to explain better or to provide some further information to your readers.