Monday, February 20, 2012

HTML 5 Interesting New Features


Hi Friends Here are some of the Interesting new features which were missing from the earlier version of the HTML. These cool features let the developer create a very RICH web application.

New Doctype :

This features let us Defined a very small Dock type rather than the complicated W3c DTD……. You can have the Dock type now as

<!DOCTYPE html>

<small> :

A new tag has been added to create a sub heading in a small font for example the Copyright and other important information can be created using the SMALL tag.

“type” attribute :

There is no need to specify the type of the file attached in the Link and script sections. We can specify the, directly like

<link rel="stylesheet" href="css/main.css" />

<script src="scripts/main.js"></script>

No Quotes:

We now have freedom to specify the HTML attribute without any quoted. This will leads us the hassle free syntax declaration.

<div id=anil runat=server></div>

Special field for email:

The days are gone when we have to bother for the email validation of the data entered by the user. There is now special fields to have email input that is 100% validated.

<label for="email">Email Address</label>

<input id="email" name="email" type="email" />

Water Mark:

To specify something in the text box in the form of water mark we can make use of a new features that is “Placeholder” this will let us specify the text we want to display in the text box. For example to show the sample email address.

<input name="email" type="email" placeholder="sankkrit@gmail.com" />

hGroup :

This special attribute let us create ht group of the heading for the page, with put affecting the flow of the document thus the heading look like a stream line heading.

<hgroup>

<h1> Dot Net Helper </h1>

<h2> Blog for all .net lovers </h2>

</hgroup>

Required attribute:

Wonder you have to make any field in the form as mandatory and you don’t want to specify the JavaScript or any validator for the same? Yes its possible now with the help of “required” attribute. This will make the field as mandatory.

<input type="text" name="myName" required="required">

Autofocus

This allow us the control to be focused automatically without using any JavaScript this will leads to faster development and less JavaScript errors in the page.

<input type="text" name="myName" placeholder="tester" required autofocus>

Audio and Video Support:

There is a Special Audio element in the HTML 5 which will let us play the audio file directly without relying on any third party control on the page. The YouTube support let us play the video in the web page seamlessly.

Regular expression

Now we don’t have to worry for using the Regular expression to validate the input. We can directly specify them inside the element itself using the “pattern” attribute.

<input type="text" name="username" id="username" pattern="[A-Za-z]{4,10}" autofocus required>

A part from these amazing attributes and features there are some more exciting feature which we are gone loves it. We will cover them later in another article. Till then enjoy and keep exploring HTML5

Thanks
Anil Kumar Pandey.

Kontera