HTML 5 – The future of the web

Like it or not web developers and designers, HTML 5 is here and now is the time to learn it and start using to develop your sites and pages. I’ve been using it for a while now, and it brings some new things to the table, including a new learning curve.  As someone who cut their teeth on XHTML 1.0 Strict, the new HTML is so much more lenient it is like a breath of fresh air into my development process.  For those who haven’t started using it yet, here is my assessment of the features thus far:

1 – Ease up on that <div> tag soldier!

HTML now includes new tags, solely for the purpose of making your page outline more logical, and structured better, with less markup.  Now, rather that <div id=”header”> or <div id=”nav”> we have the tags <header> and <nav>, respectively.  Lets go through some of the more useful sectioning tags now:

1. The <header> tag.  Useful for enclosing just that, the header of your document — or section for that matter. This tag delineates the beginning of a new area of content.
2. The <nav> tag.  Here is where links are collected, and the document structure lays out your navigation.
3. The <article> tag. There is some confusion with this and the <section> tag.  Use <article> when you are enclosing content that could potentially be republished as it’s own entity.  A blog post for example.
4. The <section> tag.  This is more of a generic content enclosing mechanism.  Using a section tag says: this is an area of related content.  Treat me as such.
5. The <footer> tag.  Use this in a similar manner to the <header> tag.

2 – Have your <h1> tags your way!

Someone told me once recently, “You can’t have more than one H1 tag on a page!”.  While he was right in the old way of doing things, he is wrong with the new specification. Basically, with each section of content you define in your document, you can start a whole new hierarchy of heading tags and still be semantically correct.  The <h1> thru <h6> tags will still establish page structure if you leave them out on their own in the document, but as a best practice, use them to establish the heading of a new section of content.

3 – Self closing tags? What self closing tags?

If you’re like me, you’ve been adding the / to close all those <br />, <hr />,  and other void tags.  No more.  HTML 5 in all it’s loose goodness no longer requires it (in fact, adding the / has always been poor HTML, added only to conform to XML standards).  So don’t do it. It’s really hard.  I’ve made so many <br /> that making a <br> seems unnatural and uncomfortable. I’m learning.

That’s my beginning to HTML5 markup.  For more information please see the W3C HTML5 standards page . I’ll be adding more HTML5 stuff here soon, so check back.

[Jeromy]