Design, CG Graphics & Inspiration
HTML 5 in Internet Explorer

HTML 5 in Internet Explorer

In brief: How to make the new HTML 5 tags work with Internet Explorer.

Web developers cry happily looking at HTML 5, which has finally arrived. Though most of its features, such as WebGL, multiple streams, and web sockets, are not yet supported by some browsers, we can already use its new, handy tags.

Alas, Internet Explorer (even its latest version, IE8) is dragging its feet as usually — it simply ignores any tags newer than HTML 4, so you cannot even use CSS styles with them!

Actually, there are two problems in IE: you have to separately switch on the support of the HTML 5 tags in the ordinary document and in the dynamically added (for example, via AJAX) content.

Advantages

The reasons to use the new tags:

  • Brief DOCTYPE — Finally, you don’t need to copy the long DTD as you can simply type in the following:
  • More concise attributes — Instead of
    , you can simply write
  • More semantics — Now search engines and web browsers will know where is the menu
    , where is the webpage content
    , and when the webpage was last updated

New HTML 5 tags

You can start using the following new tags, not waiting for browser support to be added:

  • Block for a navigation menu or an introduction (for example, the website’s top):
  • Navigation (for example, the website’s menu):
  • Secondary information (which is often placed in sidebars):
  • Independent part of the content (for example, a text of the article, or a separate comment):
  • Document section:
  • The website’s “bottom” (often used for a copyright note):
  • Description of a picture/video:
  • Block of headers. (For example, the header may consist of the main header and the subheader.):
  • Marking of some word (for example, of a word which matches some search query):
  • Program output or calculation results:
  • Time. In datetime, time is included in a machine-friendly format. If the pubdate property is used (foes of SGML may write pubdate=”pubdate”), then the time refers to the creation of the document or of the nearest article:

HTML 5 many other properties too, rel values,
types, which you can already use. Read more at W3C or in other articles.

Troubles with IE

It’s hard to say if this is a specific problem or a peculiarity of Internet Explorer, but this browser simply ignores the tags it doesn’t know. Surely, you can say that the new tags break the HTML 4 standard, which is supported by IE, but the drawback is very real: Even the latest version of Internet Explorer doesn’t let you easily use CSS styles with the new HTML 5 tags. The problem should be fixed in IE 9, but it’s not yet available even in a beta version.

Solution

Let’s first talk about the “good” browsers. Surely, the new tags don’t have any special built-in styles (for example, unlike). Though we don’t need those styles that much, it is worthwhile to make some elements as blocks in CSS:
aside, nav, footer, header, section { display: block }

The code to include HTML 5 tags for IE is already available, so just include it in , before any new tags:

Most of HTML 5 based sites use exactly this script, so it’s highly probable that it has already been cached by the user’s browser.

The innerHTML solution is available as a compact JS script. Download it and include it in your website’s code, and wrap all HTML code into the innerShiv(html5) function.

jQuery example:
$('#example').append(innerShiv("

jQuery "))

Pure JS example:
var s = document.createElement('section');
s.appendChild(innerShiv("

&ltPlain JS "));
document.getElementById('example').appendChild(s);

For $(html5).appendTo(‘#example’), pass false as the second argument in innerShiv, so the result is in the jQuery-compatible format:
$(innerShiv(html5, false)).appendTo(‘#example’)

However, I simply made the $5 function for myself, and removed the code not needed by good browsers:
if (jQuery.browser.msie) {
window.$5 = function(html5) {
return jQuery(innerShiv(html5, false))
}
} else {
window.$5 = function(html5) {
return jQuery(html5)
}
}

I just write:
$5(html5).appendTo(‘#example’)

Long live the new Web! :)

p.s. Also you could read this article on russian here. My website – http://sitnik.ru

  • Splashnology Editors,
  • March 10, 2011

SHARE THIS POST

This post has been written by the team here at Splashnology.com

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • i have seen the logo already on another website with very similar content

  • i have seen the logo already on another website with very similar content