It’s time to get to work on our HTML5 chops. We’ve had plenty of theory. Now let’s get to it.

Here is the code that we are going to work with. Take a minute to copy and paste it into a text editor and give it an html extension. Once you’ve done that, go ahead and give it a spin… Looks nice doesn’t it. That’s your proof of concept. It works. Now let’s go through it section by section.

[html]

header

HTML 5 Demo

article

Terminology and Usage

section

• The header element represents a group of introductory or navigational aids.
• The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
• An article element is “independent” in the sense that its contents could stand alone, for example in syndication.
• The section element represents a generic document or application section…[it] is not a generic container element.
• The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
• The footer element represents a footer for its nearest ancestor sectioning content.

[/html]

DOCTYPE

The doctype is easy now. Just specify the technology that should be used to render the page. For now all you need to use is html. It’s still a pain in the ass to serve a page as xml so forget that.

Script

We don’t need a full script tag anymore either. The default type is Javascript, yay. So what is that big block of Javascript then? It’s for the IE’s go figure. Unfortunately IE won’t recognize those as CSS elements unless we do that. Stupid, I know, but relatively painless.

Style

Did you notice anything different about the style tag? Right. No type. Guess why. Right. The type defaults to CSS. Thank the W3C for making our jobs at least a little more efficient. That first line of CSS is important. You have to set the HTML5 elements to display:block or they will render as inline (at least for now). All that other stuff is just there for your benefit but it isn’t required, so we’ll skip it.

Part 1 Conclusion

The W3C has done a great job of simplifying syntax in HTML5. Apart from the various IE fixes it’s quicker to write than ever before. Now go, go and look at your HTML5 page and be in awe.