HTML 5, The future of Web UI Development
In this article, I discuss HTML5; its advantages and disadvantages (yes, there are a few). The acronym HTML stands for HyperText Markup Language. And it's pretty well known to Web Designers and Developers. HTML 5 is nothing but an enhanced version of HTML to reduce the dependency of external plug-ins and to provide a pleasant user experience. Some of the new features of HTML 5 are very exciting, like Geolocation, Offline storage, builtin audio and video tags etcetera. In this article, I provide a high-level overview of HTML 5. And within the next few articles I would like to explain each and every feature with suitable examples.
HTML5 is a joint venture product of the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). WHATWG has been working with web forms and applications, and W3C has been working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
- New features should be based on HTML, CSS, DOM, and JavaScript
- Reduce the need for external plugins (like Flash)
- Better error handling
- More markup to replace scripting
- HTML5 should be device independent
- The development process should be visible to the public
HTML 5 is the latest version of HTML. The predecessors of HTML was HTML -> HTML 2.0 -> HTML 3.2 -> HTML 4.01 -> HTML 5.
It is a combination of HTML and XHTML. We can say that it is an enhanced version of HTML. It was developed to reduce development time and costs and also makes web development a simple thing. The dependency over coding will be reduced by the use of HTML 5. And the dependency on plugins (such as Flash and Silverlight) will be reduced by using some new tags of HTML 5 (Audio, Video, Canvas etcetera).
Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>.
The HTML 5 group was constructed with some technology giant companies like Google, AOL, IBM, Apple etcetera
Before starting the discussion of the advantages of HTML, let's discuss how it has caused a revolution in web user interface development in mobile and PAD platforms. Let me share one of my experiences here. A few years ago when I began to write a Google blog I used to see the statistics of my viewers. I was getting the experience that most of my readers were using the Windows platform and that was nearly 95% . But now the scenario is changing day by day. People are using smartphones and PDA devices to browse the internet with various platforms, like Android, Symbian, Mac etcetera.
And we can draw one conclusion that "People are using various devices and phones to browse the internet and its rate is increasing day by day, in other words somehow they are getting satisfaction with it". And I believe it is possible by HTML 5. OK, I am accepting not only HTML 5 but at least the use of HTML5. Now let's see how HTML5 helps developers to provide a better user experience.
Less dependency over External Plug-ins
Those who started their career as a web developer a few years ago might have had the pathetic experience of audio and video on web pages. Developers had to depend totally upon the user's browser plug-in and after the successful development, there was no guarantee of whether the user was able to view the video or not. If they don't have the plug-in installed in their browser then they could not. But that has changed using HTML5.
There are many new multimedia handling tags in HTML 5. So the dependency on third-party plug-ins has been reduced. Using HTML tags we can play high-quality audio or video on our web page.
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. And in the future code maintenance will be easier.
HTML 5 is an example of semantic HTML. Tags are more meaningful, and also they represent meaningful data. Now it is easy to see which parts of the page are headers, nav, footers, aside, etcetera since the tags are specific to those and most importantly we know what their meaning and purpose are in the entire format. By using HTML5 elements we can increase the semantic value of the web page since the codes are very standardized.
The form elements set are robust in HTML 5. So the dependency over JavaScript and other validation functions have been reduced. Using HTML 5 we can validate the user's form natively. There is no need for JavaScript functions. But JavaScript is still needed for browsers that do not yet support HTML 5.
As websites adopt the new HTML5 elements we will see greater 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 and it will help to further maintenance.
The basic need for web application
Many new features and standards have emerged as part of HTML 5. Once you detect the available features in today's browsers, you can take advantage of those features in your application. The main focus of HTML5 is to make easier applications with easy front-ends, drag and drop tools, discussion boards, wikis, and other useful elements.
Offline cache
Browsers have some capability for offline caching. When you visit a website and press the browser's back button the page may not open if the internet connection has been terminated. So the internet connection is very necessary for visiting websites.
But the beauty of HTML 5 is that you can visit the webpage even offline if is developed in HTML 5. HTML 5, thankfully, provides a smarter solution. When building the site, the developer can specify the files that the browser should cache. So, even if you refresh the page when you are offline, the page will still load correctly. This sort of caching has several advantages, like offline browsing, files load much faster and reduced load on the server and it will save bandwidth.
Client-side storage
Basically we know that client-side temporary storage means cookies and sessions. While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. And when a new HTTP request has been generated it also sends the cookie information to the server, This can result in a measurable impact on response time. So a best practice is to reduce cookie size. With HTML5 we can do better by using Session Storage and Local Storage (two different storages in HTML5) instead of cookies. It is not a permanent database but enables you to store structured data, temporarily.
Great for Mobile Devices and PDA
HTML5 could be the solution to faster applications that will be accessible universally across all mobile phones. And other PDA devices will support HTML 5.
Using Geolocation, anyone can determine where you are in the world and sharing that information with people. There are various ways to determine where you are; your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. The new HTML5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application.
These are some advantages of HTML 5 among many more. Since HTML 5 is in the development phase, more advantages may develop. It is assumed that it will be completed within 2022, and the web developer is very hopeful of that.
HTML5 is not yet an official standard since it is still in the development phase. No browsers fully support HTML5.
But all major browsers (Safari, Chrome, Firefox, Opera, and Internet Explorer) continue to add new HTML5 features to their latest versions. So to view a web page developed with HTML 5, the user needs to update their browser.
HTML browsers are incapable of scaling (zooming or resizing) pages, except for the Opera browser, which is only one we know of capable of scaling pages.
When using smaller monitors and lower resolutions, one of the most important disadvantages of HTML will fully apply: browsers cannot scale HTML pages, in other words, zooming, a proportional changing of the presented size of a page is technically impossible. In other words, a page can only be shown in one original format and any change of the page size impossible. Here, browsers are clearly inferior to any word processing or DTP software. This is (not the only) important disadvantage of HTML, of which most people are not even aware when using internet browsers on a daily basis.
I think it is the only disadvantage of HTML 5.