HTML5
What is it? Why bother with it? And who cares?
Well this website is built on it, you can flip the hood and take a look, and it wasn’t a difficult choice for me as I was just looking to update my toolkit when it started to come to my attention. To be honest the definition is a little flimsy at the moment, so might be worth giving some meat to what I mean.
So before this site I’d started using the HTML5 declaration doctype, I’d changed the meta charset, and removed type in the script tags. But because of legacy browsers, and Internet Explorer, I’d not been comfortable using the javascript workaround to create the new HTML5 tags (e.g. Header, Footer, Article, etc.). But when it came time to build this site I was adamant I would, if for no other reason than to keep myself up-to-date and to satisfy my curiosity. Well, I think one-html5-site later I’m a fan. The big difference coming with HTML5 and it’s lesser-known-cousin microformats, is meaningful code at the presentation level. This shift brings the photoshop-to-div-soup practice to it’s knees and encourages the need to think about the naming conventions adopted and what they will mean without a stylesheet to lean on. The result is likely to out-way the fears from the xhtml-strict possy, and bring a smile to every screen-reader user in the world. It’s also shaping a future of continued open-source, standards-focussed, web practices that, with devices like the iPad and iPhones lack of flash-support, are speeding-up the adoption rate as every developer hears their Client ask why their [insert family-member here] can’t see the companies video.
But what do we get for our troubles and can we use it now? Well as already mentioned you get some new meaningful tags, but it’s the following that are stealing all the headlines (explanations curtsey of lifehacker):
Offline storage: Kind of like “Super Cookies,” but with much more space to store both one-time data and persistent app databases, like email. Actually, you can think of offline storage as something a lot like Google Gears—you just won’t need to install a plug-in to reap the benefits.
Canvas drawing: Sites can mark off a space on a page where interactive pictures, charts and graphs, game components, and whatever else imagination allows can be drawn directly by programming code and user interaction—no Flash or other plug-ins required.
Native video and audio streaming support: It’s in the very early stages and subject to format disruption, but sites like YouTube and Pandora could one day skip Flash entirely to bring you streaming audio and video, with timed playback and other neat features.
Geolocation: Just what it sounds like, but not limited to a single provider’s API or browser tool. HTML5 can find your location and use it to tailor things like search results, tag your Twitter updates, and more. Location-aware devices are a big deal.
Smarter forms: Search boxes, text inputs, and other you-type-here fields get better controls for focusing, validating data, interacting with other page elements, sending through email, and more. It may not sound that sexy, but it could mean less annoyance as a user, and that’s always a good thing.
Web application focus: Without breaking down the hundreds of nuts and bolts, it’s fair to say that HTML5 is aimed at making it easier to build wikis, drag-and-drop tools, discussion boards, real-time chat, search front-ends, and other modern web elements into any site, and have them work the same across browsers.
As for whether you can use it now, the real question is: are you happy to rely on Javascript? If so, then yes, otherwise just start adopting similar naming conventions in your class names for divs and wait until you wont have to. If you’re choosing the red-pill then read-on:
So not only did I want to use HTML5, but I wanted to get out of pushing/slicing pixels early-on and get into designing in the browser with the power of css3. But how to be responsible about it, I’d already accepted the philosophy that a site doesn’t need to look the same in every browser, but at the same time I wanted to be responsible in offering a good alternative. That’s when my research lead me to Modernizr. Brilliant, brilliant little script. I think A List Aparts recent article on this gives a great how-to on incorporating into your process, but suffice as to say that it allowed me a way to identify what the users browser was capable of and offer the best solution.
[REWIND]
But when and how to use the tags correctly? What do they mean? Well I read the hell out of diveintohtml5 and would highly recommend the chapter titled “What does it all mean?” that answers both of these questions very well. If you still need some reassurance then visit the doctor and see what they recommend for it. Recently, there’s been a few books, notably one published by A Book Apart (Jeffery Zeldman, et al), that will help condense the W3C/WAG combined guidelines into some semblance of usefulness.
Most of what I’ve talked about so far has only really dealt with the familiar upgrades, but what about all that canvas, svg, video craziness I keep seeing on digg? Well check ‘em out I’ve made a list of some of the ones that got me excited about what the future of the web might look like, as well as a few more practical tutorials on taking a mockup and coding into HTML5 goodness.
LINKS:
The Editor
Working on a Mac I’ve had some great choices to choose from when considering which editor to code my sites in. Panic’s Coda, Macrabits Espresso, BBEdit, and my tool of choice Textmate. Now I didn’t arrive easily to this choice, in fact I swayed back-and-forth between Coda and Espresso for a while thinking each one did something the other missed. It was only when I was playing around with Ruby-on-Rails that I really gave it a go. And what was it that got me hooked? I think probably the power of the bundle engine, the ability to collapse lines of code, and the Railscast theme. The first is the real gem though, and is probably what isn’t immediately obvious when taking it for a test-drive. If your interested, there’s a video or two and a book that’ll really help get you up to speed and earn back your time.
But as great as it is, I think for web development we could do better. I know recently there’s been some work at trying to get a firebug-type editor that lets you code and save within the browser view, no more cmd + tabbing. And I was thinking you could take this one-step further and have a browser-switcher that would let you switch between an i.e., webkit, gecko, view to see how each responds to the code; it could even include some magic in-builds.
