Ambiguity About Structuring Elements

Hello W3C community.

I really appreciate the opportunity to bring this question before you.

I am an 18 year veteran web designer and developer. Sadly, I'm still struggling with some questions that I so desperately want to understand. And those have to do with the HTML5 structural elements. (section, aside, article, etc.) From the W3C specification, I interpret these elements as giving context to the page, helping the page have more meaning, but are not to be used for styling purposes. However, that is my interpretation.

The trend that I am seeing in modern web design is that these structural elements are also being given a styling function. At first, this seemed to be a breach of what I understood the elements' purposes to be. However, seeing them in use, I could understand why it was being done. Why have an extra “div" when you can just use the proper element to style it and its contents. One less “div", right? However, there is no clear instruction on whether or not this a correct practice.

As an example, the W3C specification makes this special note for the “section” element:

> "NOTE: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.” (emphasis mine) http://www.w3.org/html/wg/drafts/html/master/semantics.html#use-div-for-wrappers <http://www.w3.org/html/wg/drafts/html/master/semantics.html#use-div-for-wrappers>

None of the examples show these elements with classes or IDs. All we see (at least with “section”) are the ARIA roles. The problem is that the specification never says whether these elements are to be used for styling purposes at all. It just says how they shouldn’t be used.

What needs to be clarified is if these structural elements are intended to have classes and IDs for styling purposes when they are used properly and semantically, or are they intended to give the page content semantic meaning only?

I understand that some of the spec is left open for interpretation. I also understand that there is the “letter of the law” and then there is the “spirit of the law”. However, I’m not interested in what is trendy, more convenient, or what you CAN do with these elements, I want to know what is RIGHT, or at least what was intended and is best practice.

If anyone knows the correct answer to these questions, I (and probably many others) would be immensely grateful if you would share your insights.

Thank you so much for your time and help.

Adam Spelbring