A First Look at HTML 5

Officially, HTML 4.1 was supposed to be the last word on HTML. According to the W3C, HTML 4.1 was complete and concise, and required no further work. But that was not good enough for the HTML user community, who formed the Web Hypertext Application Technology Working Group (WHATWG). This group grew strong enough to force the W3C to form an official HTML 5 working group a few years ago, and what they have eventually created is the very small seed that will one day become HTML 5 (I say 'one day' because the official specification expects HTML 5 to be completely functional and ready by the year 2022 - and no, that wasnt a typo, I did mean 2022).
Ok, I see the look on your face. Why the heck would you want to start using a version of HTML that will only be complete two decades from now? The answer is simple. HTML 5 is already being implemented into browsers right now: Opera 10 as well as Firefox 3.5 are the first browsers offering partial HTML 5 support. Internet Explorer and Safari are set to follow suite shortly. However, more than this is the simplicity of the built in functionality of HTML 5. Read on and you may find that you can't wait to start using HTML 5 yourself. Let's jump straight in and explore the new features that HTML 5 offer.
General Changes
The first cool thing--and this is a biggie in my book--is the basic DOCTYPE declaration. Wouldn't you like to get rid of all that clutter that you dont really know what it is or why you need it? How about building a doctype like this?



Thus, a simple document could look like this:

Main Heading

This is an example document

Come on, I can see you jumping for joy! But there's more.

,

and

The

tag is intended to be a container to hold content, like the content of a web page. The

tags divide the article into sections, and the

tag creates a holder for header tags that can demarcate a section, as shown below.

An Overview of HTML 5

Looking at Spec Changes

This is the first paragraph.

This is the second paragraph.

Tags

Laying out the markup

This is the subsection P1

...

This markup now moves the header tags into containers, rather than having them free-roaming the HTML document. As HTML becomes more than just markup for displaying browser content we find that it is evolving into a stricter, more defined language. This will make it more flexible for the day that HTML5 will replace Flash. Yes, you heard me. HTML5 has a tag that will in time allow it to render images and Flash-like animations. This is perhaps one of the reasons it is only expected to be complete in 2022.

This element introduces inline sidebars for related content. In the same way that magazines have smaller stories that are related to the main story running in smaller columns inside the main story, and aside will allow related content to be displayed seperately to the main article. While this type of content seperation was previously left to the CSS wizards among us to pull off, it will now be possible with minimal CSS and the use of a simple tag.

The idea is similar to the

tag. In order to seperate navigational elements from the actual content of a web page the

tag will be used. The idea is that a browser will take the content in the tag and--even without the use of CSS--display it in a manner that clearly defines it as something that is not content.

and

Here we end up with purely positional tags. As logic dictates, the header will apear at the top of the page and the footer will appear at the bottom. Thus these tags are more organizational than functional. Typically, you would put the website's masthead banner into the header and the footer might contain copyright notices and links.
And Many Many More... Let's have a brief look at the plethora of tags that HTML 5 will offer:

* - This tag defines all sorts of nested menu items likes toolbars and lists.
*

- Writing a film script? Dialog automatically formats dialogs into script-readable format.
* - An inline tag, like a span, that emphasizes text between quotes.
* - Need to format time for a timezone, country or region? HTML 5 uses this tag to do all that, and more!
*

- Perhaps my favorite - this works like tooltips on links, showing extra details about links as they are clicked.
*

- This is a nice one, a wrapper for images that uses the legend tag to create a title.

There are many, many more HTML 5 elements in the works, like e-mail form fields that auto validate, among others. The point is that when HTML 5 hits, its going to change the way the web works. It is going to seriously challenge and perhaps kill Flash and Actionscript. I am somewhat laughed at in my developer community for saying that, but I don't mind. I have been wrong and right before. What is more important is that I am AWARE of progression. I think you should be too. As a developer you have a responsibility to keep up with the times. Keep looking around and learning about HTML 5. It's coming.
Be ready.
Until next time, Happy Coding!