How to Deploy HTML5 in Non-HTML5 Environments

HTML5 elements are the most rational way to structure page layout. They make life easier for designers, with tags like header and footer that clearly indicate what kind of content goes in which element. And as search engines learn to recognize and incorporate HTML5 structure elements, they’ll make content more accessible for people looking for information online.

But are they supported in all browsers? Here is the list of browsers that support HTML5:

  • Internet Explorer (Version 9 and newer)

  • Firefox

  • Chrome

  • Safari

  • Opera

  • iOS Safari (for Apple mobile devices)

  • Opera Mobile (for mobile devices using the Opera browser)

  • Android Browser (for Android mobile devices)

What about older browsers? The only problem here is Internet Explorer versions 6, 7, and 8. Because of Microsoft’s (“unique”?) upgrade policies, people with older Windows computers are in some cases locked out of updating their versions of Internet Explorer.

This isn’t an issue for other browsers. Firefox, Chrome, Safari, Opera, and mobile browsers make upgrading free and simple, and besides, their current versions all support HTML5 structure tags. But not everyone with an older Windows computer has installed Firefox, Chrome, Opera, or Safari (all of which have Windows versions).

And so, because of Microsoft’s policies, and because there remain sections of the browsing public who have not installed modern browsers on their computers, it will remain the case for some time that people stuck with old, outdated versions of Internet Explorer will have problems opening pages structured with HTML5 tags.

If styles are assigned to these tags, and those styles are relied on for page layout and design, then IE 6–8 visitors will see pages with collapsed and corrupted page layout, an unacceptable experience.

Because this significant, yet declining, section of the “browsing public” will have problems viewing pages with HTML5 structure elements, many web designers and coders have developed work-around solutions for IE 6–8 users that enable them to experience modern web pages that use HTML5 structure tags. Those workarounds are pretty simple to implement. You’ll find them by searching the Internet for “HTML5 IE workaround” (and you’ll see several million results).

One of the most tested, easy-to-use, and widely applied of these workarounds is a JavaScript called “HTML5 enabling script.” HTML code that links to this script can be copied and pasted into a page from remysharp.com.

The required code should be copied and pasted into the <head> element of your page. It links to a JavaScript (called html5.js) that allows outdated versions of IE to interpret HTML5 structure elements.

The following code shows a <head> element with the HTML that links to html5.js:

<!doctype html>
 
<html>
 
<head>
 
<!--[if lt IE 9]>
           <script src=”http://html5shiv.googlecode.com/
           svn/trunk/html5.js”></script>
           <![endif]→
 
</head>
 

By the way, if you create an HTML5 page in Dreamweaver CS6, the link to this script appears in the <head> element of your page automatically.

Adding this code in the head section of your pages ensures that folks using IE6, IE7, and IE8 will be able to experience your pages as you designed them.

blog comments powered by Disqus
Advertisement

Inside Dummies.com