HTML5: Sensible Markup for Your Web Applications

Happy Holidays, everyone. I just like to share something which isn't new to you all but may be new to some who aren't frontend "monkeys" or "ninjas" and I don't fall in any of those categories but still credible to write about what I've learned. I'm new to HTML5 but I've been using HTML5 a lot in practically all of my Rails 3 applications. I do not believe that I need to support Internet Explorer 6. It's almost 2011 and I think it's just about time that we stop supporting version 6. It would not benefit you financially if you chose to do so. That's a fact.

Why Use HTML5?

Search Engine Optimization. That's all I can say because that is my reason.

Custom Data Attributes For Tooltips

I recently found a need for a custom data attribute to be used with a jQuery plugin called Qtip. So each link could have a title attribute but the problem is it isn't good practice to add a long text for the title attribute. That's when I thought quickly about custom data attribute.

Translated to HAML, we have the following code:

%a{:href=>"http://www.bridgeutopiaweb.com" :data=>{:description=>"We are freelance Ruby on Rails Developers located in several different countries in the world. Most of us are senior Ruby on Rails developers working for different companies or working on our own projects. If you have a great idea and need the right people to work on it, let us know."}} BridgeUtopia

That's a long piece of text. I wouldn't add that on the main page. But that's a demonstration of what I needed.

Headings within header and headers within articles or sections

What are headings? They are the tags h1, h2, h3, h4, etc. At first I thought that the header tag was synonymous to the masthead. But it's not. Your HTML5 code can have several header tags. A page can only have one masthead. Jeremy Keith pointed out that is actually sensible to have header tags within article or section tags.

Ruby on Rails or Sinatra?

Ruby on Rails and Sinatra are both frameworks. Ruby on Rails uses MVC while Sinatra doesn't. Sinatra is faster but doesn't come with the conveniences that Ruby on Rails provides like scaffolding. Still, it uses Ruby that's why I like it very much.

Similar to the header tags, the footer could exist within an article or section tag. You can sensibly use article tag for grouping a blog content.

So the common misunderstanding about these elements is that they signify the position on a page when they actually don't.