HTML5 Web Design Examples

19 Apr 2011  |  Web Web Development

New tags in HTML5 allow easy integration of multimedia elements on a webpage without having to rely on external plugins such as Adobe Flash. Other notable elements in HTML5 include <section>, <article>, <header>, and <nav>, which are important for the semantic web.

There are some great examples of the power of HTML5 available, which show us where the web is headed:

Apply HTML5 Showcase

Apple’s criticism of Adobe Flash in April 2010 led to the popularisation of HTML5  when Steve Jobs announced that some Apple devices would no longer support Flash. To justify this, Apple has created a showcase of HTML5 examples using advanced graphics, typography, animations, and transitions.
View the Apple HTML5 showcase >

Wilderness Downtown

The Wilderness Downtown is built by B-Reel to showcase HTML5 programming in the Chrome browser. It features the soundtrack “We used to wait” by the group Arcade Fire. Although I find the multiple browser windows a tad annoying, it’s a great experience and superb soundtrack. Before launching the multimedia content you are asked for your home town which allows Google Streetview images to be included to personalise the experience.
View Wilderness Downtown >

YouTube HTML5 Video Player

YouTube has a HTML5 video player (currently in beta mode), which looks and functions very similar to the Flash player version. You just need to go to the HTML5 site, opt-in and search videos as per normal. Right-clicking on any video allows you to easily download the video to your computer.
View the YouTube HTML Video Player >

Google’s HTML5 Rocks

Google’s site on HTML5 contains some great resources on coding in HTML5 and some nice examples including Craftymind’s Blowing up HTML5 video, and the HTML5 studio, which features this great interactive puzzle.

View HTML5 Rocks here >

Bear in mind that most of these are stil in beta mode so browser crashes are frequent! Feel free to add your own examples of HTML5 in action in the comments section below.

More articles

see all