HTML 5, Why should we use it and where should we use it

HTML 5 the buzz word is roaming around our ears for quite a long time now. But with a change a lot of questions and confusions also come in our mind. Is it really helpful? Why should I bear the pain of the transition from one technology to other. What are the advantages and disadvantages of using it? and lots more. After going through a number of articles and trying some of the html features by myself i thought I should share some of  my experiences with my friends.

1.The very basic question is why should we use HTML 5?

If there is no real benifit in using html 5 why should we use it? We all are very busy in these days so there should be some valid reason for upgrading. Luckily I found quite a number of reasons to upgrade.

The number of API’s

HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:

  • API for playing of video and audio which can be used with the new video and audio elements.
  • An API that enables offline Web applications.
  • An API that allows a Web application to register itself for certain protocols or media types.
  • Editing API in combination with a new global content editable attribute.
  • Drag & drop API in combination with a draggable attribute.
  • API that exposes the history and allows pages to add to it to prevent breaking the back button.

The new structural elements in html 5 will help the UI developers and programmers a lot

.

Lets see an example

html5_structure

Now whether you are a designer or a developer just imagine how clearly everything is defined. As a programmer or a UI developer how easily you can separate the header , footer and body section.

2.Browser Support

Even with the very limited support for HTML5, the Web is far too progressive to not create a testing environment for us to play around. Currently, Safari is our best testing platform, as it supports most of the new elements and APIs. Of course, that may change at anytime so keep and eye on Opera, Chrome and Firefox as well.

3.The main changes in html 5

a. New Doctype

In HTML4 and XHTML 1.0 it was

<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

which is very tough to remember

Now  it is

<!–DOCTYPE html>

Even that is not needed in html5. It is there to support the older browsers.

b. Adding an image caption in easy way

<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>

c. No type tag is needed for css or JS

<link rel=”stylesheet” href=”path/to/stylesheet.css” />
// <![CDATA[
src=”path/to/script.js”>
// ]]>

d. Quote is not necessary

You don’t have to wrap your attributes in quotation marks if you don’t want to. Even You don’t need to close your elements :). But  if you do it’s a better practise.

e. Make your content editable

Cool feature. You can directly edit your content through browser.

<ul contenteditable=”true”>
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>

f. The semantic header and footer

Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:

<header>

</header>

<footer>

</footer>

Now we can use header and footer more than once. They are just containers.

There are a number of form elements which is added in html5 but for the lack of cross browser support I am not mentioning it here.

g. Hgroup

Now we can group all the header elements and can have a hierarchical relationship among them.

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
<!–hgroup>
</header>

h. Required Attribute

Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute as:

<input type=”text” name=”someInput” required=”required”>

If the input is left blank, and the form is submitted, the textbox will be highlighted.

i. Autofocus Attribute

Again, HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus attribute.

<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

i. Regular Expressions

This attribute really makes me excited. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.

<form action=”” method=”post”>
<label for=”username”>Create a Username: </label>
<input type=”text” name=”username” id=”username”  placeholder=”4 <> 10″   pattern=”[A-Za-z]{4,10}” autofocus required>
<button type=”submit”>Go </button>
</form>

Did you see how your  life is going to be easy with Html5? You do not need to go for javascript regular expressions for validating.

4.Detect browser support for HTML5

alert( ‘pattern’ in document.createElement(‘input’) ) // boolean;

this is a popular method of determining browser compatibility. The jQuery library utilizes this trick. Above, we’re creating a new input element, and determining whether the pattern attribute is recognized within. If it is, the browser supports this functionality. Otherwise, it of course does not.

5. A major question HTML5 and Internet Explorer

In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.

header, footer, article, section, nav, menu, hgroup {
display: block;
}

Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:

document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“menu”);

Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.

If you want to call it directly

<!–[if IE]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt;
<!–[endif]–>

6. What will happen to div?

if you find that you need to wrap a block of code within a wrapper element specifically for the purpose of positioning the content, a <div> makes perfect sense. However, if you’re instead wrapping a new blog post, or, perhaps, a list of links in your footer, consider using the <article> and <nav> elements, respectively. They’re more semantic.

Have a look at the  html5-cheat-sheet, It will give you an idea of the new attributes and elements at a glance

Thanks a lot for reading. Hope the information given here is useful. Let me know if you want to see practical examples of using these html5 features with source code.

I am thankfull to

http://www.smashingmagazine.com/

http://net.tutsplus.com/


Advertisements

4 responses to this post.

  1. Posted by sanjib saha on August 10, 2010 at 1:01 pm

    It’s a nice post . I will expect some more information about its performance in terms of speed and processing . Lets wait for other browser to come up with html5 support. Thanks for the post

    Reply

  2. Posted by Arka on August 11, 2010 at 9:27 am

    Watching this space for more informative inputs.
    Maybe some demos of work done in HTML5 and CSS3? 😉

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: