HTML5 structure: HTML4 and XHTML1 to HTML5

Now let’s look at example structures for a basic article page; using the standard layout of a page header (with logo etc), navigation tabs, a main column, a side column, and a page footer.

Oli Studholme shows the differences in HTML4, XHTML 1.0 and the same markup in HTML 5. He also talks about how one might go about styling and scripting some of the new block level elements in HTML5.

Should you bother with going with HTML5 at this point?

So if you’re not going to use HTML5’s new elements, which IE doesn’t support without Javascript, what’s the point of thinking about HTML5 now? I see several benefits:

Thinking about HTML5’s structural elements (even if we only express the semantics via class names) will make our code more logical and semantic

HTML5 is defined in far greater detail than previous HTML/XHTML specs, giving us more guidance in creating web pages

Another benefit of this detail is more accurate validators (W3C, Validator.nu), with the potential for more detailed error messages

If you think you might convert to HTML5 in the future, the HTML5-elements-as-class-names approach and a little regexp magic should remove a lot of the pain of converting

Now that XHTML2 development will be halted, starting to learn about the official future of HTML is a good idea.