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">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
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:
<header>
<h1>Header Text</h1>
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</header>
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:
<videoposter="myvideo.jpg"controls>
<sourcesrc="myvideo.m4v"type="video/mp4"/>
<sourcesrc="myvideo.ogg"type="video/ogg"/>
<embedsrc="/to/my/video/player"></embed>
</video>
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:
- Not all promise of HTML 5 has actually been realized.
- There are a few hurdles to overcome for development teams that are jumping into HTML5 now.
- Lack of compatibility with Internet Explorer is a big concern
- Concern about the rapidly changing state of the HTML5 standard and the lack of audience for HTML5 apps.
- 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.
- 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