Page-Level Container Discussion for HTML5

This post originally appeared on my blog.

HTML5 logo — I am the 'alt,' not the 'title' As I started down the path of my first HTML5 web page I spent a good deal of time trying to understand the sectioning elements of HTML5 — nav, article, aside, and section — as well as the major structural elements such as header and footer.

Trying to find the container to wrap the content of my page turned out to be the hardest part of the process.

Are We Talking about a Content Element?

Some elements more obvious in their intended use than others, but I felt that there was no specific element to denote the main content of the page. I struggled with trying to figure out whether my content should be in an article, a section, or even just a div.

Apparently I am not alone. Even folks on the WHATWG mailing list were asking the same question. And then I saw this feedback from Hixie:

The element that contains “a website or a blog entry’s main content” is
body, as far as I can tell.

It seemed like that was the end of that. Clearly he had considered it and felt that there was no issue.

But in the past week on both the WHATWG mailing list and the W3C HTML Working Group list this topic has resurfaced. And there are some good arguments in its favor.

Why Should We Get a Content Element?

One argument is that developers are already coding a solution to this, often by specifying a div with an ID of “main” or “content.” In this scenario, the concept of paving the cowpath, where HTML5 is intended to reflect how developers actually code web pages, comes into play. If it’s already appearing in code, perhaps formalizing it can allow for consistency in structure and semantics. This is, after all, how we got nav, aside, and others.

Another argument centers around ARIA use for accessibility. Since elements like header and footer have built in ARIA roles, developers who care about accessibility want an element with a similar built in role for the main content. Currently, these developers put role="main" into the div or other element that wraps their page.

The argument in favor of a content / main / maincontent element is then a matter of demonstrating an existing pattern and an end-user benefit, in this case in the form of accessibility.

Why Shouldn’t We Get a Content Element?

The flip side of this argument is that we’re just creating another element to add to the tag-soup that developers are already contending with in HTML5. Evidence today shows us that 95% of the pages that use ARIA ultimately use role="main" properly. Those pages that use ARIA at all only make up 1.3% of a 10,000 page poll, however.

Those users who understand and want to provide accessibility are already doing it with ARIA. Adding a new element may help get more developers to accidentally support accessibility, or it may confuse the issue if its use isn’t restricted to one instance per page.

What Might This Content Element Look Like?

Steve Faulkner proposed a new element, maincontent, on the W3C HTML Working Group list yesterday, pointing to his own draft to start discussions. Ostensibly he concatenated the commonly used IDs of “main” and “content” that already exist in the wild when naming this element.

Where it goes from here is anybody’s guess. Discussion is happening on both lists, but with all the other activity and the push to start to wrap up the specification it may get pushed out. Perhaps this time next year there will be a solid proposal with well-formed arguments on both sides, but I wouldn’t expect to see a new element by then.

Related

Advertisements

No DHTML, Please

Originally Posted by Adrian Roselli on January 25, 2012, on his blog.

HTML5 logo mocked up as DHTML logo.The trend continues where I speak to clients, vendors, young developers fresh out of college, and even the teachers/professors who instruct them and they don’t understand that HTML5 and CSS3 aren’t the same specification. I have repeatedly shown an HTML 4.01 site with CSS3 to explain that they are each distinct specifications which can be applied in different combinations of different versions. This is further complicated when JavaScript is folded into the mix — some folks even think jQuery is part of the HTML5 specification.

I am repeating a request that when we who know better (developers, tech writers, robots named Frank) speak about discrete specifications, we refer to them as such.

When I talk to another developer about a feature, I want to know that when one of us says “HTML5” we are both talking about that particular specification. When we use terms like “WOFF” or “WebGL” I have comfort knowing the developer has a particular set of technical standards in mind, but when one of us says “HTML5” we each have to pause to consider what related specification the other might actually mean.

It seems fair to raise what sounds like a semantic point when we are discussing a specification that is all about encoding content in semantic and structural elements. I don’t think I should let this go, otherwise it feels like I have failed the semantic goal of HTML right at the outset.

What Motivated the Mini-Rant

Another free and fantastical service was released to the web development community on Tuesday, HTML5 Please. The same folks who also brought us sites like HTML5 Boilerplate, Modernizr and CSS3 Please are the fine team behind this resource. And this is part of the reason why I am so frustrated. Each of them knows the difference between HTML, CSS, and unrelated specifications like WOFF, SVG, Geolocation, WebGL, and so on.

In a (Google-doc-brokered) conversation with Ian Devlin (author of HTML5 Multimedia: Develop and Design), Paul Irish (one of the folks behind HTML5 Please) agreed to add a disclaimer to the site for the chronically unlikely-to-read-any-specifications-or-bother-to-know-the-differences-among-them. Mr. Irish made short work of it, too:

While named HTML5 Please, this site discusses features beyond the HTML5 specification, coming from CSS, SVG, and the greater Open Web Platform umbrella.

On Wednesday I went back to the site and noticed that the disclaimer was gone. I tweeted about it and was ultimately directed to a bug/issue report that provided justification for its removal:

[…] However, HTML5 represents an umbrella term for all new technologies (as is inferred from platform.html5.org). Also, the specification itself is now a living standard known as HTML and not HTML5.

Of course I was motivated to leave a comment:

I feel the ship has sailed when trying to communicate this point to the general public, tech writers, bosses, clients, and small children up the street. However, since the site is aimed at developers I think it does a disservice to not remind them that HTML5 means a very particular specification, and that it makes it easier in the future to cite new specifications that will be supported on the site (as they come up), but are otherwise distinct. For those who do know better (me, a couple folks above), it just looks like the site got it wrong and doesn’t understand the difference itself.

If we as technical professionals cede the meaning of HTML5 when speaking to other technical professionals, we are falling prey to marketing speak that has no place in discussions about specific technical matters.

That’s it, that’s the background. I’ve explained my thoughts on this before and am concerned that HTML5 has become a distilled marketing term that, unlike DHTML and Web 2.0, neither of which shared the exact same name as the version of a technical specification, only leads to confusion when developers are interacting with marketers, bosses, clients and vendors.

You may read previous variations on this rant here: