BANGALORE, INDIA: 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.
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.
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 Tag
nav tag used to display left navigation
section tag
article tag
footer tag
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.
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 Tag
nav tag used to display left navigation
section tag
article tag
footer tag
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.
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.
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
No comments:
Post a Comment