HTML 5: The new HTML kid on the block!

by · May 27, 2009

html5Hope 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>

A section is a thematic grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup.

<header>

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

<footer>

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<nav>

Defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header, and footer.

<article>

An independent entry in a blog, magazine, compendium, and so on.

<aside>

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

<audio>

Defines sound, like music or audio streams

<video>

Defines video, like video clip or streaming video So a typical blog page would look like the following in HTML5
<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights</p>
    </footer>
  </body>
</html>

Code language: HTML, XML (xml)

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.
<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

Code language: JavaScript (javascript)
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 :) This article was written by MysticPixels, Author of Web 3.0, CSS and other articles. We welcomes your tips and guest articles. You may want to login directly in this website using your Google/Yahoo/OpenID login and contribute. If you liked this article, please submit it to your favorite social media sites.
Get our Articles via Email. Enter your email address.

Tags:

You may also like...

2 Comments

  1. Mitran says:
    28 December, 2010, 10:49  

    i`m rookie in HTML5 can you provide any ref links to learn HTML5 from the begining…..

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow: