HTML5 and the Pirates code
Anyone paying attention to the latest goings on in webdesign will undoubtedly be hearing all about the wonders of HTML5, progressive enhancement and open standards.
Plenty of high profile webdesigners are leading this charge, putting an end to the hideously messy and buggy world that plagued the web for over a decade. Jeremy Keith's book "HTML5 for Designers" has been highly spoken of, selling out of its initial run having barely been released. Jeffrey Zeldman, the Webdesign Godfather and champion of the open web took the helm of .net magazine for a month to bring us the highly readbale "Standards Issue". Andy Clarke's new book "It's Hard Boiled" talks about all the shiny new toys in the webdesigners toolbox is doing it's rounds of final edits.
Beyond the individual personalities, companies as large as Google and Apple are also fully behind the move towards HTML5, heralding it as a move away from the propriatory muddle of 3rd party browser plugins and the future of mobile web browsing and apps.
And yet, listen carefully enough, there are also rumblings amidst the buzz. Not all is peachy in our brave new world.
Having decided to try my hand at this new HTML5 thing, I started where anyone else in my shoes might and put out a request to twitter asking for starting places to pick it up. Dive into HTML5 was the first to come back at me, also a tutorial that ran through how to HTML5 up a standard blog provided pointers.
And this was where things started to get a little curious.
I guess I had imagined that out of the ivory towers of W3C etc had come a beautifully crisp and clear set of documents pertaining to all manner of wonderfulness that us webdesigners could start fooling about with. Complete with clear definitions, examples and syntax they would arm us in our crusade to rid the world of unsightly presentational html elements such as <font> and <bold>. Gone were the days where our html would be cluttered with tables and other tags that tried to manage the layout of the site but say little about its content.
HTML was after all supposed to be the skeleton, the bare bones, the content, laid out neatly with no presumptions about how it should look. On those bones we could place layers of CSS, jQuery etc to bring the skeleton to life, make it move, dance, and look rather pretty.
Instead we have a series of elements that remind me a little of the old era. We now have the likes of <header>, <footer>, <nav>, <section>, <article> and <aside>. Even <small> is still in there. Hadn't we left these kind of things behind, reducing our HTML to a pure list of arbitrary and meaningless <div> and <span>?
But, and this must be the subtle distinction, these elements no longer define, or even suggest, where their content will be placed on the page or what it should look like, but to simply imply the nature of the content, it's meaning within the document. Its about a semantic description of it's content, and nothing to do with how it should display in a browser. With the microformats movement finding ways to take simple HTML and then create ways of telling a machine what nature the content actually is and therefore better understand it, HTML5's semantic elements build on this to give us more meaningful HTML elements to describe the meaning and relation of the page's contents.
Which is actually pretty cool.
{quote3}
99% of people who look at a webpage won't even be aware that it might be written using HTML5. The likes of Google however, will. And seeing your page sectioned up into neat sections that tell it about the nature of the page content can only be a good thing. Now, when it sees a list of links inside the <nav> tags it's got a pretty good idea to place high value on those links as being primary parts of the site, and not just a set of yet more links in a page of even more links. When it finds an <h1> inside a <header> it can safely assume this is the name of the site, and an <h1> inside the <article> is likely giving you the name of a blog entry or something similar...
Whilst a lot of us may appreciate the virtues of HTML5 and what it has set out to achieve, there still seems a little confusion, a collective head scratching going on. Primarily this seems to be around the <article> vs <section> (perhaps vs <aside> too). The W3 docs on this do try to distinguish what article and section may be used for, but given that we're now using HTML5 to describe the nature of the content and place no value on its position or appearance in the document, we find ourselves in choppy waters, unsailed before.
In practice this means we could have a section containing several articles each containing a few sections... as well as a few asides that too might contain articles, and within them sections... all trying to replace the div and spans with 2 more that seem strangely interchangable and happily nested inside each other. Whilst a section does seem to be made more for pulling a series of contained elements under a heading of some sort, and article is more for a body of content that might make up an article, there's nothing to stop us using these in other more creative ways. Essentially there are no hard and fast rules as to how these new semantic elements can be used, and taking a leaf from Captain Barbosa's Codex Pirata, may be better thought of as "guidelines".
Earlier this year, at the DIBI conference in Gateshead we got to hear Andy Clarke's talk preluding to his soon released "It's Hard Boiled" book. The preamble eluded to the era of film noir, the (anti)hero that stood againt the system and got things done. He then went on to show off what we can start doing with HTML5, CSS3 and other progressive techniques. Instead of designing for the lowest common denominator (aka Internet Explorer) and add a few hidden touches for those of us on a more "modern" browser (a thankfully increasing figure), the call was to instead design for the best and then provide an appropriate experience for those on the lesser browsers.
Sam Brown had previously summed it up nicely:
{quote1}
I've never been a massive fan of the old film noir, being more of a Batman or Pirate fan when it comes to anti-heroes. Everyone know pirates are cool, that's a given, and thinking a little like one may well open up that bit of creativity and courage to try your hand at HTML5 and CSS3. Certainly, users of sites will appreciate it even if they can't actually put their fingers on it, and users stuck on Internet Explorer will likely not even be aware of the movement going on beyond their somewhat backwards browsers.
It is a brave new world... yarrr!
{quote2}