John Allsopp has a thoughtful piece that races some old concerns about the new tag set in HTML 5, and how we will ever be able to jump on that train when the cabooze still has IE.old train cars.
It is great to have new semantics for <section> and all, but what will browsers do with these new tags?
John walks through a simple example with the new tags, shows some issues, and then wonders if we could use the existing extension points (attributes):
Let’s invent a new attribute. I’ll call it “structure,” but the particular name isn’t important. We can use it like this:
HTML:
Let’s see how our browsers fare with this.
Of course, all our browsers will style this element with CSS.
HTML:
But how about this?
HTML:
In fact, almost all browsers, including IE7, style the div with an attribute of structure, even if there is no such thing as the structure attribute! Sadly, our luck runs out there, as IE6 does not. But we can use the attribute in HTML and have all existing browsers recognize it. We can even use CSS to style our HTML using the attribute in all modern browsers. And, if we want a workaround for older browsers, we can add a class value to the element for styling. Compare this with the HTML 5 solution, which adds new elements that cannot be styled in Internet Explorer 6 or 7 and you’ll see that this is definitely a more backward-compatible solution.
John then goes on to discuss the potential use of the role attribute, and more.
It feels like there are two issues here:
- Are new tags the right way to provide new semantic value
- Are there work arounds to back/forward compatibility.
Without compatibility, it will be impossible to get this off the ground for many people. What if we mix both worlds, and a shim is put in place to convert the new tags to divs and the like at runtime for browsers that don’t support it. Is that enough?
You can get IE to support new tags as shown in this example by using document.createElement().
