Ben McCallum's Blog

Dissecting ASP.NET MVC3, CSS3, HTML5, jQuery and a whole lot of other things ending with numbers…

Making older browsers recognize and correctly style the new HTML5 semantic tags

I recently converted a web app I was working on (Reach4urPhone) to use HTML5 semantic markup. Instead of using divs with id attributes such as “header”, “nav” and “footer”, I replaced them with the semantic header, nav and footer HTML5 elements. Makes sense right? All I had to do was update the HTML and my CSS selectors and all the browsers on my computer were rendering my web pages correctly. It was a five minute job and life was good… or so I thought.

A week later I had a job interview at a web development company. Whilst proudly talking about my latest project the interviewer asked to see my site. Without hesitation I began loading (Reach4urPhone) on the office computer. Then -BAM- all my styling was wrong! Padding seemed obsolete, margins were out, etc. Spluttering and trying to recover gracefully I finally brought it up in a more recent version of Safari that rendered my website in all its true glory. I knew it was a older browser issue but at the time couldn’t figure it out. Well I have now and I’m here to share.

Basically, older browsers that can’t recognize the new HTML5 tags don’t know how to display them. Some decide not to display the elements as block-level elements even though they are defined as block-level in the HTML5 W3C standard. To fix it, add this to your CSS: article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }. By setting display as block for the new and unrecognized HTML5 elements header, footer, nav and section you tell/force the browser to render them correctly instead of just guessing.

Thinking back I realized the new Visual Studio MVC3 Web Application project template (with the MVC3 Tools Update installed) with the “Use HTML5 semantic markup” checkbox checked actually has a default CSS file with the rule: header,footer,nav,section { display: block; }. Too bad I had noobishly removed it when decluttering.

- benmccallum

PS. I got the job :)

About these ads

Single Post Navigation

2 thoughts on “Making older browsers recognize and correctly style the new HTML5 semantic tags

  1. Without a doubt that all over the world there are plenty of people that prefer using old browser versions. They do this becasue they got used with those programs and becasue they simply like this type of programs. However the main problem is that old programs do not recognize updated Internet content. Personally not to encounter this type of issue i prefer to use the version of Opera.

    • benmccallum on said:

      You are right in saying that people hesitate to update software (and browsers) that they are accustomed to. For many business people this is because they don’t want to waste or lose business time figuring out how to access their favourites again or send an email, etc. For enterprises, the network admins have larger issues such as security, performance and so on that make it much more difficult to update network-wide software. For instance many Universities still run Windows XP, partly because Vista was crap but slowly they are jumping onto Windows 7.

      Check this out, you may find it interesting: http://www.theie6countdown.com/default.aspx

      Personally I have never used Opera, don’t ask me why but I just haven’t. One day I will give it a try but for now Chrome is my favourite browser. The challenge for developers is, however, to make applications that work for the widest range of end-users/browsers. Hence although we can use the new HTML5 semantic tags now, do so with caution and research.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: