10 Websites To See What HTML5 Is All About

HTML (HyperText Markup Language) is the most widely used markup language today. Tags, elements and angle bracket with a bit of help from CSS forms the building block of all that you see around on the World Wide Web.

It has been nearly 20 years since HTML started defining how we ’see’ the web. Now, it’s on the verge of its fifth major revision – HTML5. From its first avatar to its fifth, the web itself has been transformed. HTML5 is an attempt to meet current needs which is heavily based around dynamic and multimedia rich content. But how will it change the way we look and work with the web?

The web of today is increasingly interactive and media rich. Applications are moving online. HTML5 covers all of these needs by introducing ways to embed videos and audio, draw simple graphics, work with apps offline; do all these without plugins, and of course, do it all faster than before.

It is after all a standard. Thus, it’s nigh impossible to sweat the details in a few lines. So here are ten resources that give you an insight on HTML5. Let’s get to know it, because we all might be using it soon.

WTF is HTML5

Research group Focus breaks down the latest specification and gives it straight up as a simple to understand infographic. Within ten minutes, you will get a helicopter view of what HTML5 is all about and why we should care.

Dive Into HTML5

Written by Mark Pilgrim, it’s a hand-picked look at select features of HTML5. It’s put together in the conversational style of the ‘For Dummies’ series. If you want to grasp the basics, this is a must read.

And there’s ‘Professor Markup’ to guide you along with answers to common queries. Each chapter is supported by demos and examples. But do check the mentioned supported browser(s) before trying them out.

HTML5Doctor

At HTML5Doctor.com, you have articles that are meant to help you hit the ground running. For example, using the very first article, you can set your webpage to be recognized as HTML5 by browsers. The fourth post helps out with designing a blog with HTML5.

The HTML5 blog also has a Q&A section, where you can upload your questions. Some of the answers come on the homepage as ‘Your Questions Answered’ posts.

HTML5Rocks

This HTML5 web resource asks that you be well versed in coding. If you are, there are a few tutorials that help you understand how HTML5 features can be coded. You can experiment with HTML5 at the Playground and even reuse some of the code samples in your own project.

The tutorials are few but comprehensive. Each is also tagged with the icon of the browsers that meet the HTML5 feature requirements.

HTML5games



HTML5 is giving Adobe a few headaches because it promises to do away with Flash (at least for some apps). Will HTML5 prove as effective as online games as the Flash based games we have become used to? Check it out for yourself by playing the HTML5 games that are hosted on this site.

You can also read a brief mention of this HTML5 games resource in our directory.

HTML5 Readiness


All browsers are readying themselves for HTML5. The half wheel on this site is a visual indicator of each browser’s groundwork so far for HTML5 and CSS3. You can mouseover the 28 features and gauge the stage from the color coded spokes.

From the looks of it, Safari and Chrome are more down the path than the others.

HTML5 Element Reference Table


Periodic Table of the Elements, a project by Josh Duck is a quirky look at the 104 HTML5 elements (and 2 proposed elements) using the layout of a periodic table. Clicking on each cell brings up a brief description with additional references.

You can also read a brief mention of this resource in our directory.

HTML5 Test


At a glance you can tell your (browser’s) score when matched up against HTML5 ready features. As soon as the website loads up, the score from a maximum of 300 gets displayed. You get bonus points if the support extends beyond what the HTML5 specification might lay down.

The scores are also color coded which indicate anything between what’s great and what’s not available on your browser.

HTML5 Gallery

HTML5gallery.com parades other websites that are using HTML5 in some form or the other. You can click on the thumbnail and reach the websites on view. It is also a learning platform to see how web developers are implementing HTML5.

Each website profiled has a small note that explains how an HTML5 element has been used to design the website.

YouTube HTML5 Beta

The ‘Video’ element is touted as one of the bestselling points of HTML5. You can test it out on YouTube by opting to use the HTML5 player instead of the Flash player for most videos. Your tryouts will also tell you how your current browser is coping with HTML5 videos. Do read the Notes section to note the finer points on the beta effort from YouTube.

