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
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.
, typically a headline or grouping of headlines, but may also contain supplemental information about the section.
This tag logically represents the footer section, with the copyright and other footer information including the footer links and all
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
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
An aside indicates content that is tangentially related to the content around it.
Defines sound, like music or audio streams
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
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 !