Advantages of using HTML5 in our web apps

The HTML5 spec started out as “Web Applications 1.0″ and was developed in 2004 mostly by employees from Mozilla, Apple and Opera. Together they formed the “Web Hypertext Application Technology Working Group” (WHATWG).

Around the same time the W3C decided to abandon development of the XHTML2 spec they’d been working on and set out to also develop the HTML5 spec.
Today the WHATWG and W3C are involved in a bit of a power struggle over who controls the future of web technologies. However, despite their differences in defining and adopting the full standard, HTML5 is here to stay with many browsers already starting to adopt it.

Cleaner code

Before HTML5 came onto the scene it was common practice to mark-up a webpage using a million or so different <div> tags each with their own descriptive class or id name.
HTML5 addressed this issue by introducing new elements for representing each of these different sections such as header, footer, article, section and asides.
Basically HTML5 allows us web designers to use cleaner, neater, more meaningful code.

Improved accessibility

Different technologies can take advantage of the features we’re using throughout our sites thanks to the introduction of the new HTML5 elements. They can immediately get a better understanding of the structure of a page by parsing the HTML5 elements we’re using.

HTML5 makes it easier to see which part of a page is the header, nav, footer etc. By using HTML5 elements we can increase the semantic value of a web page, which in turn will help improve our SEO.

Funkier forms

If you’ve spent any time at all using the internet then you’ve bound to have come across your fair share of forms – from the simple search field to the more complex and highly secure online purchasing forms.

The form seems to be one part of the HTML5 spec that keeps improving all the time, with browser vendors supporting more and more features with each release cycle they make.

There have been a number of changes made to forms in HTML5 such as native form validation, user interface enhancements and the reduction in the need for JavaScript.

Features, features & then some more features

HTML5 also introduces a wide range of new features including improvements to the way we deal with multimedia on the web, how we structure our sites, a number of APIs, better form controls, local database storage and geolocation. I’m sure time goes on we’ll get more and more people experimenting and pushing the boundaries with what is possible with HTML5.

Drawing, Video and Sound

Web Developers have been increasingly trying to create applications which display fluid animations, stream video, play music and integrate with Social Network sites such as Twitter and Facebook. In most cases they could only provide these things by learning and applying add-on tools included Flex, Flash or Silverlight or building complex javascript tools. This increased the complexity and the time it took to develop the Web Applications. HTML 5 changes this with DOM and HTML support, (without the plugins and 3rd party programs) for video and audio embedding, high-quality drawings, charts and animation and many other types of rich content demanded by users.

• The new canvas element provides developers with a very powerful and very simple way to using pure Javascript to draw diagrams, graphics and dynamic animations on a web page. A good example is Mozilla’s BeSpin tool that is written in Javascript and HTML 5. Developers can use stand-alone HTML to create sites with interactive pictures, animation, charts and graphs, game components, and whatever else they by directly developing the program code and user interaction.
• The new HTML 5 video element makes it just as easy to embed video elements on a web page as it has been to embed images using HTML4 and the older HTML standards. Again no plugins, or 3rd party software attachments are required. It includes timed playback and other great new features.

Geolocation

The new HTML 5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML 5-compatible browser-based application. A good example is the Google Latitude for the iPhone. This is a pure Web App not a platform-dependent iPhone application.

Client-side database

HTML 5 provides a new SQL-based database API that can be used for storing data locally, that is client side. You get fully defined and structured database storage. This allows a developer to save structured data client-side using a real SQL database. It is not a permanent database, but enables you to store structured data, temporarily. The data can be accessed to support the web application and it can even be accessed when the client is disconnected for a short period of time. This database can be used to store e-mails or shopping cart items for an online shopping site.

Offline Application Cache

An offline application HTTP cache that can be used to make sure applications are available even when the user is disconnected from their network. All browsers have a cache but they have been very unreliable for delivering whole pages and applications. Mostly the browser would not cache the page properly and so you would be unable to view the page when you disconnected from the Internet. HTML 5 provides a smart solution by allowing a developer can specify the files that the browser should cache while online. So, even if you reload the page from the cache when you are offline, the complete page

Thread-like Operation

Web workers is a tool for spawning background threads to speed up the browse application processing. The API allows developers to make background workers that run scripts simultaneously to the main page script. This allows for faster thread-like processing with coordination via message-passing mechanisms.

Smarter forms

HTML 5 offers enhanced forms with improvements to text inputs, search boxes and other fields and provides better controls for validating data, focusing, interaction with other page elements on the page and various other improvements.

Sharper focus on Web application Requirements
HTML 5 is aimed at making it easier to build search front-ends, wikis, real-time chat, drag-and-drop tools, discussion boards and many other modern web elements into any site, and have them work more efficiently.