The Beauty of HTML5

If you are still using HTML4 for your new websites you should stop probably stop. And I’m not saying this because of standards compliance, or some sort of web snobbery. I’m saying this because it is a pragmatic thing to do. HTML5 is just a better standard – and not just because of the fun features you see in the online demos.

While the canvas stuff, the local storage and embedding native video is really cool, I think the biggest improvement HTML5 has on it’s predecessors is the new semantic tags you can use to organize your content.

W3C actually studied how modern websites are designed, and saw that most HTML4 content follows a similar pattern. Here is an example of a very basic HTML4 Strict web page skeleton I just threw up in five minutes. It could be start of a blog template for example:



    
        
        
        
        
        
    
    
        

        

Post Title

Lorem ipsum dolor sit amet...

Posted on March 20, 2013

Note the structural elements in the body of the page. We have a document header on top, a page footer on bottom and a big content div in the middle. Inside said content div we will commonly have “post” or “article” divs, which contain more structural elements: post heading, post content, post metadata.

All of this is accomplished via the magic of the all purpose div and span tags. This works well, and is actually what you are supposed to do in HTML4 but it gives you messy code. You are mostly using id and class attributes to give shape to your structure, and the unfortunately they are only visible on the opening tag. It is not uncommon to see websites which include snippets like this: