CODEWITHSUNDEEP
html
Octavian
Octavian

Reputation: 494

HTML5 - Article Structure: Sections and Headers

I've found a lot of conflicting information on HTML5 best practices, and am wondering if my article structure is correct. In general, the pages on this site will consist of a header with nav, article, and footer.

Here's my basic structure:

<body>
    <header>Header content
        <nav>Navigation</nav>
    </header>
    <article>
        <header>
            <h1>Beans, beans</h1> <!--Main title for article-->
            <h2>Good for your heart?</h2> <!--Subtitle for article-->
        </header>
        <section>
            <header>
                <h3>Legume-based Flatulence</h3> <!--Section title-->
            </header>
            <p>Lorem ipsum beans beans beans.</p>
        </section>
        <section>
            <header>
                <h3>Gas and Good Feelings</h3>
            </header>
            <p>Correlation does not imply causation.</p>
            <footer> <!--Section footer for sources or...?-->
                Source: Phenomenological Farts, a Study in Siena
            </footer>
        </section>
        <section>
            <header>
                <h3>Beans for Every Meal?</h3>
            </header>
            <p>This is probably a terrible idea.</p>
        </section>
        <footer> <!--Article footer for additional downloads, etc-->
            <a href="#">Download this article!</a>
        </footer>
    </article>
    <footer>
        Footer content.
    </footer>
</body>

Does this make sense? Is it acceptable to use headers and footers within sections within articles?

Upvotes: 2

Views: 514

Answers (2)

Jon P
Jon P

Reputation: 19797

I was going to recomend <hgroup> for grouping headers, but it is no more: http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/. Perhaps use header in its place. More info and suggestions from W3C: http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head

I would also then change your other h3s to h2s as they are the section header.

Finaly a header soley consisting of an hx is kind of redundant.

More on Headers and Footers

Upvotes: 0

lukeocom
lukeocom

Reputation: 3243

When you're unsure about what tags are allowed inside others, simply check the spec at w3.org. Or run your code through a validator. The spec states that section, header and article tags can be used inside any container that allows flow elements. So what you have so far is valid.

Upvotes: 2

Related Questions