How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6
HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5′s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.
Tutorial Details
- Technology: HTML
- Version: 5
- Difficulty: Intermediate
- Estimated Completion Time: 1 hour
Prefer a Video Tutorial?
Quick Overview of HTML 5 Elements
The HTML 5 Working Draft provides a new set of semantically-meaningful
elements for describing a typical web page layout. Using elements that are “meaningful” (i.e. describe the content they contain)
makes it easier for you to read and organize your code, and makes it easier for search engines and screen readers to read and
organize your content.
The HTML 5 elements we’ll be using are:
- header
- footer
- nav
- article
- hgroup
Just by reading the names of the elements, you should get a pretty good idea of what they’re for, and that’s the point!
You can now stop abusing <div> in all your tableless designs, and instead make headers out of “<header>”s and
footers out of “<footer>”s.
The one element that may not be obvious is <hgroup>. This element simply defines a group of header elements (<h1>
- <h6>) so you can group a blog post title and subtitle together, for example. Think of it as not the header of the page,
but the header of the content section.
Step 1: The HTML
We’re going to recreate the most common layout on the Web, the 2-column layout:
This layout is usually put together with a waterfall of <div> elements (or, shudder, a <table>), but with HTML 5
you can code this page quite naturally.
<!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html> <head> <title><!-- Your Title --></title> </head> <body> <header> <!-- ... --> </header> <nav> <!-- ... --> </nav> <div id="main"> <!-- ... --> </div> <footer> <!-- ... --> </footer> </body> </html>
And to round it out, within the “main” element, I’m going to add some simple post templates:
<article> <hgroup> <h2>Title</h2> <h3>Subtitle</h3> </hgroup> <p> <!-- ---> </p> </article>
Now we have an entire layout skeleton in HTML that uses nothing but meaningful tags for all the content. Easy to read,
easy to parse, easy to design for.
Some savvier readers may ask “why didn’t you use <section> instead of a <div> for the main column? Wouldn’t that
be more “meaningful?” You certainly could, and it would be “valid,” but the <section> element isn’t meant for this
sort of layout function. From the spec:
The section element is not a generic container element. When an element is needed for styling purposes or
as a convenience for scripting, authors are encouraged to use the <div> element instead. A general rule is that
the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
Step 2: The CSS
Positioning these elements would be easy if they were all <div>s — we know how they are handled by every browser, so
we know how to write CSS to them. However, this is only the case because every browser applies a default stylesheet to a page.
Even if you haven’t specified one, there is CSS at work every time a page you’ve written gets loaded into Firefox or IE.
For example, here’s the styling applied to a <div> in the default “html.css” file that comes with Firefox:
html, div, map, dt, isindex, form {
display: block;
}
But what happens when a browser comes across an element that it doesn’t recognize? We can’t be sure. It might get no styling,
it might inherit a some default styling, it might not be displayed at all. Therefore, we make sure that we account for any and
all styling of our new elements in our own CSS. No assumptions.
/* Make HTML 5 elements display block-level for consistent styling */
header, nav, article, footer, address {
display: block;
}
Now we can treat these elements just like <div>s, assured they are displayed consistently.
The Problem
Let’s take a look at our layout so far. I’ve put together a more fleshed out version of this code and tested it in
a few browsers. Check out our layout in Safari 4:
However, look at what happens in Internet Explorer 6:
What’s wrong with this picture? By explicitly setting display: block; in CSS, we should have
communicated to the browser our intentions for that element.
Unfortunately, IE is ignoring elements it doesn’t recognize, regardless of CSS. Our content is left floating in its
parent’s container, as if the HTML 5 elements didn’t exist. Somehow, we need to get IE to render unknown elements,
and styling them appropriately isn’t going to do it.
Step 3: The JavaScript
Luckily, there is a way to get IE to recognize new elements via some simple JavaScript.
I first read about this technique on John Resig’s blog; he’s called it
the “HTML 5 Shiv.”
It simply involves calling document.createElement() for every new, unrecognized element.
Traditionally you’d make this call in order to inject an element directly into some branch of the DOM; in other words,
into an existing container within the <body> tag. You can do that to fix this unknown element issue as well. However,
this trick also works by calling document.createElement() in the <head> tag, with no refence to a containing element!
That makes it much easier to read and write:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
To make things even more convenient, Remy Sharp has released an
“HTML 5 Enabling Script,” which does the same thing as
our code above, but for all HTML 5 elements.
Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as <article>, is to use the HTML5 shiv, I’ve quickly put together a mini script that enables all the new elements…
Now that we’ve added our JavaScript, let’s look at that again in Internet Explorer, with our new JS code:
Perfect. Internet Explorer 6 is now rendering HTML 5 code just as well as Safari 4.
Conclusion
HTML 5 is exciting for any web designer who wants to create clean, easy-to-read, semantically-meaningful code. And with just a
couple of simple steps — one line of CSS and one line of JS per element — we can start making use of HTML 5 today.
Got any more tips for squeezing every bit of HTML 5 you can into your production code? Let us know in the comments!
Write a Plus Tutorial
Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Bill Peña
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Your focus is on the “11%” of visitors not using javascript? That is like worrying about the wag of the tail of a water buffalo as his horns gore your guts out. It is NOT the visitors that you must answer to. You must answer to your corporate CLIENT !
Your corporate client does things their own way. They have corporate unwritten policies of how things are done, and you might be seen as simply the computer janitor trying to tell management how to run their business. Telling them about visitors that see their “web page?” They do not care, not because it is irrelevant, but because you are a nobody and worse yet you are not following corporate policy. “Shut up. Sit down. Make the internet fit our company. We used Internet Explorer when I got here and that is the way we do it.”
“That is how it is done here.” You have probably heard that.
“That is nice. But, we do it this way. If you have a problem, then we can get someone else to do the web page.”
Long term industries commonly have an aversion to upgrading what has worked in the past.
Example: Many still use Windows 2000 and IE. Therefore they are locked out of newer Internet Explorer versions and they do not even consider “replacement” browsers.
And you can not talk them into Windows beyond 2000. It is this basic: After Windows 2000 Microsoft said that they (the company that you work for) has to “ask permission” to install newer operating systems. You might see it as simply getting validation. They could see it as intrusive. That is “none of Microsoft’s business.” “We bought the program and we can install it as we want and use it as we want and that is none of your business.” You might be shocked at how many long term big businesses have an almost written policy against any software that has to be “validated.”
They generally despise “Apple” or “whatever Apple it is calling itself these days” simply because it is not Microsoft and they do not understand it.
They do not care what you think.
It is their money. They do things their company’s way. “That is how it is done here.”
Remember who your client is. If you want to make their site accessable to newer browsers or anything newer, you had better learn to write smoothly backwards compatible code and “eat crow” after every time you speak of an upgrade.
If you cannot do this, then your crying about “bullshit IE versions” makes your posts irrelevant to the real coders.
“I hate these articles that push for CSS3 and HTML 5″. Yawn… I like them. This guy is working on backwards compatibility before an upgrade is even completed.
To the author: Thank you.
I have multiple corporate clients. Most of them, as far as I recall, use Windows 2000 as a compatibility requirement for web pages. I have a Windows 3.1(? I have not been in his system) corporate client that reportedly has lots of sales of their [stuff] and has no apparent interest in upgrading unless they are almost proven to make more money.
To the complainers about their customers’ old systems: Get a diaper.
To the author: Compatibility is paramount. Thank you for your efforts here.
Thanks for the awesome article. It saved my day. I was so going nuts even after I tried the Shiv thingi for IE8, my site wasn’t rendering properly. All I was missing was the
header, nav, article, footer, address {
display: block;
}
Thanks again!
Thanks a lot. Its very helpful article, specially use of javascript for old browsers. Thanks again.
I tried that on a new site I’m working on (trying to get on with HTML5 and CSS3 while still having a site that works in older IE browsers), but I can’t get it render the nav in the same place in IE as in other PC browsers or Mac browsers. Web site is http://www.autofloors.com/new/home.html
Thanks a lot, you just saved me a lot of time!
Más información de HTML 5 en esta página de Microsoft está muy completa http://www.w3.org/html/logo/
Very helpful article, thank you!
How can we make all browser support?
This is great but it doesn’t seem to be working in IE7. IE8 yes, luckily, we don’t have to develop for IE6.
I have both the css and the javascript…anyone else have this working as-is in IE7?
Hello! I could have sworn I’ve been to this site before but after browsing through some of the post I realized it’s new to me. Anyways, I’m definitely glad I found it and I’ll be book-marking and checking back frequently!
Thanks a bunch, the info you provide solves my issue.
I don’t understand it – I did exactly as specified above and it didn’t effectively do one single thing different on my website in the layout displayed on explorer OR Firefox. How can this be?
~ extremely frustrated.
Just as a quick aside you could have used the registration point shape in Photoshop to get the rays of light much more quickly. Nice to see another way of doing it but using the PS shape tool and the default shapes that come with PS you can do this a lot quicker.
http://www.handycss.com/how/how-to-create-a-header-with-css/
Thank you for this simple yet genius fix!