Why the lines get so gray

[weegillis]

Whenever a new implementation of the language of the web rolls out, we're right back at the starting point, it seems, where nobody can settle on what's good practice and what's not. I've just finished going over the use of structural elements SECTION (new) and DIV (old) and thought I had hit on something I could rely upon in this HTMLDoctor article, The section element, (September 2009) wherein it interprets the spec as saying SECTION is not a style hook or wrapping container, but just a 'blob' within content. So I raced around changing all my code (there really isn't that much, yet) to match this interpretation. I removed SECTION and dropped in DIV, as suggested.

Then today I'm reading on TechRepublic, in the article, HTML5: The next generation, (July 2011), (my bolding)

What does HTML5 change?

As I briefly mentioned, there are major changes in the doctype declaration, the character set declaration, language values declaration, the way HTML documents are structured and sectioned, how scripts are called, and much more. The move toward semantic markup means that generally the use of IDs is recommended and the use of classes and Divs is now outdated and unnecessary. That’s right; I said Divs are now a thing of the past! With the structural and sectional elements available in HTML5, the use of Divs should only be added to HTML code as a last resort, and when all other element options have been exhausted. In essence HTML5 cures the cases of Div-itis and Class-itis.

Well if that doesn't just get you right where it hurts! So if SECTION is not the right structural element (a blob) and DIV is outdated and reserved only for the eleventh hour, then what is the correct structural element to use? ARTICLE? Well, ... no. Like SECTION, this is a semantic tag meant to wrap,

An independent piece of content...

My bolding. Quoted from, The article element.

Okay, so an ARTICLE is an independent, standalone segment consisting of sections, figures, etc. What does it get wrapped in to help it into the flow of the document, assuming it's not the only thing in the document? It's questions like this that get independent, standalone developers beating around the bush and going off in a completely unpredictible direction only to propagate a storm of incorrect markup. Not on purpose, but intuitively. WE make up our own interpretation and implementation of the specification and write it into our templates and methodologies only to find out years later that we got it wrong.

Just to throw a wrench into things, I discovered yesterday on the Mozilla Demo site one example [Awesome HTML5 Dashboard] where clearly SECTION is the adopted style hook. There are no DIV tags that I could see, save "plzwait". Is this a bit gray, or am I just going gray?

[HTMLBasicTutor]

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.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

Note: The section element is not a generic container element. When an element is needed 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.

Editor's Draft 6 August 2011 HTML 5 - 4.4 Sections - 4.4.2 The section element

[weegillis]

And even they say to use a DIV, yet they don't bother to give an example. When ... When what?

A July 28 article I ran across today pretty much made up my mind. Nobody's certain of a GD thing. Balls to the wall! We're on our own, again. Thank you VFM, W3C!

Quoting the article:

Section elements have been added to the specification as a way of semantically representing content on the web. This is the specification’s cure for the rampant div-itis and class-itis that has plagued markup coding practices in recent years. Web authors are strongly encouraged to view the <div> element as an element of last resort. When no other element is suitable and all section element options have been exhausted then the <div> can be utilized. Use of the <div> element instead of more appropriate sectional elements leads to accessibility issues for readers and becomes a maintenance headache for authors. Semantic meaning may require adding an ID and this is recommended: i.e., <article id=”blog”>.

Read the full article: Using sectional elements, by Ryan Boudreaux.

From this I gather that it's out with the old (div-itis and class-itis) and in with the new (ID and contextual selectors). Well that's not really new, is it? But the semantic tags do give more ways to drill into context, making it much easier to rid our code of class attributes.

[DonOmite]

And I remember when we were all excited with the advent of div, span, etc etc. I think they change things JUST to change things. Why not make DIV do what SECTION does and leave the naming alone? Sounds like they change things to justify their exsistance.

[weegillis]

The reasons they give tend to center around accessibility and 'one write for all devices/user agents'. I like the direction things are going, though it is in a direction moving away from hobbyists like myself. There is more and more technical grounding needed today than was the case ten years ago. One person sitting in the garage can only cover so much information, and make good use of it.

I still say that this is a great time to be starting out on the learning curve. The world is a bed of oysters when we look at the technologies at our fingertips. Learning has never been easier, especially when we look at the plethora of learning resources and tools available today.

[keyon]

What? A website with no DIV tags? What will the CSS Gestapo think about that?

[weegillis]

What? A website with no DIV tags? What will the CSS Gestapo think about that?

They've had five years of give and go on the subject, but the latest seems to be where they are drawing the cut off. DIV is out, but still part of the specification, as a last resort. Put on your thinking cap--every instance of SECTION will need to be thought through. If it's section, according to the recommended usage, then it needs a headline (Hx). If it doesn't fit the criteria, then it must fall back to being a DIV. Ordering of content to meet semantic requirements, though, the fall back should rarely if ever be necessary.

[alphaomega]

................................ I like the direction things are going, though it is in a direction moving away from hobbyists like myself. ......................

I say you pretty good hobbyist though.