Inside HTML5

September 26, 2011 Pivotal Labs

HTML5 has had a long incubation period; the last significant update to HTML, HTML4, was standardized over 14 years ago. This long wait hasn’t been for naught, as HTML5 adds many significant new features. These features are not only changing the desktop web, but are crucial towards enabling a rich and powerful mobile web experience.

HTML5

HTML5 introduces many new syntactical features, or tags, which allow the HTML developer to be more descriptive, explaining the actual content wrapped by these tags. For example, HTML5 introduces tags like: <section>, <nav>, <article>, <header> and <footer>, which more clearly indicate the type of content, making it easier to understand and maintain an HTML5 document. Beyond these new syntactical tags, HTML5 offers some exciting new features, improving user experience and offering new APIs.

One of the exciting new features in HTML5 is built-in support for video, making it easy to integrate video into a mobile website. Some sites, like Youtube’s mobile website use the HTML5 <video> tag to provide video browsing on your mobile device.

Along with built-in support for video, HTML5 incorporates a new version of CSS (the language used to describe the presentation of a web page). CSS3 adds many cool new features; some of the more exciting include built-in support for animating transitions of elements and the ability to transform elements. This allows a mobile HTML5 site to provide “native-like” behaviour, like smoothly transitioning between pages and allowing the user to swipe through an image gallery.

Finally, another cool usability enhancement in HTML5 is the addition of the canvas tag. The canvas tag allows the developer, through Javascript, to programmatically draw to the browser. Similar to some of the CSS3 enhancements, this allows the developer to provide a rich, “native-like” experience. Together, these user experience enhancements provide the building blocks towards providing a rich experience that would have previously demanded a proprietary solution, like Adobe’s Flash.

Complimenting the new features enhancing user experience, HTML5 adds some exciting new APIs allowing a website to provide a significantly better mobile experience.

One of the key features offered by your smartphone is its ability to provide content based on your current location, allowing you to find reviews of restaurants near by, get directions to your next location, etc. HTML5’s Geolocation API allows a mobile website to leverage this data well, enabling your website to provide a unique experience based on the user’s current location.

HTML5

Xtreme Labs uses HTML5 for Bell.mobi app

Another key enhancement in HTML5 is the built-in support for off-line websites and local storage. Your desktop computer may have an “always-on” network connection; your smartphone likely doesn’t especially as you travel around. The new off-line support and local storage APIs allow the web developer to optimize their mobile site so that it can be used even when the user is out of network coverage.

HTML5 offers many cool new enhancements, that we are starting to see make their way on to the web. More over, these new features when used in a mobile website provide a rich, “native-like” experience to the user.

At Xtreme Labs, we have been developing with HTML5 for a while and are excited to see how it will be further leveraged to provide a great mobile web experience.

About the Author

Biography

More Content by Pivotal Labs
Previous
Fixture builder and rspec-acceptance
Fixture builder and rspec-acceptance

Getting rspec-acceptance (webdriver, no cucumber) to work correctly with fixture_builder and database_clean...

Next
Rapid Cloud Foundry Deployments with Maven
Rapid Cloud Foundry Deployments with Maven

Apache Maven is a very popular choice in the Java community for building and deploying applications. Today,...

Enter curious. Exit smarter.

Learn More