- Web Development Tutorials

Introduction: Cool Things You can do with HTML5

HTML5 has several new features that allow you to create cool applications using just HTML markup and JavaScript, without having to do extensive backend development work. Here is a quick overview of some the things you can do with some of the new HTML5 features.

Offline Applications

Let’s say you want to offer your users a cool interactive game on your website and you want to give your users a chance to go “offline” or disconnect from internet and still continue to use your web. You can actually build such “offline” applications with HTML5.

Why would you want to create offline applications? Offline applications are helpful, if your connection to the internet is disruptive or if you are in a place with limited or no access. It is also useful for mobile phones users who may have to pay for bandwidth. Offline applications will allow mobile users to “disconnect” and “reconnect” to your website and still have a seamless interactive experience.

Drag and Drop

Drag and Drop is another interactive feature of HTML5. It allows you design an interactive application, like a game or some other special feature, that lets your users actually move things around on your website. Right now the only way to do this would be using extensive complex JavaScript or by creating an interactive Flash website.  HTML5’s Drag and Drops allows you create the same effects with just HTML markup and simple JavaScript.


It is becoming more and more popular to share your location with social networking sites like Foursquare and Facebook using your GPS enabled mobile phones. Many businesses are taking advantage of this trend to send users special coupons and deals that the users can redeem at a physical store located nearby.

Getting a mobile phone user’s GPS location right now requires special separate applications specific for that phone’s operating system which the users have to first download. HTML5’s Geolocation feature creates a standardized process to do the same thing that would work on all devices. Once again you can set up this feature using just HTML markup and JavaScript.


Right now if you want to add a clip of your Dog Fido doing the Conga, you have to use one of the many video plugins that are available. They only work if your end user actually has the right plugin. If for whatever reason their browser does not have your particular plugin they are not going to able enjoy Fido’s antics. HTML5 will get rid of plugins. Once HTML5 is fully implemented across all browsers, you will no longer have to worry about whether to use Flash or Quicktime. Your video will play in all HTML5 supported browsers and across all devices.

Fancy Forms

There are limits to what you can do with forms in HTML4. If you want to do fancy things with your forms such as include dates, sliders, or a dropdown list, you have use extensive scripts like JavaScripts or JQuery. With HTML5, you get a number of new input features, such as inputs for emails, sliders and date pickers. And you don’t need any JavaScript to use them.

Semantic Layout

Practically every website has a navigation bar. This has been true for a long time. Yet, none of the earlier versions of HTML has a tag for the navigation section. HTML5 finally does. It introduces the <nav> tag. This is part of a shift to labeling tags more intuitively like <header>, <footer>, <article>, <section> etc. As websites get more and more complex, these tags make it easier to identify, style, and shape the layout of a website.

Leave a Reply

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy