Right HTML 5 Article Structure

Question

I hope the question is not too generic, but I would need an advice:

Which one of the following examples would you consider to be the right one?

Number 1

<article>
    <section>
        <header>
            <h1>Title</h1>
        </header>
        <p>Content</p>

        <h2>Title 2</h2>
        <p>Content</p>

        <footer>
            <p>footer</p>
        </footer>
    </section>
</article>

Number 2

<article>
    <section>
        <header>
            <h1>Title</h1>
        </header>
        <p>Content</p>

        <header>
            <h2>Title 2</h2>
        </header>
        <p>Content</p>

        <footer>
            <p>footer</p>
        </footer>
    </section>
</article>

Number 3

<article>
    <section>
        <header>
            <h1>Title</h1>
        </header>
        <p>Content</p>
        <footer>
            <p>footer</p>
        </footer>
    </section>
    <section>
        <header>
            <h2>Title</h2>
        </header>
        <p>Content</p>
        <footer>
            <p>footer</p>
        </footer>
    </section>
</article>

I would prefer example number 1, but I am not totally sure :/

Are you looking for html or xml? – Caimen Oct 14 '11 at 00:14 — Caimen, Oct 14 '11 at 00:14

score 0 · Accepted Answer · answered Oct 14 '11 at 16:58

0

1 and 2 are equivalent. Use whichever you prefer. The implicit section started by the <h2> is inside the explicit section.

3 is semantically different. The <h2> in the second section has the same ranking as <h1> in the first section, and the two sections are peers.

answered Oct 14 '11 at 16:58

Alohci

78,296
16
112
156

Just want to make sure: You are saying #1 and #2 are equal. Does this mean that the `header` element can be used multiple times inside one `section` (as seen in example #2)? – r0skar Oct 21 '11 at 13:27
1

@Andrej - Yes it can. You can even put the footer at the start of the section and the header at the end. Or mix multiple headers and footers up in any order. The one thing you can't do is to have a header or footer inside a header or footer. So `
...
` is OK, but `
...
` is not. Incidentally, though, using `
` is redundant if its only content is a single `` element.
– Alohci Oct 21 '11 at 13:37
Thanks for that insight! p.s. in the real code I am using something like `
title
subtitle
` - forgot to add that in my examples above :) – r0skar Oct 21 '11 at 13:55

Right HTML 5 Article Structure

1 Answers1