Getting to Know HTML5 and CSS3

HTML5, overtime, has come to refer to a basket of technologies that span across newer specifications of HTML and CSS3 as well as new browser technologies made possible by Javascript. In this post, which will be the first in a series of posts on HTML5, we will look at the current state of HTML5 and understand what it really is and how it is useful to developers.

How can I use HTML5?

You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation.

HTML5

HTML5

You may think of HTML as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The HTML5 specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define a <video> tag; there is also a corresponding DOM API for video objects in the DOM. You can use this API to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <video> tag itself.

No one can deny that HTML4 is the most successful markup format ever. HTML5 builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in HTML4, it will still work today in HTML5. Period.

Now, if you want to improve your web applications, you’ve come to the right place. Here’s a concrete example: HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means you can start improving your web forms today, even if some of your visitors are stuck on IE 6.

It already works

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 – supports most HTML5 features in Internet Explorer 9.

Advantages

HTML5 offers a number of benefits to developers and mobile app users, including:

  1. Improved end user experience: Transitions, graphics, motion & support for media all help make the app experience intuitive and rich. In many instances, the mobile app replicates the native app experience.
  2. Device Side Processing: Data caching mechanism allows applications to run even when the Internet connection is lost, so media, data and other typical interactions are not lost.
  3. Decreased cost/increased efficiency: Allows for centralization to a single standardized platform that is associated with rapid deployment ability. For example, using HTML5, apps developed for iPhone can be easily deployed to Android and Windows phone platforms. Changes do not require approval processes in order to be distributed, and as a result, content can change on the fly.
  4. Organic search optimization: Leverages organic search optimization elements such as Meta tags, content positioning, etc. Since the app is web based, it’s indexed by search engines, which means it will show up in a web search.
  5. Analytics: Support for visitors and more importantly, for behavior tracking, can be included in the app, which allows for granular level analysis. You can look at things like:  what is working, what isn’t, what part of an app is most popular versus what’s being ignored and where users are spending the greatest amount of time.
  6. Increased flexibility: Supports a variety of technologies, including geolocation, device orientation, touch events, CSS3 animation, SVG and WebGI
  7. Faster page loading: Uses less code than its native counterparts. This skinnier code allows for lighter applications and faster page loading.

Further Reading

Below are some links that will give you a more complete picture of HTML5 and the different technologies that drive it:

Dive Into HTML5

A Brief History of HTML

HTML5 Rocks

HTML5 Browser Test

Leave a Reply

%d bloggers like this: