HTML5 – Advantages and its Future

So you’re still not using HTML5!!, you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE or you love to write strict XHTML code. HTML 5 is the revolution which the web world has been looking forward and it has arrived whether we like it or not. HTML 5 is not difficult to understand and though the adoption has been slow it may worth the effort to learn it and start using it right now – maybe after reading this article.

Basically HTML5 has its many new syntactical features, which include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to web without using flash and third party plugins. There are also another new elements like <section>, <article>, <header> and <nav> which enrich the semantic value of the document. Other major advantages of HTML5 are described below.

1. Mutuality

The websites developed today like Facebook and Twitter have to be highly interactive and in order to achieve this fluid animation and streaming video need to be an integral part of the website. Flash or Silverlight, flex or javascript were the only tools available to achieve this, but with HTML 5 it is possible to embed video and audio, high quality drawings, charts, animation and many other rich content without using any plugins as the functionality is built into the browser.

2. Cleaner markup / Improved Code

HTML 5 will enable web designers to use cleaner, neater code; we can remove most div tags and replace them with semantic HTML 5 elements.Consider this typical and simple header code with navigation:

<div id=”header“>
<h1>Header Text</h1>
<div id=”nav“>
<li><a href=”#“>Link</a></li>
<li><a href=”#“>Link</a></li>
<li><a href=”#“>Link</a></li>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<h1>Header Text</h1>
<li><a href=”#“>Link</a></li>
<li><a href=”#“>Link</a></li>
<li><a href=”#“>Link</a></li>

HTML5 allows you to code your markup cleaner as well as keep your CSS better organized.

3. Elegant forms

HTML5 enables designer to use fancier forms. Even it makes form validation native to HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers that don’t support form types). There will be different type of text inputs, search and different fields for different purpose.

4. Consistency

As websites adopt the new HTML5 elements we will see more consistency in terms of the HTML used to code a web page on one site compared to another. This will make it easier for designers and developers to immediately understand how a web page is structured.

5. Improved Accessibility

HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags screen readers can better examine the HTML document and create a better experience for those who use them.

6. Rich Media Elements Support

Forget about Flash Player and other third party media players, getting a video to play earlier has always been a nightmare with the <object> tags and the scores of parameters that go with it for the plugin. HTML 5 has inbuilt capability to play video and audio, so we can say goodbye to the messy plugin tags. An example is illustrated below:


7. Offline Application cache

HTML 5 offers the developer the ability to specify what the browser should cache, what this means that HTML 5 offers an offline application cache facility which would load the page the user has visited even if the user is temporarily offline. This feature helps the files load much faster and reduced load on server.

8. Smarter Storage

Cookies have been used to track unique user data for years, but they have serious limitations. The biggest flaw is that all of your cookie data is added to every HTTP request header, which ends up having a measurable impact on response time. HTML 5 solves this issue with the help of a concept called Local Storage. It’s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed. Since it is essentially a client side data base you don’t have to worry about the user deleting cookies and it seems to have been adopted by all the popular browsers.

9. Mobile and Geo-Location

Mobile devices are taking over the world. The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. With Adobe announcing the death of mobile Flash, HTML5 is the most mobile ready tool for developing mobile sites and apps. Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays. The new HTML5 geo-location APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application.

Future of HTML 5

The above points are only an overview of the HTML 5 advantages and there is a lot more to know about HTML5. It is assumed that HTML 5 would become a programming language and this is not expected to be completed before 2022! , so please keep this in mind and start using HTML5 in your designs right now!

The future of HTML5 may be rosy, but the following facts need to be considered before it can be adopted:

  1. Not all promise of HTML 5 has actually been realized.
  2. There are a few hurdles to overcome for development teams that are jumping into HTML5 now.
  3. Lack of compatibility with Internet Explorer is a big concern
  4. Concern about the rapidly changing state of the HTML5 standard and the lack of audience for HTML5 apps.
  5. HTML 5 in the mobile arena is rapidly evolving. Is it worth risking money on development using HTML 5 if it may have to be undone if the specification changes.
  6. Native Apps (ios and droid) are extremely popular, but the market for HTML 5 mobile apps may not be comparable to Native apps.

It should be noted that even with the above limitations HTML 5 is the future. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5 and the day would not be very far off where we have most browsers supporting the complete subset of the HTML 5 specification 🙂 .



Tags: Technology
previous post: Microsoft SharePoint 2013 – New features and benefits next post: How to test Mobile Applications – Emulators or Real Devices?