Home arrow HTML arrow Using HTML5 Elements in IE with html5shiv
HTML

Using HTML5 Elements in IE with html5shiv


Even when the hype generated by HTML5 in the last few months has urged many web designers to start using some of the new markup elements bundled with the specification, some are still reluctant to follow this edgy trend. The reason for such a conservative attitude is perfectly understandable: considering that Internet Explorer lives in a world where <header>, <nav> and <footer> are strange things that must be ignored, there’s nothing wrong with playing it a little on the safe side.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
April 06, 2011
TABLE OF CONTENTS:
  1. · Using HTML5 Elements in IE with html5shiv
  2. · Styling HTML5

print this article
SEARCH DEVARTICLES

Using HTML5 Elements in IE with html5shiv
(Page 1 of 2 )

Despite this seemingly hopeless scenario - plagued by browser incompatibilities here and there - you can still enjoy the goodies HTML5 brings to the table in a true cross-browser fashion. If you’re wondering how to achieve this, you should check out “html5shiv” (http://code.google.com/p/html5shiv/), a lightweight JavaScript library that lets you use the new markup HTML5 elements with Internet Explorer in a fairly painless way.

Simply put, all that this library does is build elements on the fly using the “createElement()” JavaScript method (without adding them to the DOM) and voila! Internet Explorer will see them as real tags, which can be used within the markup and therefore styled as well.

If you’re interested in learning how to use “html5shiv”, this article series will develop some basic examples, which will show you how to employ the library for building HTML5 documents that correctly render on most modern browsers, including Internet Explorer.

Getting Started: Building a Basic HTML5 Document

As you may have guessed, to demonstrate the functionality of html5shiv, the first thing that needs to be done is to create a sample HTML5 document. In this initial take, the document will define only a heading section, which will be wrapped inside a <header> element.

Having said that, here’s how this test HTML5 page looks:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the header element</title>
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Header section</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </header>
    <div id="container">
        <h2>Generic section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet</p>
    </div>
</div>
</body>
</html>

There’s nothing particularly interesting about the structure of the previous HTML5 page, with a subtle exception: it uses the brand new <header> element to create a minimalist heading section, instead of appealing to a generic div.

What’s more, if you assign some styles to the element in question and try out the web page using Firefox, Chrome or Safari, it should be correctly interpreted and displayed accordingly. Of course, this won’t happen with Internet Explorer. But - thanks to the functionality of “html5shiv” - this issue can be addressed in a jiffy.

If you’re eager to see how the library solves this problem, in the next section I’ll be polishing the look of the <header> element with some basic CSS styles. The real beauty of this cosmetic process, however, is that Internet Explorer will render the element like a charm.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials