Wednesday, June 29, 2011

HTML5

Hi friends
i am back with a new thing:) might be the old one for code guru. Today i was looking into the new HTML version HTML5.

This is the latest version on HTML which is launched to make sure that HTML is not legging behind with the world. In today's net savvy world we have different type of videoes, audioes,pictures showing on the websites. These all items need different plug in to run with like flash player, but now no plugin is required:)

below are some of the tags which make your life so much easy in the world of html.
1) audio- For playing sounds, music or other audio streams
2) video- For showing video content, such as a movie clip or other video streams
3) source- For media resources for media elements, defined inside video or audio elements
4) embed- For embedded content, such as a plug-in
5) Canvas - The HTML5 canvas element uses JavaScript to draw graphics on a web page. using this you can create images on the webpage itself file filled rectangle
6) localStorage - stores data with no time limit, this will be the replacement for cookies so that you can keep the big data on client side also without hammpering the performance of the application
7)SessionStorage - stores data for one session and when you close the browser all the data will be lost.

Here are some of the new input types which is supported in HTML5. These type will life of developer much simpler as developer don't have to write javascript for validation of these types.

1) email= if you put the input type as email then this type will make sure that user enter the email address only. another words it will do validation for email address format and if your browser don't support it it will show as simple input type.
2) url= It will validate the text box for URL format
3) number= It will validate the number format. it also support the max and min number user can enter in input box. there is one more feature call step so it will show the number as the step value you have defined.
4) range= this will make the range for the number like min to max value.
5) Date pickers (date, month, week, time, datetime, datetime-local)- it will set date time value in text box and user can select the appropriate date time values
6)search-The search type is used for search fields, like a site search, or Google search.
7) color- validation for color number values (Chrome support hexadecimal values and safari will show the color picker it self for user to select any of the colors)
8) placeholder- this will show the message in text box and when user click on the text box the value goes off. this will be like information for the content of the input text box.

check the below site for more and better understanding.

4 comments:

Balaji Birajdar said...

Nice work dude..Keep it up and thank you for the knowledge..

Anup K said...

really a good information...keep it up.

Dev said...

Very informative. Liked the way tags and input types are explained from developer's perspective.

Thanks :)

nitin said...

great info!