Document outline and the wrapper of the main content

Hi all,

When it comes to wrapping the main content, it has been discussed by many
that <div> should be used instead of <section> and <article>. (More details
can be found on the internet)

But the problem is that by using <div> for the main content, the document
outline is formed incorrectly.

Please take a look at the markup below:

<!DOCTYPE html>
<title>blablabla</title>
<header>
    <h1>Branding</h1>
    <nav>
        <h1>Navigation</h1>
        blablabla
    </nav>
    <aside>
        <h1>Search</h1>
        blablabla
    </aside>
</header>
<div role="main">
    <h1>Main Content</h1>
    <section>
        <h1>Welcome to Branding</h1>
        blablabla
    </section>
    <section>
        <h1>A Brief Intro of Branding</h1>
        blablabla
    </section>
</div>
<aside role="complementary">
    <h1>Complementary Content</h1>
    <article>
        <h1>Latest News</h1>
        blablabla
    </article>
    <article>
        <h1>Recent Comments</h1>
        blablabla
    </article>
</aside>
<footer>
    blablabla
</footer>


The document outline formed by the above code is:

1. Branding
        1. Navigation
        2. Search
2. Main Content
        1. Welcome to Branding
        2. A Brief Intro of Branding
        3. Complementary Content
                1. Latest News
                2. Recent Comments


As we can see, because the <div> use for wrapping the Main Content is not a
sectioning element, the hierarchy of the document outline is incorrect. The
Main Content is incorrectly at the same level as the Branding. And both
being contents, the Main Content and the Complementary Content aren't at
the same level, while they should be.

In fact, this issue could be overcame by introducing a sectioning element
for the Main Content. With the wrapper of the Main Content being a
sectioning element, the document outline could become correct and clear:

1. Branding
        1. Navigation
        2. Search
        3. Main Content
                1. Welcome to Branding
                2. A Brief Intro of Branding
        4. Complementary Content
                1. Latest News
                2. Recent Comments


Sincerely,
Ian Yang

Received on Wednesday, 1 August 2012 11:23:25 UTC