Every once in awhile its a good idea to look forward and see if we can't peek into the future. When you talk future and the Internet you talk CSS3 and HTML5.  Both will give us new technology to make web pages more like going to the movies with interactive video and cool special effects.

Ambient Light - changing ambient theatre lighting

Bringing new technology to the web takes time. Fully supported HTML5 is not scheduled to be the official standard until 2022. That seems like a long way off on a journey that started in 2007 with the first working draft of the standard.

As a contrast, our current high definition television standards in the United States, started in the 1980's, the first unified draft happen in 1993, with the first test transmission in 1996. The first hi-def TV's came on the scene in 1998.  Now they're everywhere, and every station is broadcasting in hi-def.

Like with the television progress, just because the standard will not be official until 2022, doesn't mean it won't be here a lot quicker. Why? Well we have, like with television, browser wars. Each browser maker will try to be the first with the new technology, so expect HTML5 a lot quicker.

With the forthcoming HTML5 is the death of XHTML2. Work on XHTML2 stopped dead late last year.  HTML5 is it.  Good, now we don't have the confusing multiple HTML standards.

Through out this article I've had to put these new tags in "quotes" so they will render correctly as they are not implemented in all browsers yet.

What's new? HTML5 is much like XHTML with everything lower case with closing tags.   Those long "doctype" tags in the beginning of the page now are simply , "!doctype html" nice.  Mathematical markup language, MathML and vector graphics, SVG, can now be embedded in the page.

Blow Up - using a mouse event and synchronized animation

To improve the structure of the HTML page we have new elements.  There is a "section" tag as a way to divide the page with "hgroup" as the header of the section.  "header" and "footer"  are now content tags, along with "nav" to indicate navigation and menus.   "figure" represents a separate image section. "article"  is an independent document in the page.  "aside" a slightly related piece of content.

There are several completely new elements. "video", and "audio" with their own APIs which could gradually replace Flash.  The new APIs will allow a programmer to edit and create videos and audios, and enable offline applications.  A drag and drop attribute API will move screens and content around with the mouse.

There's "progress" to show progress when downloading, for example, and "meter" to indicate, say disk space usage.  "time" for date and time.  Then there's "datalist" used with a new input list attribute, here's an example that should get you excited.

" input list="browsers" "
" datalist id="browsers" "
"   option value="Safari" "
"  option value="Internet Explorer" "
"  option value="Opera" "
" option value="Firefox" "
" /datalist "

The two most exciting new elements are "canvas" and "command".  Canvas renders dynamic jpg, gif, and png's graphics, on the fly. Command goes with canvas and allows the user to issue a command. Can you say virtual reality, games, and interactive video.

What will die and is gone is a lot of the old HTML tags that are better served in CSS, such as: align, background, bgcolor, border, center, height, width, and font, for example.

Get It Love - synchronized lights, music, talk, and twitter

Where are we at present in HTML5 implementation? Well, "canvas" has been implemented in Firefox, Opera, Chrome, and Safari. Microsoft, of course, just to be a pain, has implemented "ExplorerCanvas," grrrrr.  They just know how to irritate.  The "audio" interface is implemented in Safari and  Opera.  The "video" interface is in Safari and Firefox.   As you can see, the browser builders are working on it.  I don't think it will be 2022 before all browsers will be HTML5 standard compatible.

And now let's close with some superb demos that folks have made to show you some of this functionality in use.  There are a couple that have caught my eye.  These demos take time to both load and play.  It's worth your time to wait them out and let them go to completion to get the entire experience.

"Ambient Light" shows dynamic movie theater ambient lighting changing as the image changes.

"Blow Up" shows an animated cartoon being interactively blown to pieces and reconstructed.  This demonstrates use of "command."

"Get it Love" shows an interactive audio experience with text, voice over, and audio using the new "canvas".  It may be a new way to publish music.  Click on the screen for Tweeter messages.

The Wilderness Downtown

Just to show you Chrome is experimenting with HTML5, they have created and HTML5 experiment page with there most stunning demo to date, "The Wilderness Downtown."  If you also scroll down the page, you'll see a large number of "experiments" others have made that you can play.

"The Wilderness Downtown" is meant to run in the Chrome browser.  You put in your address to start the demo, and you'll see a series of synchronized independent screens, all synchronized to the music, with a map of the address you entered, and a video of what that spot looks like if you were standing there.  There is a running figure in the demo that is also on the map and synchronized with the map, as the figure turns, the video turns.  There are birds that travel between screens, and during the demo, when you write on the screen later in the demo, the birds will land on the writing, Amazing! Make sure you wait this one out to the finish for the full affect.


HTML 5 — 1 Comment