If you’ve had much to do with web design recently, you may have heard of HTML5. HTML stands for Hypertext Markup Language and has a lot to do with the structure of web pages on the Internet.I won’t bore you with the technical details – basically, HTML5 is the latest “version” (more accurately specification), and it does have a few cool features. Even if you aren’t interested in the technical bits, it’s worth reading on, there are some interesting links.
So, what’s new in HTML5? Well, many things, but the top three are:
- Semantic elements. You can now refer to “header”, “footer”, “nav” and “article”, which means you don’t have to wrap them in divs.
- Video and audio tags. Although this contains many caveats, it should mature well…in time.
- Canvas. I was sceptical, but I’ve been converted by some very good – if sometimes sketchy – examples.
Semantic Elements
OK, so let’s start with these semantic elements. Basically, in the past, when you wanted to write a header, a footer or a sidebar, or even a post, you had to wrap it in a div tag. This was a bit silly as it is a structural part of a document, just like a heading, and deserved recognition as such. And now they have it, and I’m happy, because my code will look nicer.
Video & Audio Tags
Before HTML4, the best way of showing video in a browser was, to be honest, by using Flash. Flash is good, but it’s closed source and not the easiest format to put video in to, at least compared with native video formats – and embedding is a pain too. The solution in HTML5 is to include native video and audio support. The slight problem with this is that there is no codec that is currently supported by all the major browsers. Therefore, for now at least, Flash is still easier. In time, however, if there does become one universally compatible codec, this will be fantastic. But until then, it’s a lot of effort.
Canvas
Yes, I’ll admit, I was sceptical. But I have to say, I’ve been converted. This is potentially awesome. By using a little Javascript, you can render all kinds of things – natively. Originally, I thought this was basically a web-based version of MS Paint, but then I saw things like this:
- Canvas Pool – it’s a bit skeleton, but I’m sure it could be polished and run quite nicely – think of it as a proof of concept;
- Wave – a visual representation of Tweets – click near a bubble and it pops, revealing the Tweet. Nice!
- Zwibbler – like an online version of xkcd, where you get to write the comic. Ace.
- The Wilderness Downtown – a music video for Arcade Fire (some band), which incorporates the user’s geographical information in the music video itself. Oh, and you can write your own postcard too! It’s fantastic, and uses multiple browser windows too.
These proof of concepts look great. As this matures, I’m hoping to see some great stuff. If you want to check out any of these sites, you’ll need to use Firefox, Chrome or Safari. Or IE9, possibly.
Coming soon…CSS3. Bet you can’t wait!