CODEWITHSUNDEEP
html
darronz
darronz

Reputation: 903

Which is the more correct page layout?

With the addition of the <main> element in the HTML5 draft spec, which is the more correct page layout?

<body>
    <header> ... </header>
    <main>
        <aside> ... </aside>
    </main>
    <footer> ... </footer>
</body>

or;

<body>
    <header> ... </header>
    <section>
        <main> ... </main>
        <aside> ... </aside>
    </section>
    <footer> ... </footer>
</body>

Upvotes: 4

Views: 571

Answers (3)

Ian Devlin
Ian Devlin

Reputation: 18870

As always it depends on the content.

For me, if the contents of the header and footer are generic to all pages, then leave them outside of the main element whose content should be specific to that page. If, however, the header and/or footer are relevant to the main contents of that page only, then put them inside the main.

The same logic applies to the aside element.

Plus read what Steve Faulkner says on this page. He knows everything!

Update! Due to this particular question, I have posted an article with further examples on how the main element might be used.

Upvotes: 2

Heydon
Heydon

Reputation: 1

In the second example, you have placed <main> within a <section>.

Since <body> is implicitly a "section" and the <section> belongs to it, the <section> is - in fact - a subsection.

This causes a problem.

Why?

As Steve points out, you can only use <main> once per page. In this example, you have chosen to use the one element that defines the main part of the page within a subsection of that page.

The "main" part of something surely cannot belong to a subset of that thing. This simply doesn't make sense, regardless of what you are "allowed" to do according to the current specification. Your deployment of <main>, in this example, is at odds with the structural intent described by your use of sectioning content.

In structural terms, the first example is - therefore - slightly superior, although your semantic choice of <aside> is suboptimal. You've essentially said, "here is the most important part of my page's content and in it is some tangential, loosely related stuff". Tangential to what?

Unless...

you are intending to put some flow content directly within the <main> region, adjacent to the <aside>. This content would belong directly to main, which belongs directly to <body>. The <aside> remains a subsection of <body> and is actually an "aside" to some main content.

This would be totally sound.

Upvotes: 0

Steve Faulkner
Steve Faulkner

Reputation: 2640

The answer as to the correctness of each of the example markup patterns can be found in the normative definition of the main element.

Contexts in which this element can be used: Where flow content is expected, but with no article, aside, footer, header or nav element ancestors. Authors must not include more than one main element in a document.

In this case either example markup is conforming. It is difficult to know which is the most appropriate or practical from a theoretical example alone.

And which spec are the browsers following?

Browsers have implemented the main element as defined in the W3C HTML specification. Conformance checkers such as the W3C HTML validator will implement the conformance requirements of the W3C HTML spec.

Note: The main element will be added to HTML 5.0 in the near future.

Note: The specification of the main element in HTML 5.1 supersedes the extension spec.

Upvotes: 7

Related Questions