Home arrow HTML arrow Using the HTML5 nav Element with html5shiv
HTML

Using the HTML5 nav Element with html5shiv


Without a doubt, the use of HTML5 is becoming a necessity for many web designers, since the specification includes some brand new elements that permit you to add a stronger semantic meaning to web pages. While this trend allows you to create interactive web sites, the truth is that the process can be quite challenging because Internet Explorer ignores some of the tags that the standard brings to the table. This second part in a series will show you how to force IE to render these HTML5 elements.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
April 13, 2011
TABLE OF CONTENTS:
  1. · Using the HTML5 nav Element with html5shiv
  2. · Implementing HTML5

print this article
SEARCH DEVARTICLES

Using the HTML5 nav Element with html5shiv
(Page 1 of 2 )

This issue shouldn’t prevent you from taking the big plunge and start using the new specification right away; in the last few months some new tools have been released that allow you to work around the obstacles that Microsoft’s browser presents to brave warriors such as yourself.

Among the tools in question is a lightweight JavaScript library called “html5shiv” (http://code.google.com/p/html5shiv/), which “helps” Internet Explorer to interpret some popular HTML5 elements, such as <header>, <aside>, <nav> and <footer> (to name a few), through an extremely simple process. Simply put, all that the library does is to spawn (on the fly) elements via the “createElement()” DOM method and, in a snap, IE parses the tags like a charm. 

What’s more, to demonstrate how useful "html5shiv" can be in certain cases, in the previous chapter of this series I developed an introductory example that showed how to use the <header> element in a true cross-browser fashion (yes, that includes Internet Explorer too). But, as you might expect, at this point I’m only scratching the surface when it comes to revealing all the power that the library hides behind the hood. In line with this concept, in this second episode I'm going to create another approachable example that will illustrate how to use “html5shiv”, but this time with the <nav> element.

Review time: using “html5shiv” with the <header> HTML5 element

If for some reason, you misssed the previous article in this series, where I discussed in depth how to make Internet Explorer recognize the <header> HTML5 element,  below I will revisit the source code corresponding to this concrete example, so that you can dissect it and understand its underlying logic.

With that being said, here’s the HTML5 document that uses the mentioned element for creating a native heading section:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the header element</title>
<!--[if lt IE 9]>
<script src="
http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
    padding: 0;
    margin: 0;
    background: #000;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-weight: normal;
    font-size: 2.1em;
}
h2 {
   font-weight: normal;
   font-size: 1.8em;
}
p {
    margin: 0 0 15px 0;
}
#wrapper {
    width: 500px;
    margin: 0 auto;
    background: #fff;
}
#container {
    padding: 15px;
}
header {
    display: block;
    padding: 15px;
    background: #b9524d;
}
</style>
</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>

The above web page has nothing particularly interesting, at least upon first glance. If you look a bit closer into it, however, you’ll notice that it includes the “html5shiv” library at the beginning only when using Internet Explorer 8 and below. This conditional process permits us to use the <header> element within the markup and style it accordingly, without being afraid of getting any unexpected results.

If you still aren’t completely convinced what “html5shiv” does behind the scenes, take a look at the following screen capture, which shows how the previous HTML5 document looks when viewed with Internet Explorer:

There you have it. In a jiffy, I managed to create a valid HTML5 page, whose <header> element was correctly rendered by IE. What more can you ask for? Well, in fact that was only a rhetorical question, as in a more realistic situation it’d be desirable to use other HTML5 elements as well, aside from <header>.

But fear not - “html5shiv” will let you achieve this in a painless way. And to prove that, in the following section I’ll be adding to the earlier HTML5 document a basic navigation bar, which will be sematically reflected through the inclusion of the whole new <nav> tag.


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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials