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.
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.
HTML5 offers a number of benefits to developers and mobile app users, including:
- 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.
- 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.
- 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.
- 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.
- 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.
- Increased flexibility: Supports a variety of technologies, including geolocation, device orientation, touch events, CSS3 animation, SVG and WebGI
- Faster page loading: Uses less code than its native counterparts. This skinnier code allows for lighter applications and faster page loading.
Below are some links that will give you a more complete picture of HTML5 and the different technologies that drive it: