How exactly do the semantics of the HTML5 <header>, <section>, and <footer> tags work?

Question

I'm a bit puzzled how I'm supposed to use the HTML5 <header>, section>, and <footer> tags. Currently, I can't work out whether to use them like this:

<section id="example_section">
    <header>
        <h1>Example Section</h1>
        <p>etc</p>
    </header>

    <p>Content para 1</p>
    <p>Content para 2</p>
    <p>Content para 3</p>

    <footer>
        Wasn't that swell?
    </footer>
</section>

Or like this:

<header>
    <h1>Example Section</h1>
    <p>etc</p>
</header>

<section id="example_section">
    <p>Content para 1</p>
    <p>Content para 2</p>
    <p>Content para 3</p>
</section>

<footer>
    Wasn't that swell?
</footer>

Or compromising, like this:

<section id="example_section_wrapper">
    <header>
        <h1>Example Section</h1>
        <p>etc</p>
    </header>
    <section id="example_section">
        <p>Content para 1</p>
        <p>Content para 2</p>
        <p>Content para 3</p>
    </section>
    <footer>
        Wasn't that swell?
    </footer>
</section>

I've included the ID's to show the intended meaning of the sections. I realise that they are unnecessary. Which method is correct?

Answer 1

All are correct in one way another but this is more better then any other

<section id="example_section_wrapper">
    <header>
        <h1>Example Section</h1>
        <p>etc</p>
    </header>
    <section id="example_section">
        <p>Content para 1</p>
        <p>Content para 2</p>
        <p>Content para 3</p>
    </section>
    <footer>
        Wasn't that swell?
    </footer>
</section>

Couple of best practice and tuts links

• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
• HTML5 Overview (*best practice block)
• Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices

Answer 2

The tags themselves are pretty abstract, right now. You can use them in any of the ways described above, but your third option is most-correct.

Answer 3

They can all make sense, but the first one is the most correct, in general.

Assuming the whole snippet represents a real section (content about the same topic) it makes sense for it to have a header and a footer inside of the section itself. Also a section needs a heading (h1-6, at least one. Possibly with a hgroup if more than one) and it's missing from your second and third example.