Techamor Technologies

Technology is for All!

HTML5

HTML,( Hypertext Markup Language) is the main markup language for web pages and it allows you to create structured documents by using tags which you have to write in angled brackets and which includes headings,paragraphs,lists ,images etc..The W3C is the body which has been responsible for the transition of HTML 1.0(when the web was created by Tim burners Lee ) to different improved versions,the latest draft version being 5.The work on HTML5 was started by Web Hypertext Application Technology Working Group. Although,being in draft stage many parts of HTML 5 are stable and they are being supported by many browers.

Below is the list of the popular browsers and the score represents the extent of HTML features that they use.

Apple Safari 5.0: 208

Google Chrome 5.03: 197

Microsoft IE7: 12

Microsoft IE8: 27

Mozilla Firefox 3.66: 139

Opera 10.6: 159

Mozilla Firefox 4.0 beta version 189

To see the results yourself you can go to www.html5test.com , this site as the name says determines how much your browser supports HTML 5. So, as you can see the newer versions of the browsers (see the difference in results of Mozilla 3.66 and Mozilla 4.0 beta) are coming up with the HTML 5 support.What it is that HTML5 will offer in the near future that is luring the giants like google and apple to invest in this technology?Why IE9 has embraced HTML5?Let us try to answer these questions by looking at some of the HTML5 features.

1.Sematically meaningful tags: This is one of the most striking feature in HTML 5 that HTML 4 didn’t had.There are many tags like <div id="header"> and <span class="nav"> which have been replaced by tags like <header> and <nav>.

2. Introduction of newer tags:

Sno.	Tag Name	Function
1	<article>	The article tags defines the content from a blog,forum , or any other from an external source.
2	<header>	The Header tag defines an introduction to the document.
3	<audio>	For embedding & playing audio without the use of plugins. HTML5 has support for MP3,Ogg Vorbis,AAC,PCM audio,WebM audio formats
4	<video>	For embedding & playing video without the use of plugins.HTML5 supports four kinds of video formats WebM,MPEG-4,H.264,Ogg Theora.

Note: Yes you can try and learn the html5 elements at http://www.w3schools.com/html5/default.asp

There is a sandbox available too for testing your HTML5 tags.So best of luck guys!.

3. Geolocation feature: The geolocation feature in HTML5 tells you where you are located(The place from which you are accessing the internet.). To Test the geolocation feature visit http://benwerd.com/lab/geo.php.

4.WebGL: WebGL is the 3D Graphics API which allows implementation of 3D graphics in browser without the use of plugins.The WebGL is built over Html5 canvas element. For more information on WebGL visit http://www.khronos.org/webgl/wiki/Main_Page

5. Storage: The Storage feature allows you to store things in your computer and retrieve it later.This feature is different from the storing of cookies , as the cookies are sent to the web server every time a new page is requested. This wastes a lot of time. HTML5 storage stays on the computer and the websites can access it by using Javascript.

6.WebWorkers:They provide standard way to run JavaScript in Background. So the process which involve longer time could be encapsulated as a WebWorker. This reduces the unresponsiveness of some scripts.

7.Microdata:Microdata feature allows for semantic markup for a web page. For eg. for a page you can add in extra information through tags that the image belongs to Creative Commons License.

8.New input types: Well you make a form using form tag <form> and input text by using <input type="text">,password by using <input type=”password”>,submit by using <input type=”submit” button>.HTML5 has more input types to offer like <input type="search"> for search boxes, <input type="number"> for spinboxes, <input type="range"> for sliders,. <input type="color"> for color pickers etc.

9.PlaceHolder Text: Any field in a web page will be having a placeholder text, if it is empty or not in focus. For eg. In a text field you can have a placeholder text like “Place your text here” and when you focus on the textbox the text vanishes.

Sites using HTML5

Enough of the features!.Lets us see some of the names of the sites that uses HTML5.

1.Youtube:Yes our own YouTube!. You can join YouTube HTML5 has a Beta program in which you will allowed to run some of the videos in HTML5 which uses the <video> tag. Even some of the videos in apple.com uses HTML5.For more information please visit http://www.youtube.com/html5.

2. Mozilla.com: When I ran the HTML5 validate test on www.mozilla.com it showed passed successfully with two warnings.

3. http://beanstalkapp.com/: This site supports both subversion and GIT repositories, so your effort of creating one of your own is done away with. This site also supports HTML5.

You can test whether your own site supports html5 or not by using HTML5 validator provided by W3C.This validator can be found at http://validator.w3.org/

HTML5 offers you a variety of features but it is yet in its working draft and it is yet to be implemented fully. But the things are looking up as many of the browsers have already embraced HTML5 and many sites have HTML5 support. The Google Chrome team now also plans to support the HTML5 database API. There are libraries like Modernizr which uses javascript to the advantage of HTML5 new features. (www.modernizr.com). Those who want to enjoy some of the missing features can install additional plugins to seek some solace.( For eg. to enable WebGL in chrome you can visit http://www.m0interactive.com/archives/2009/10/26/how_to_enable_webgl_on_google_chrome.html.). In the years to come the web will be more powerful & free of additional plugins. Let’s pray that day comes soon!

Login or register to post comments

Tech Quotes

Not everything that can be counted counts, and not everything that counts can be counted.

Tech Word

Tech Term of the Day - VERONICA

The name actually stands for "Very Easy Rodent-Oriented Netwide Index to Computerized Archives." Pretty weird, I know. The "rodent" part of the acronym refers to how the Veronica utility allows you to search all of the world's gopher servers using keywords. (That's about 10 million items from over 6,000 gopher servers.) After searching for the terms, Veronica displays a list of gopher menus and articles containing the key words you searched for. The more recent versions of Veronica can also search certain Web pages, newsgroups, and FTP sites.Unlike most search engines, Veronica searches for keywords only in gopher server menu titles, and doesn't look throught the entire text of documents. When searching with Veronica, you can use the logical operators AND, NOT, and OR to help narrow your search. Also, typing an asterisk (*) at the end of a word will match anything starting with that word. Sound familar to any Unix users?Copyright 2010 TechTerms.com. Unauthorized duplication is prohibited.

Product Reviews

more

Tech Jokes

An IT Professional gave birth to twins

An IT Professional gave birth to twins.
Guess what he named them..

Copy & Paste..

Theme by Dr. Radut.

Techamor Technologies

HTML5

Robotics

User login

Active forum topics

Navigation

Who's online

Who's new

Security

Tech Quotes

Tech Word

Product Reviews

Tech Jokes

An IT Professional gave birth to twins