RE: Ambiguity About Structuring Elements

Hi Adam,

 

The key to all of this is Semantics, where these new structural elements have a specific semantic associated to it (as opposed to ‘just’ a <div>, which has no semantics). Visually, this may not seem like a huge deal, but for well-formed data (or non-visual UI) it *is* important, so the spec is basically saying use the right tool for the right job, and don’t try to bang a nail in the wall with a screw-driver, because it may cause issues down the road. (As an accessibility advocate, this is important to my constituents!)

 

Therefore, if the content *belongs* in a semantically annotated container (<aside> for example), then use that element, and style away to your heart’s content (yes, any element can take any of the permitted attributes, and the structural elements can take both class and ID). However, if the purpose of your HTML container isn’t really defined by any of the semantics of the structural elements, THEN use a <div> and style away.

 

Speaking of styling, you DO know that you can use attribute selectors in CSS and focus on the ARIA attributes to attach styles to elements that way, right? For example you could do this:

 

  <div role=”tooltip”>Foo</div>

 

… and then use the role as your styling hook:

  div[role="tooltip"]  {background-color: yellow;}

 

Helps you keep your code to a minimum – no need to over-stuff your classes.

 

HTH

 

JF

 

 

From: Adam Spelbring [mailto:adam@avsdesign.net] 
Sent: Saturday, May 30, 2015 5:33 PM
To: public-html@w3.org
Subject: 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

 

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