The browser wars are far from over. Technologies like Java applets, Quicktime, and Flash long dominated the media side of web. Originally, writing web pages was a lot more about being able to copy source code from others, and grow. As of this week, the World Wide Web Consortium’s newest toy has full support by all four of your favourite browsers.  Safari 4.0, Firefox 3.5, Chrome 3.0 (not yet released), & Opera 9.6 partnered with Open Source initiatives are all about to drop a bomb on proprietary media solutions. Welcome to your miniature guide to html5 Way back when the web was young, HTML4 was like the zenith of easy to learnweb page lingo. While XHTML was a stricter variant on HTML that was designed to put pressure on browser developers, it didn’t offer many new features. Companies like Macromedia & Sun flourished in the nonsense that has been the browser wars, and indeed many people still use Internet Explorer as their primary browser. Nevertheless, let’s look at the differences between HTML4 and HTML5 and what it will mean for the future of web page design.

Added Features (in order of awesomeness)

  • <canvas> : like a Processing sketch that allows 2D graphics drawing. With enough effort, you can pull off full flash-like animation without any plugin whatsoever. Links: Cheatsheet \ Examples
  • <video> : no more embeds or objects! Looks just like an <img> and allows parameters for differenct sizes when zoomed and not zoomed. Youtube is already trying it!
  • <audio> : no more making a flash movie just to play an mp3. works just like the video tag and supports ogg vorbis.
  • Note: Both the audio and video tags are being held back for their ogg support due to Apple & Nokia apposing the file format. Link
  • <header> <nav> <article> <section> <aside> <footer> : the new building blocks for pages meant to save you on div tags with complex alignment css. Links:
  • <a> : pinging was added in the attributes so that a server can be notified when you access a link. Kind of creepy…
  • <time> : Finally browsers might start to automagically switch times that are out of your time zone so that you can read them properly if this tag is used with some extra zazz. Can be used for dates too.
  • tabindex : an attribute that can be added now to anything for ease of tabbing through elements
  • hidden : another attribute usable on anything that saves you from using style=”visibility:hidden;”
  • Drag & Drop API : meaning web applications will feel more like real applications while uploading & downloading.
  • Offline Storage Database : better than cookies
  • Document Editing : not sure what that means, but it sounds good, and has to do with the contenteditable attribute

Removed Features (in order of sadness)

  • <center> : sometimes I just don’t know any other way to force things to center-align. Oh well, stylesheets will just have to do. *tear*
  • <font> : Oh font tag, what times we had in olden days and you filled my code as if you were blades of grass in a field of summer time.
  • <strike> : I’m not sure anyone uses that stupid tag anymore. Seems about as useful as blink.

To sum up, web browsing is getting a lot more streamlined. Firefox & Chrome are using a new engine for running javascript that’s nearly 100 times faster than the previous method, which is what is allowing for crazy things like the canvas tag. Take a look at Processing.js, &  Chrome Experiments for more canvas goodies.

Chrome Experiments