Using Section Element for Stylistic Layout and Wrappers

Using section element for stylistic layout and wrappers

Yes, the section element has an "inherent semantic meaning". See the definitions in the HTML5 spec:

div element:
The div element has no special meaning at all.
section element:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

To understand what this meaning is about, see my answer on the question HTML5 section tag meanings?.

The most important argument for not using section as a wrapper for CSS/JS is: each section creates an entry in the outline of your document.

Don’t use section as a wrapper in the way you described it. Use div (resp. span) instead.

If you use section appropriately, you can of course use it as selector for CSS/JS in addition, so you don’t need to add another div for this.

html5 section as generic wrapper

The "section" tag is used to group general content and can be used with a generic title (h1, h2 or other).
There are some rules to use "section" tag, those are the most important:

Don't use it for template structure - use other tags (header, footer, div) instead
Don't use it if you can use the "article" tag - so your articles can be used in other sites
You can use a "section" in an "article" and, of course, an "article" in a "section".

Generally you can use it in order to structure the page by grouping related content: for example in a blog you can define two sections, one for the last entry and another for the oldest.
You can also have a "section" in a "section": you can have as many section (generic contents) as you need.

<section>
    <h1>Last post</h1>
    <article>
        [My post...]
        <section>
            [Comments...]
        </section>
    </article>
</section>

<section>
    <h2>Oldest post</h2>
    <article>
        [First post...]
    </article>
    <article>
        [Second post...]
    </article>
    <article>
        [Third post...]
    </article>
</section>

Reading your code I think you can improve your structure using this:

<html>
    <head>
    </head>

    <body>
        <header>
        </header>

        <div id="main">
            <section>
                Generic content
            </section>
        </div>

        <footer>
        </footer>

    </body>
</html>

HTML5 - section element is no styling hook?

I've heard that the HTML5 section element should not be used for styling purposes

Not sure what your source is, but they're wrong. Style away!

That being said, <section> elements should be used when they're semantically appropriate, as per the HTML5 spec:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Wrapper inside or outside HTML5 semantics main, which is best practice?

I know it is bad practice to style HTML5 semantics hence why I have styled a div element for wrapping the layout for the page content […]

It is not a bad practice to style HTML5 elements like main. I would call it a bad practice to add div elements if you don’t really need them.

You should not add meaningful elements (i.e., everything except div and span) just because you need an element for styling reasons, but if you need an element because of its semantics, there’s nothing wrong with styling it.

If you do need a wrapping div: semantically it makes no difference if it’s inside or outside.

HTML5 section tag meanings?

http://www.w3.org/wiki/HTML/Elements/section is not the official definition of section. section is defined in the HTML5 specification, which currently is a Candidate Recommendation (which is a snapshot of the Editor’s Draft).

In the CR, section is defined as:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

section is a sectioning content element (together with article, aside and nav). Those sectioning elements and the headings (h1-h6) create an outline.

The following three examples are semantically equivalent (same meaning, same outline):

<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>

<!-- example 1: using section elements with corresponding heading levels -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h2>Waking up</h2>
    <p>…</p>
  </section>
  <section>
    <h2>The big moment!</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Going to bed</h2>
    <p>…</p>
  </section>
</section>

<!-- example 1: using section elements with h1 everywhere -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h1>Waking up</h1>
    <p>…</p>
  </section>
  <section>
    <h1>The big moment!</h1>
    <p>…</p>
  </section>
  <section>
    <h1>Going to bed</h1>
    <p>…</p>
  </section>
</section>

So you can use section whenever (*) you use h1-h6. And you use section when you need a separate entry in the outline but can’t (or don’t want to) use a heading.

Also note that header and footer always belong to its nearest ancestor sectioning content (or sectioning root, like body, if there is no sectioning element) element. In other words: each section/article/aside/nav element can have its own header/footer.

article, aside and nav are, so to say, more specific variants of the section element.

two completly different usage cases

These two use-cases are not that different at all. In the "container" case, you could say that section represents a chapter of the document, while in the "chapter" case section represents a chapter of the article/content (which, ouf course, is part of the document).

In the same way, some headings are used to title web page parts (like "Navigation", "User menu", "Comments", etc.), and some headings are used to title content ("My first day", "My favorite books", etc.).

Is a wrapper div a violation of content-style separation?

Kind of. But it doesn’t matter.

Principles like “separate content and presentation” are helpful because they help you achieve your goals, by making code easier to change. They’re not like nuclear safety regulations — contradicting them won’t risk anyone dying, so “violation” is a bit of a strong word.

Sticking in a wrapper <div> to work around the limitations in CSS (and/or browsers) is fine. <div> and <span> are intended for that very use, as they're defined to not convey any meaning (i.e. they don't alter the "structure" of the document). It doesn’t hurt the code.

If you can avoid it, great. But don’t worry if you can’t. There are bigger fish to fry.

Is it useful to #container, #Wrapper in every CSS layout?

Is it useful to add whole code in #container, #Wrapper in every CSS layout?

It would not be needed in every layout unless every layout was the same, and then only if they require a wrapper/container.

Can't we make layout without this extra div ?

Yes, you can sometimes dispense with the extra wrapper div.

What are pros and cons to use this extra div?

It totally depends on your layout. Often with a fixed width centered design, a wrapper makes the most sense. You can also style the body tag, but then overlays and other elements might look different or not totally fill the screen depending on their implementation.

Is it good practice?

Yes, but only if the layout requires it.

Is it useful for any type of design/layout?

It is normally useful when you need to do a fixed width, centered layout. Not sure of other uses where it is helpful.

Is it semantically correct?

Not really as the body is really a perfectly good container or wrapper so adding another one is redundant. However, it is a necessary evil in many designs depending on browser support needed or the layout that is needed. Go ahead and use it without concern if it makes sense for your project and layout.

Using Section Element for Stylistic Layout and Wrappers