Monthly Archives: July 2010

HTML5 Facts and Buzz

What is HTML5 really? Peter Paul Koch concludes that HTML5 means whatever you want it to mean. He quotes Jeff Croft:

It’s already too late. “HTML5” has taken on meaning as a marketing term and is being used as such — not least by the browser vendors. Any opposition is pointless.

In the past, HTML4 has been called just “HTML”. It is important to realize that HTML5 isn’t completely new, HTML4 has been evolving into HTML5 for years. Here are my responses to some common misconceptions.

  • To do animations, you need plain JavaScript not some new thing in HTML5.
  • Flash can be used in HTML5. The two are not mutually exclusive.
  • Canvas does not aim to meet Flash functionality.
  • HTML5 is not a synonym for canvas drawing.
  • HTML5 is not a synonym for iPad-compatible video.
  • The HTML5 standard is not complete, but using features of it that are implemented in a user’s browser is NOT “risky”. Web developers should use JavaScript to detect available features and fall back to slower or less pretty alternatives when new features are not available. See A List Apart’s M&M analogy of Progressive Enhancement.

Moving past what HTML5 is not, let’s discuss what is new in the browser world. Below are some highlights.

New HTML Elements

  • Canvas—The <canvas> tag that gives low-level access to draw things. Many frameworks are making it easy to use the Canvas to make a rich web experience. DiveIntoHTML5.org reference
  • Audio and Video—Using <video> and <audio> tags, developers can embed video and audio and let the browser add it’s own controls for play, pause, volume, etc. It eliminates the need for the Flash Plugin which has higher overhead and is not available for all browsers. As of this writing (August 2010) Safari, Mobile Safari, Chrome support the MP4 (h.264) video format in video tags. DiveIntoHTML5.org reference
  • Form Elements—New input types such as date, color, number range, telephone and email allow browsers to provide a better experience. DiveIntoHTML5.org reference
  • Semantic Markup—Tags such as <nav> and <figure> give a better way for developers to show intent and search engines to provide meaningful results.

New JavaScript APIs

  • JavaScript Web Sockets—Web Sockets provide a way for servers to service more users at once while significantly reducing response times. Instead of a traditional page-by-page web, we deliver content by events triggered by the browser OR the server.
  • Server-Side JavaScript—A Stack Overflow user gives a decent list of advantages of NodeJS, the premier Server-Side JavaScript engine.
  • Web GL—Bleeding edge browser versions can show off hardware-accelerated 3-D canvas operations. Say hello to XBox Browser Version.
  • JavaScript Language Additions—Browsers are starting to implement APIs that allow developers more power with things such as objects and loops. Kangax is tracking progress of these implementations.
  • JavaScript Parse Speed—Ever since Chrome came to market, browser makers have been pushing the envelope for speed. Wikipedia talks about this speed race.
  • JavaScript Touch Events—Events such as mouseover and keydown are difficult or impossible to capture on some mobile devices. But touch-capable devices can fire new events such as touchstart and gesture start. Peter Paul Koch has done some extensive research: Slideshow, Article
  • Browser-side Storage—Traditionally, desktop apps had a huge advantage over web: the ability to store data offline to provide a better user experience and consume less server resources. DiveIntoHTML5.org reference

New CSS Declarations

  • CSS Alternatives to Images—Gradients, shadows and rounded corners can now be done CSS–eliminating the need for downloading such images.
  • CSS-Based Animation—Browsers can run animations quickly and lean on Hardware Acceleration to make Animations easy and smoother and less processor intensive than JavaScript animations.

We are in the post-IE6 era of web development and us developers have a lot to be excited about!

And test your browser’s HTML5 support on html5test.com.