Digg into HTML5: The Basic

By Vasudevan Krishnamoorthy/ August 5th, 2010/ Posted in: HTML5 Tutorial, Web Development 2 comments

HTML5 is the next biggest thing that ever happened to web since AJAX. It’s the way forward to create stunning web apps and seamless performance. In this article I’m going to introduce you to the basic HTML 5 semantics and how to make it browser neutral.

To start off with HTML5 is only supported by the modern browsers and IE as usual acts fussy. But with a little bit of pampering from our end we can make IE behave.

What is HTML 5?

HTML5 is a major revision to the existing HTML4 standard. HTML4 helped us in formatting our content just as a normal word processor would. We intensively depended on CSS and Java script to add some detail to the website.

So a bunch of geeks from W3C sought to streamline the HTML language and make it more powerful. The most important features of HTML5 include Video tag, Web sockets, Geo location and Local storage.

When is it getting launched?

Well there are rumors that HTML5 draft will get finalized by 2020. But the reality is that HTML5 is so happening now. All the major browsers have started to support HTML5 in some form or the other.

Brief Intro

As designers we usually rely upon

’s to format our page and when the page grows in size we lose control over these elements. But HTML5 makes your life really simple with a cool new DOCTYPE.

[codesyntax lang="xml"]

<!--DOCTYPE html>

[/codesyntax]
Cool, isn’t it? Now let’s go and explore a little further. Every website will consist of a header, navigation area, content area, a side bar and footer. We usually define all the in a container and style them with CSS. This is a tedious process and no matter of your experience; you’ll find it difficult to structure your page. Now with HTML5 you don’t need to complicate things with

anymore.

Take a look at the following example,

[codesyntax lang="html4strict"]

<!--DOCTYPE HTML>
<html>
<head>
<title>Into to HTML 5</title>
</head>
<body>
<header>
<h1> Welcome to My site</h1>
</header>
<nav>
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">Services</a></li>
<li> <a href="#">Blog</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<p>
See, HTML5 is simple!
</p>
</article>
<aside>
<p>This is a cool little sidebar.</p>
</aside>
</section>
<footer>
This is your footer.
</footer>
</body>
</html>

[/codesyntax]

Looks simple isn’t it? Now try adding some style to it and Voila! You have a fresh HTML5 layout with you.

Browser thoughts

This should just work fine with all the modern browsers. But when you open this document in IE it’ll give you a heart attack. It is because that when we open a html document the browsers treat these elements a part of the DOM structure and IE doesn’t understand it. So to make it work pat it’s back and add the following code,

[codesyntax lang="javascript"]

<script type=”text/javascript”>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
</script>

[/codesyntax]

The above script adds these elements to the DOM and now IE will support our HTML5 document. As we say, there is always a better way. Instead of adding these elements one by one manually, include the following script.

[codesyntax lang="javascript"]

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

[/codesyntax]

And that’s it. You have successfully created your first HTML5 web page.

In the next part of the series I’m going in detail about the power of HTML5 forms. Stay tuned and subscribe to our rss feed for updates. If you have any queries regarding HTML5 leave a comment and I’d be happy to help.

Author Bio:-

Vasudevan Krishnamoorthy

I'm Vasudevan, 20, Software Engineer based in Chennai, India. I have a natural flair for computers. I create vertically scalable applications for the web and keep intricacy at bay. I try to ignore the existence of Internet Explorer but failing time and again. Beware of my constant whining about IE.