Everything says its exciting days ahead. These ten websites on HTML5 are just the early starters of a breed that’s going to explode soon. Hopefully, they will help to put you in the right element to work with HTML5.
Image: justinsonmia
(By) Saikat is a techno-adventurer in a writer's garb. When he is not scouring the net for tech news, you can catch him on his personal blog ruminating about the positves in our world.

Similar Articles

* 3 Great Websites To Learn About Art And Its History

* Really Painless Web Development Using Microsoft WebMatrix
* Top 6 Resources To Become A Better Freelance Writer
* 6 Best Web Design Blogs To Follow
* Create A Mobile Website From Your RSS Feed With WINKSite
* How To Run A Speed Test On Your Website
* 6 Websites To Help You Learn Japanese Online For Free
* Geotag Your Website or Blog Updates with GeoRSS & MapQuest Sphere: Related Content

Other Voices: An HTML5 Primer

By Michael Mullany, June 03, 2010
It's easy to get lost in the welter of HTML5-related standards

With Google and Apple strongly supporting HTML5 as the solution for rich applications for the Internet, it's become the buzzword of the month -- particularly after Google I/O. Given its hot currency, though, it's not surprising that the term is starting to become unhinged from reality. Already, we're starting to see job postings requiring "HTML5 experience," and people pointing to everything from simple JavaScript animations to CSS3 effects as examples of HTML5. Just as "AJAX" and "Web 2.0" became handy (and widely misused) shorthand for "next-generation" web development in the mid-2000's, HTML5 is now becoming the next overloaded term. And although there are many excellent resources out there describing details of HTML5, including the core specification itself, they are generally technical and many of them are now out of synch with the current state of the specs. So, I thought a primer on HTML5 might be in order.

HTML5 Core vs. The HTML5 Family
When many folks say "HTML5" (particularly when this is followed with "will replace Flash"), they mean (or at least I think they mean), the broad collection of next-generation technologies that are now being implemented in the Webkit-based browsers (Safari and Chrome), Opera and Firefox. Some of these (like CS S3) were never part of the HTML5 standards process, and some of these (like web workers) were originally part of the spec but were spun out separately. We think the right way to refer to this collection is "the HTML5 Family." The family members of HTML5 (like all families) are in very different stages of maturity and implementation. Some are fully implemented in latest revision browsers, some may never see the light of day, and some will become altered beyond recognition before they show up in the mainstream. As mentioned before, the core W3C HTML5 spec is just one part of the collection of related technologies. I list the following specs as members of the HTML5 Family (more or less):
•The HTML5 spec
•Cascading Style Sheets Version 3 (CSS3)
•Web Workers
•Web Storage
•Web SQL Database
•Web Sockets
•Geolocation
•Microdata
•Device API and File API

The Core HTML5 Spec
The central thrust of the core HTML5 spec is to evolve HTML from the XML-centric approach of the early 2000's that had poor traction among browser makers and developers. HTML5 substantially changes many aspects of the language, although most changes have not resulted in new features visible to most end-users. These "user-invisible" changes include a new content model, accessibility features and browsing contexts. In many cases, HTML5 allows what is currently done with styling, JavaScript or server workarounds to be done in HTML. This results in cleaner, human-readable HTML. Today's blizzard of div tags is replaced with meaningful markup like nav and aside. For example, HTML5 adds semantic tags for common content elements: One specific example is a special form field for email addresses. Another specific example is new markup for menus and navigation sections. For forms, HTML5 adds support for PUT and DELETE form actions, which will simplify server side processing. It also provides native support for adding form elements dynamically, which currently has to be done in JavaScript.

For users, the highest impact change in HTML5 is the addition of audio and video tags and a standard 2D bitmap drawing format (canvas). HTML5 audio and video tags allow playback without the use of plugins, and Canvas allows rich 2D bitmapped graphics.

There are many other features in the HTML5 spec, including a drag-and-drop API, cross-document messaging, persistent content caching directives, and user-editable content. Support for them is still being added to the latest browser revisions. Some parts may still end up being discarded before final implementation.

Finally, HTML5 removes many presentational markup elements that littered earlier HTML specs, like center and font. It also disallows direct table styling, and instead, requires the use of CSS. Frames are also officially eliminated.

CSS3
A lot of what people think is HTML5, is actually CSS3, which is itself a collection of sub-specifications. These are in various states of completion and browser implementation. For example, CSS Animations and CSS Transitions are sub-specs that provide rich dynamic 2D animations and effects for elements. CSS 3D and 2D Transformations provide animations for boxed content. The CSS3 spec family also includes standards for richer layout control, borders and backgrounds (the highly desired "rounded corners" ). It also includes more niche capabilities such as Ruby (not the language, Ruby with a small "r" means visual hints for meaning or pronunciation often used in ideogram based languages), aural style sheets and scrolling marquees.

Web Workers
Web Workers let an application spawn tasks for the browser to work on in the background without freezing the execution of the main application. There are a few types of workers that can be created with slightly different behavior. The intent of web workers is to give application developers the ability to specify what tasks within the application are parallelizeable (in the small), so that the browser can better schedule work for the rapidly increasing core count of today's (and tomorrow's) multi-core processors.

Web Storage and Web SQL
Web Storage is one of the more exciting parts of the HTML5 Family. Web Storage allows a page to store string data in a key-value pair database, specific to that domain. There are two varieties of Web Storage, the first is sessionStorage, that persists data only for a single session (think of it as a more functional cookie storage mechanism). The second is localStorage which allows a domain to store data locally across browser sessions (and system reboots). When you add localStorage to the cache manifest from the main HTML5 spec, you have the ability to run an offline application. The Web Storage spec is itself separate from the Web SQL Database spec which provides for a full SQL-addressable database that is accessible offline. Although varieties of this spec are in implementation by browser makers, the standardization process is blocking on the need for a second interoperable implementation that is not based on SQLite (which all the current versions are.)

Web Sockets
The Web Sockets protocol is in the first stage of the standards process and has also been submitted as an IETF draft because it is a networking protocol. It defines a non-http-based asynchronous client/server protocol that can be used in place of the current AJAX methods for asynchronous server communication. It uses an initial http: request to bootstrap the new protocol.

And all the others…
Geolocation is a simple spec that provides a built-in a geolocation object that scripts can query. It also provides methods for defining location cache freshness requirements. This is fairly non-controversial and already in new browsers. File API allows single and multiple file uploads from the user desktop. It's unclear exactly who will support this, but there doesn't seem to be much confusion about what it's supposed to do. Microdata is a mechanism to allow communities of interest to mark up content with semantic tags (for example, tags that identify an address or a resume.) It doesn't specify what these semantic tags are, just how they should be implemented. Device APIs that allow web browser access to devices such as cameras, BlueTooth etc, are still an early work in progress. These hope to define standardized access to native hardware and sensitive data from web applications. Highest priority are a camera API, and APIs for contact list, SMS history etc. on mobile devices. From Google I/O it appears that Google is going to ship something sooner rather than later that allows camera access from a Chrome web application, but there have been no further details on this.

HTML5 Summed Up
It's easy to get lost in the welter of standards enumerated above. But stepping back you should get the sense that the HTML5 Family authors are on a mission to make web applications as powerful as native applications when it comes to user interface richness, offline capability and hardware access. Since HTML5 family apps will be deployed on the web, they'll have the added benefits that the web has always brought, which are:
• A universal client that works cross platform
• Easy searchability and indexing (including deep linking)
• The ability to trivially include third party services and mashups
• Zero hassle deployment and updating (after all, it's just on the web)

We're excited by our initial HTML5-based development, and we eagerly await these new features as they are implemented and stabilized in the latest browsers.

Recomended links about HTML5 Book: Deploying HTML5 Sphere: Related Content