As mentioned here last week, 2011 is about to bring lots of hotness on the World Wide Web. One of the things that we mentioned was the emergence of HTML5, a new markup revision of the HTML standard, and which is expected next year to extend its reach even wider.
While HTML5 is still under development, developers, programmers, and tech companies are already adopting a number of its features. Even some of the world’s most popular websites are enabling support for HTML5. How fast it will replace Adobe Flash – if HTML5 will replace it at all – remains to be seen, but just in case you’re keen on checking out what the HTML5 buzz is all about, we’ve compiled a list of websites whose HTML5 features you can test-drive – right now.
Dive into HTML5
Authored by Mark Pilgrim, this book explains and demonstrates HTML5 in a no-BS language that’s easy to understand. In the introduction, Pilgrim notes how today’s leading web browsers are already delivering support for the new markup format. “(Now) you can detect support for individual features, like canvas, video, or geolocation. Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already well-supported. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas, video, geolocation, local storage, and more. Google already supports microdata annotations. Even Microsoft – rarely known for blazing the trail of standards support – will be supporting most HTML5 features in the upcoming Internet Explorer 9.”
The HTML5 Test
How well does your current web browser support HTML5? This site automatically detects your browser to calculate test scores and provide an indication of how well it supports HTML5’s related specifications. (From the looks of it, Safari, Chrome, and Opera are ranking ahead of other browsers.)
If you want an alternative with equally neat visualizations, try HTML Readiness – developed by Paul Irish and Divya Manian – which uses a multi-colored half-wheel as the indicator of each browser’s HTML5 (and CSS3) groundwork.
YouTube HTML5 Video Player
We’re sure you’re aware that YouTube videos are originally based on Flash, and that without Flash support you won’t be able to play Justin Bieber’s latest acoustic session or that hilarious Funny or Die clip. That ought to change soon, thanks to YouTube’s HTML Video Player, which you can use for most videos (as long as they don’t have ads) via the website’s opt-in trial. Supported browsers include Firefox 4, Chrome, Opera 10.6+, Safari (version 4+), Internet Explorer 9, and Internet Explorer versions 6, 7, and 8 with Google Chrome Frame installed.
Vimeo
Last January, Vimeo announced that it will support HTML5 features through its video player. It hasn’t been fully rolled out yet – right now, the Flash player shows up on desktops, while mobile devices show a slightly different Universal Player interface – but according to the company, a full HTML5 desktop player is in the works.
Yup, the search engine giant has also taken to using HTML5. Leveraging HTML5’s excellent flexibility, Google continues to play around with the markup language’s powerful features – such as seen in several of the company’s interactive Google Doodles – and even recently introducing an HTML5-enabled version of Gmail as a mobile device app. Even Google’s Zeitgeist 2010 report – which we covered here yesterday – is beautifully visualized using Javascript and HTML5. Check it out!
Canvas Paint
Remember MS Paint? Well, here’s a fully-functional, pixel-perfect, HTML5-version of the application – right in your web browser. It uses the <canvas>tag as specified by WHATWG and is supported by a number of browsers.
HTML5 Gallery
If you’re looking for a showcase of what HTML5 can do – and how it can change the Web – then you might want to take a peek at what Manchester-based designer Richard Clark has done. HTML5 Gallery is like a museum, featuring gorgeous websites that use HTML5 for markup in a way that should inspire the best and the rest of the Web.
nakshART
This is pure eye candy, especially when viewed from a touch-screen device like a smartphone or the iPad. nakshArt is an astronomical sky viewer app that detects the current location of your browser to draw stars, constellations, and other celestial objects that are just right above your side of the earth.
Font Dragr
Testing a custom font? No need for complex codes. Font Dragr, a HTML5-based web app for typography lovers, works like a charm and features drag-and-drop ease. The site, which allows the application to run offline, also stores the file API for accessing the font file that you may have used.
HTML5 Games
Watch out, Friv and GameZer. A new online entertainment and gaming site has emerged – and all of its games are created using HTML5.
Apple
Apple has an impressive HTML5 showcase that demonstrates how the latest Safari browser and other Apple platforms support the capabilities of the new markup language. It covers a variety of categories, including video, typography, photo gallery, transitions, audio, and 360-degree views (perfect for the product catalogs of e-Commerce sites). Moreover, the company has created a list of websites that are ready for the iPad, which is a device that is “notorious” for not supporting Adobe Flash.