by July 1, 2010 0 comments



The buzz around HTML 5 is getting louder by the day. Most major browsers have
already started supporting it, and many companies have already embedded it in
their websites. It’s time you also started exploring its capabilities before
everyone gets on the bandwagon and leaves you behind. Here, we discuss
everything about its features and capabilities.

Who is behind HTML5?
HTML5 is a decentralized concept and is promoted by WHATWG (Web hypertext
Application technology working group). This group was formed in June 2004 after
a disagreement within the W3C group due to the deviation in ideas of some
members from HTML to XHTML. And many top people from Mozilla, Google and Apple
did not want to leave HTML as a standard and hence they formed WHATWG.

Direct Hit!

Applies To: Web Developers, technology
evangelists
USP: Add more power to your websites with HTML5
Primary Link:
www.w3.org/TR/html5/

Search Engine Keywords: HTML 5

HTML5’s development started in 2004 and is not released yet. But few browsers
have already started supporting it so you can play around with its new features.
HTML5 is no doubt one of the most talked about buzz word on Internet today and
it claims to change the way web applications are developed by making them
stronger.

Features at a glance
Doctype: HTML5 suggested the removal of various doctypes and recommends
sticking to the following.

<!Doctype HTML >

Generic structure of a webpage: Almost every website has very similar page
structure viz header, navigation (also called menu), content section and the
footer.  HTML5 has them defined as generic tags, so that every time a new
webpage is created, you do not have to define the div, span, id, class etc for
these portions of the webpage.

New Controls: With the advent of HTML5 some new controls are introduced.
These are the controls which are commonly used on a webpage, but at present a
developer has to write code for them on each & every webpage he develops.

Less error prone code: As mentioned above, there are a few new controls which
are there by default in HTML5, such that a developer does not have to write a
code for it. This results in making a web application more robust as a developer
has to write less number of lines of code compared to what he used to write
before HTML5. We will illustrate this later through examples.

Productivity: Most of the time a web developer struggles to achieve cross
browser compliance for his web application. This results in wasting a lot of
productive time, because he has to tweak his code over and again so that it
behaves the same way across  different browsers. We will see how HTML5 is going
to help in making application cross browser compatible.   At present, we define
the structure of a page  using div, span. Then we style the page using cascade
style sheet (CSS) using the Id, class which are defined in the HTML. But let me
show you how you can define the HTML & CSS for the image page layout in HTML5.

HTML (say index.html)
<header><h1> header Tag</h1></header>
<nav><p style="height: 200px;"> nav tag used to display left navigation</p></nav>
<section>
<p> section tag </p>
<article><p> article tag </p></article>
</section>
<footer><p> footer tag</p></footer>

The above is a sample HTML code showing the new tags, header, nav, section,
article, and footer.

You might have already noticed that the above code does not contain any div
or span tags. But still it gives you the same effect as a conventional div like
page structure would have given. The CSS properties can be defined with the
names of the tags. Now let’s see the CSS code which styles a webpage.

body {background-color:white; color: black; text-align:center;}
header, footer, nav, section, article {display:block;border: 1px solid black;}
header {width:100%; background-color:blue;}
header h1{margin: 0px;padding: 0px;color: #fff;}
nav {width:30%; background-color:#8182CF;float:left;}
section {width:69%; background-color:SpringGreen ; float:right;height: 232px;}
article {width:70%; margin:2em 10%; background-color:turquoise;}
p{font-size: 22px;}
footer {width:100%; background-color:pink; clear:both;}

Now create a blank HTML file and type the new HTML tags as written above
along with this CSS code. You will be able to see the webpage similar to what is
shown in the image.

Note:  Open your HTML file in Firefox, Opera, Chrome or even in Safari
browser. If you try to open this HTML file in IE, you will not get the expected
result, because these tags are not yet supported in IE. However, there is a
workaround in JavaScript to make these tags work even in IE. Let’s see how we
can achieve this.

New Controls
HTML5 has introduced many new controls which makes the life of a web
developer easier. Out of the many new controls introduced, I am going to show
the ones I like the most.

DatePicker: If you are a developer, then you might have a pet
JavaScript which renders a nice datepicker on the webpages you create. The
script which you include, no doubt sends a HTTP request, downloads the resources
and then renders. That adds into page load time and results in slower rendering
of the webpage. But in HTML5, you can include this fancy datepicker by simply
adding the type=”date” in the input tag.

<input name="dob" type="date" value="today">

Slider Control: HTML5 also has the control to insert the slider, if needed.
Those who use sliders are using readymade JQuery plugins or either building
their sliders from scratch. So that again is expensive in terms of productivity.
But the HTML5 allows you to embed a slider with minimum and maximum values
defined. One such example is shown below.

<input id="slider" name="a" type="range" mix="1"
max="10" value="0">
Audio & Video: It is hard to embed Audio or Video on to your web page.
First of all you require a script which allows you to stream the media files on
your webpage. And on the other hand, the visitors need to install the plugins
into their browsers to successfully view/listen the media you embedded. Overall
it’s a pain for both the developer and the user.  HTML5 has the solution by
allowing developers to embed Audio & Video files directly into a webpage with
simple tags.

<audio src="sample.ogg" controls>
audio not supported
</audio>

The above code embeds an audio player which plays the sample.ogg audio sample
after clicking the play button. And the same is true for the following video
tag.

<video src="video.ogg" controls="controls"
height="400">
Your browser does not support the video tag
</video>

Less code and productivity:There is major improvement in the way we define
HTML forms. Almost every form created on a webpage to take input from the user
requires validation. For the client side validation the developers have to write
JavaScript code and this code is repeated in almost every website, one way or
the other. But with the introduction of “required” attribute, one can rely on
the browser to handle such validations. The following code is an example of
validation :

<form>
<p><label>Name: <input name=name required></label></p>
<p><label>E-mail: <input name=email type=email required></label></p>
<p><label>URL: <input name=url type=url></label></p>
<p><label>Comment: <textarea name=comment required></textarea></label></p>
<p><input type=submit value="Process Form"></p>
</form>

So the above lines of code are enough for validating the empty field, valid
email address and a valid URL. You do not have to write JavaScript code, which
not only makes your HTML page lighter but also the built-in validation of the
browser ensures lesser bugs in the final code. Productivity is increased since
the developer does not have to repeat the same code for each and every form and
then calling events and functions etc.

Note: For all the demos shown in this article, we are using Opera v10.5. You
will be able to see some of the HTML5 tags working in Firefox as well, but for
now Opera supports all of them. Unfortunately IE does not support any of the
tags as of now.

Sachin Khosla, Founder, Digimantra.com

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.

<