The world of the web is changing, perhaps more now than ever. With vast numbers of people now regularly online the web is no longer the province of geeks and academics, but a valuable part of everyday life for many. So it stands to reason that the web itself – and the collection of technologies that make modern websites possible – will evolve. One of the biggest evolutions, in my opinion, is HTML5.
First, some history. HTML is the main language of the web, it’s what makes web pages work. It’s been around for a long time, originally being developed to provide a way to markup – that is, describe the structure of – documents online back in 1991. Tim Berners-Lee, called the father of the web, is director of the World Wide Web Consortium which oversees the webs continued development including HTML. The current version of HTML is 4.01, defined in December 2001, and work is continuing on version 5.
I’ve written about HTML5 a couple of times before, as I think it has massive potential to impact the web for the positive. Progress can appear slow, in fact both of those articles are from 2007, but I understand there is a huge amount of work to be done to get something off the ground. The really great news is HTML5 is already here. At least or some browsers.
If you’re lucky enough to use the latest version of Firefox, Opera or Safari, you’ve got many of the new features in HTML5 already. Bruce Lawson has been kind enough to create a page where you can test some of these, namely header, footer, aside, nav and article. Internet Explorer, the thorn in the side of every web developer, doesn’t support these new elements, so by default that test page won’t work. basically, if IE doesn’t understand those elements, you can’t style them with CSS or manipulate them with JavaScript. As John Allsop said in a recent A List Apart article:
[modern browsers having HTML5 capability] looks like an excellent start. But when we try styling, for example, section elements with CSS that looks like this:
section {color: red}…most of the above-mentioned browsers manage to style the element, but IE7 (and so presumably 6) do not.
So we have a serious backward compatibility issue with 75% of browsers currently in use. Given the half-life of Internet Explorer, we can predict that most users will be using IE6 or IE7 even several years from now.
Unfortunately, if you are looking for alternative solutions to the CSS problem, putting class attributes on your section elements and then trying to style them using the class value won’t work in IE. Perhaps there is some kind of workaround out there, but unless there is, that looks like a deal breaker right there. However, the deal is back on. You’ll notice on Bruce’s test page it works in Internet Explorer 7 (I haven’t tested 6 yet). How? Simple, by using a JavaScript trick mentioned by Sjoerd Visscher from w3future.com. All developers need to do is “create” the new elements for IE like so (using conditional comments, as we’re tidy boys and girls):
<!-- Dirty JavaScript hack to make IE able to apply CSS to elements
that it doesn't usually know about, plus miscellaneous IE rules -->
<!--[if IE]>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<style type="text/css">
header *, footer * {text-align:center;}
#wrapper {width:100%;} /* otherwise, IE halves the width of <nav>*/
</style>
<![endif]-->
That script ensures only IE browsers see it, then creates the new HTML5 elements using JavaScript. That means we can then style those elements how we wish. This, dear readers, is how a new age on the web is born.
You may think I’m making too much of this, but I am genuinely excited about the possibilities of new elements – and I’ve not yet even mentioned the audio and video elements, which do pretty much what you’d expect. For me, even a few extra semantic elements like nav and article is going to have a positive impact on the web.
Here’s a sample scenario. You go to Google (other search engines are available) and search for your favourite type of moth: Large Deathwing. The results you get back are generally pretty good, but you also get a lot of results including the word “Large” from different parts of the page. Things like “View large text size”, for example. Poor example, but you catch my drift.
With these new HTML5 elements, it’s possible that search engines will be able to ignore text in non-important sections of pages, like the navigation or any asides. Only words in valid article elements will be retrieved and displayed for your search. Well, that’s the idea. I’m not so naive to believe it will happen quickly (or even at all) but a greater amount of semantic information being built into HTML is a good thing.
I’m hopeful for the future. And as I’ve said a number of times I’m looking forward to putting this stuff into practice. Perhaps thanks to Bruce’s test above, I can start doing that for real.