Re: Document outline and the wrapper of the main content

Indeed, it is correct. Why should the MAIN content be under the "branding"?

Moreover, screen reader users would expect level-1 headings to mark the 
most important contents of the document, which in my opinion can be the 
"branding & navigation" section (understood as "the interface") and the 
"main article" (understood as "the specific piece of information this 
document represents"). And thus, the "complementary content" is 
dependant of -probably- the main content, that is, it supplements the 
main information. According to WebAIM's survey, screen reader users have 
also considered that the "two-h1" structure is better than a single-h1 one.

However, I have not seen that debate of "div instead of article", and in 
fact I think it is wrong to use <div>, although not because of the 
sectioning levels, but because "article" can better represent the 
"individual piece of information", which can then be re-used in other 
parts of the website or other documents. Thus, for me the real problem 
is that using <article> the main heading would be always of level-2, 
which would not convey (in my opinion) its importance.

Regards,
Ramón.



Ian Yang escribió:
> 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

Received on Wednesday, 1 August 2012 12:16:11 UTC