Advertisment

HTML5: Features and Capabilities

author-image
PCQ Bureau
New Update

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.

Advertisment

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.

Advertisment

Features at a glance



Doctype: HTML5 suggested the removal of various doctypes and recommends

sticking to the following.

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.

Advertisment

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.

Advertisment

HTML (say index.html)

header Tag



Advertisment





section tag



article tag





Advertisment



footer tag

Advertisment

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.



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.



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.

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.

height="400">



Your browser does not support the video tag



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 :

















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

Advertisment