How HTML5 Works

Groundbreaking Proofs of Concept

This shot shows "The Wilderness Downtown" in action with a flock of bird silhouettes flying between windows, including an aerial view of the street you typed in at the start of the video.
This shot shows "The Wilderness Downtown" in action with a flock of bird silhouettes flying between windows, including an aerial view of the street you typed in at the start of the video.
Screenshot by Stephanie Crawford for HowStuffWorks

A proof of concept is a demonstration that a new technology can live up to its claims in a practical, real-world application. As you've read so far, HTML5 by itself is a revision of application programming interfaces (APIs) and the standards for using them. For HTML5, the proofs of concept come through demonstrations of the products using the technology.

Today, there are many games programmed in HTML5, but they don't typically show off everything HTML5 can do for a Web site. With Google leading the charge for HTML5 adoption, it's published several entertaining demonstrations of what HTML5 can do in its Chrome Web browser. You can find these at the Chrome Experiments site.

In one of the most talked-about demonstrations back in August 2010, the band Arcade Fire teamed up with Google to produce an interactive music video experience called "The Wilderness Downtown." To start the app, you enter the address of your childhood home. After it incorporates that input, you click to launch the multiple window video experience. The video incorporates geolocation images overlaid with silhouettes of birds flying overhead and a person running through the streets.

In July 2011, the band OK Go collaborated with innovative performance art dance company Pilobolus for its own HTML5 Chrome Experiment called the "All Is Not Lost Video Dance Messenger." Similar to the Arcade Fire video, you start by entering some text and letting the application process that input. Then, when you launch the app, the HTML5 code draws and resizes multiple windows on your screen as it displays portions of the video in each one. Eventually, the message you entered at the beginning is spelled out with dancers' feet, filmed from underneath a glass floor.

For the typical Web site you visit, you probably won't know it's an HTML5 site unless it tells you. One thing's for certain, though: Web designers have been able to take their art to a new level, thanks to HTML5 features like the canvas. Designers and developers alike should see HTML5 as an essential technology to master in the coming years.

In this article, we've discovered the components of HTML5 and how they can work together to create Web masterpieces. We've even glimpsed some innovative HTML5 creations showing off its versatility. For much more on HTML5, including links to online resources you can reference when developing with HTML5, browse on to the next page.

Related Articles

More Great Links


  • Allaire, Jeremy. "The Future of Web Content - HTML5, Flash & Mobile Apps." TechCrunch. AOL, Inc. Feb. 5, 2010. (Aug. 9, 2011)
  • Gohring, Nancy. "HTML5 not yet solving mobile dev issues." IDG News Service. May 16, 2011. (Aug. 9, 2011)
  • Harris, Andy. "HTML5 for Dummies Quick Reference." Wiley Publishing, Inc. 2011.
  • Ondrejka, Cory. "HTML5 Games 0.1: Speedy Sprites." Facebook. Jan. 26, 2011. (Aug. 9, 2011)
  • Sivonen, Henri. "Spelling HTML5." The WHATWG Blog. Sept. 10, 2009. (Aug. 18, 2011)
  • World Wide Web Consortium (W3C). "Document Object Model (DOM) Level 2 Core Specification, Version 1.0." Nov. 13, 2000. (Aug. 8, 2011)
  • World Wide Web Consortium (W3C). "HTML5: A vocabulary and associated APIs for HTML and XHTML, Revision 1.4938." May 25, 2011. (Aug. 7, 2011)
  • World Wide Web Consortium (W3C). "Ruby Markup and Styling." (Aug. 9, 2011)
  • W3Schools. "Browser Statistics." Refsnes Data. (Aug. 8, 2011)
  • Web Hypertext Application Technology Working Group (WHATWG). "FAQ." (Aug. 8, 2011)