Using section element for stylistic layout and wrappers

Question

I often use divs for stylistic layouts(pieces of markup with no content, specifically focused on the design) and wrappers on sites. With that said, Why should sections not be used for this task?

Does a section by itself have an inherent semantic meaning that discourages it being used for wrappers?

Almost every page I use has some wrapper or stylistic layout of some sort. Wanting to phase out divs, I wonder, if sections can be used for wrappers and still be semantically correct.

Answer 1

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.

Answer 2

I'm not an expert in semantics, but I believe that using a section as a wrapper for an entire site, for example, overrides any semantic function of this tag. That is, search engines, etc.. will interpret it as a div.