Third Mind | HTML5 Notes From A Recent Project
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 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: