Tuesday, February 1, 2011

An Overview of HTML5

by Jonathan Shoaf

Apple's recent refusal to support Flash is the latest of many headaches web developers have had to endure as the web has matured but standards have been slow to respond. I mentioned this to a Flash developer at lunch today and I could see the frustration in his eyes wondering how he's going to meet the needs of his customers who use iPads. Many people in the eLearning industry are facing this challenge. Apple is stopping support for Flash on the premise that HTML5 can solve all the development challenges that previously could only be solved through Flash. Regardless of how you feel about Apple's decision and whether or not you think Flash should coexist with HTML5, HTML5 looms in the not so distant future and it is important for web developers to understand what it is.

Web developers pushing to create a better and better online user experience has resulted in a patch work of web browser specific tags and a variety of plug-in technologies scattered throughout the web. The result has been a good web experience for most web surfers; however, many headaches for those of us being asked to create cutting edge content that must work on a variety of web browsers. Standardizing these headaches so that web development is more consistant across all web-based devices is the goal of HTML5.

How did we get here?

As the popularity of the web grew and users demanded more functionality, HTML evolved as web browser manufacturers, like Netscape Navigator and Internet Explorer, and members of web communities recommended and implemented new features. Many of those features would get adopted by the rest of the web community and thus become a part of HTML. The first standarized release of HTML came in 1995 with HTML 2.0. Lack of wide support for that standard led to the development of HTML 4.0 in 1999. It did a better job of stabilizing the language and is still the major standard used today.

XML influences HTML

As the benefits of XML become more apparent, many thought it would be a good idea to meld HTML and XML to create a more structured approach to web documents. This began with the XHTML 1.0 standard. Some would say this standard was not keeping pace with the growth of the web. Developers, like myself, worked to adopt it but ultimately abandoned it because of issues with its structure and in the way it was implemented by the web browser manufacturers. Between 2000 and 2004, growth of high bandwidth connections resulted in increased user demand for applications driven by technologies like Flash and AJAX. XHTML 2.0 was then creatd to address this. However, issues such as a lack of backwards compatibility made it slow to be adopted. By 2009, it was apparent XHTML wasn't going to win over the web community.

The beginnings of the successor to HTML 4.0 first started to emerge in 2004 and later it was labeled HTML5 in 2007. In 2010 with the help of major technology companies like Apple and Google, HTML5 support grew dramatically as web browser manufacturers started to support parts of the standard. Now developers are starting to take advantage of this support and looking for ways to add HTML5 functionality to their web applications.

HTML5 simplifies development

Most of what's new in HTML5 is already being done on the web. It's just being legitimized and made easier with the new specification. One example of this is the way forms work. In particular, date picker functionality is being built into the web-browser with HTML5. Until now, web developers had to create a date picker from scratch using CSS and JavaScript or they had to purchase a library of code that contained the functionality. With HTML5, all you need to do is set the input type to "date" and a web-browser that supports HTML5 (on your mobile phone, desktop, or tablet) will automatically attach a date picker to that input item.

HTML5 structures content

Previous versions of HTML, while searchable by machines, were often difficult for automated programs to interpret. HTML5 tries to improve this by adding new structural tags such as sections, articles, asides, navigation areas, header groups, headers, and footers. This organization makes it easier for accessibility applications to interpret how the content is organized allowing people with disabilities to browse the web quicker. This also makes it better for search engines to find the right content. Expect better quality searching once HTML5 is in wide use. Also, content agregators can do a more appropriate job of automatically sorting through web pages to republish and reuse the content.

HTML5 allows developers to animate

The HTML5 specification includes the ability to create a drawing area, called a canvas. This will allow developers to render graphs on-the-fly within a web page, create photo effects, and do animations. The ability to draw to the canvas is one of the reasons people think Flash may not be used as much on the web in the future. Flash is not going away any time soon; however, HTML5 does provide functinality that was previously only available through Flash. If you have a browser that supports HTML5 (you can go here to find out), check out this math-oriented game created using the canvas.

HTML5 does much more

If you're developing content for the web, there is a lot more you'll want to know about HTML5. Here are just a few more capabilities:
  • Geolocation for the increasing number of users accessing the web from mobile devices. And, this works on your desktop too! (example of geolocation)
  • Ability to provide better audio and video playback optimized based on the web device you are using.
  • Offline storage so web applications can still work even when you don't have a network connection.
  • Drag and drop which was near impossible to implement previously. For example, you can drag and drop a file from your computer into the web browser. (example of drag and drop)
Effect on WBT development

HTML5 favors tools like Lectora that are currently HTML-based. Most likely, these tools will allow you to do more with your development efforts in the HTML5 future. Tools like Captivate and Articulate, which are Flash-based, will probably need to adapt or change over to HTML5 in the long run. Apple's lack of support for Flash is already becoming a problem for WBTs built with these tools. While Flash will continue to be an important part of the web, Adobe will most likely use its strength in Flash development tools to create HTML5 development tools. Adobe is also working on tools that can convert from Flash to the HTML5 canvas. Remember, the need to switch from Flash to HTML5 could change at any time depending on the whims of the major web-browser manufacturers and what your corporation standardizes on. Sitting on the fence with decisions related to this may be the prudent thing to do.


  1. Growth of business is very fast to use this blog ideas in the future.

  2. Very interesting! I had not heard of the "canvas". I've got some reading to do!!! Good stuff, Jonathan!

  3. Nice overview. One point to add is the following: html5 is to flash what flash was to shockwave (the original version output from Adobe Director). Many of us Director developers tried to avoid its demise only to find our market on the web get smaller and smaller even though its capabilities far out performed flash. Unfortunately, like Authorware and Director in the past, there are now huge libraries of content that will need to be formatted for the Apple line of mobile devices. It is my feeling that the almost religious fervor around the brand has overshadowed the needs of the organizations which the devices are being used.

  4. Great points, Ken. I completely agree with your comment about the brand fervor overshadowing the needs of organizations. On a related note, I was at a conference this weekend where people were excitedly talking about creating apps for iPhones and Android. When I asked about Blackberries, which are still standard issue for most every corporation I know, you could have heard crickets. Progress is great, but organizational needs must still be met.

  5. CM Group's Luminosity Studio rapid eLearning authoring toolkit fully supports HTML5 eLearning output. It's fast and easy to learn so may be worth checking out.

    They also do Luminosity Lightshow an HTML5 based software application simulation tool which is low cost and produces good results

  6. Hello there I am so delighted I found your blog page, I really found you by mistake, while I was researching for something else,
    Regardless I am here now and would just like to say many thanks for a remarkable post and a all round enjoyable blog.Please do keep up the excellent work.
    industrial training indore


Thank you for your comments.