Third Mind | HTML5 Notes From A Recent Project
1143
post-template-default,single,single-post,postid-1143,single-format-standard,ajax_leftright,page_not_loaded,,qode-title-hidden,side_area_uncovered_from_content,transparent_content,qode-child-theme-ver-1.0.0,qode-theme-ver-10.0,wpb-js-composer js-comp-ver-4.12,vc_responsive

HTML5 Notes From A Recent Project

We did a minisite build for Star Magazine (designed by Star) and I used it as an opportunity to try out some stuff like HTML5, CSS3, and Progressive Enhancement. Here are my notes on HTML5 and I will follow up with notes on the other two subjects shortly.

In the context of this site there really was not much added benefit to using HTML5. All I did was use some of the new tags to add more semantic value to the markup. For example I used the header and footer tags for the header and footer content, the content tag for major content blocks and the aside tag for complementary content. The tags I chose to use are basically alternatives to using the div tags but with certain benefits:

  • The markup has more meaning to both humans and computers
    • Reading the markup is a lot easier
    • Computers and programs (like search engines) can make better guesses as to the relevant information that it wants to pull from your site
  • Exposes more styling/programming hooks
    • Less reliance on classes, for example using the header tag could replace using <div class=”masthead”> (I did not take advantage of this with this site build because it required custom positioning so I used ids for almost everything)

What to watch out for: IE < 9 does not recognize these new tags and therefore the styles will not be applied. There is a way around this. Apparently if you use javascript to dynamically create the new tags before the styles get applied it will work. I used a script that does this for you, it’s appropriately named html5shiv and is located here http://code.google.com/p/html5shiv/. Firefox 2.0 does not recognize these tags either but the percentage of ff2 users is supposedly under 1% of all ff users according the the w3c. If anyone knows where to get better browser stats on this please let me know. There is a fix for it but it didn’t seem as easy as supplying a js file and did not seem worth the hassle compared to the user percentages I was finding.

I will continue to collect notes of value on this subject so if anyone else has anything to add please share.

The site: http://starmagpromo.com/op_2011/