The new HTML kid on the block !

Hope you all have heard that behind-the-scene progress of the new version of HTML, is cruising through.
There are some good news for those preachers of web standards who give importance to the semantically correct web.

With the the new version of HTML (HTML 5), still gazing towards the recommendation stage (the specification is not yet complete and it would take few more years), there are some wonderful elements/tags that are going to make HTML coding more sensible and structured business. These tags are specifically implemented for giving more semantically correct containers while coding HTML. Also there are many exciting features that comes with this new kid on the block, like more control over forms (web forms 2.0) and much more. These new additions are really gonna rock, and it really would be fun coding in the new version.

Let me list out some interesting tags of this new version, that some browsers already have started implementing support, but not in a complete manner.

Interesting tags – HTML5

<section></section>

This is a logical group of content, which can have nested sections withi. Each section can have header, footer or navigation within themselves depending on the context of application and the semantic of the page.

<header></header>

The

1
header

of a

1
'section'

, typically a headline or grouping of headlines, but may also contain supplemental information about the section.

<footer></footer>

This tag logically represents the footer section, with the copyright and other footer information including the footer links and all

<nav></nav>

Represents the navigation of the page, where normally there would be a list of links which leads to respetive contents/pages. This tag should be in the same level as header, footer and the main section tags used in a particular page

<article></article>

An article could represent content that logically is equivalent to an entry of a blog, an article or some other content from an external source

<aside></aside>

An aside indicates content that is tangentially related to the content around it.

<audio></audio>

Defines sound, like music or audio streams

<video></video>

Defines video, like video clip or streaming video

The following is a visual representation of the architecture of HTML tags in a typical web page.

Can we use it right away ?

Actually, yes, with a few extra steps. And it will work in all modern browsers. It can even work in IE6. There are only a few little quirks we need to get past if we’re going to start using this today.

First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.

Include this simple extra piece of CSS, and these new tags are immediately usable. Starting today. And of course, once HTML5 is more widely supported, the display:block; can be removed, as it will be included in the browser default styles.

Support in IE

There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.

document.createElement(‘header’);
document.createElement(‘footer’);
document.createElement(‘section’);
document.createElement(‘aside’);
document.createElement(‘nav’);
document.createElement(‘article’);

So, lets try building a semantically correct web, with all these wonderful tags to our support …lets try out the new kid on the block. Detailed posts on the usage of more exciting features of HTML5 are to be followed !