Home arrow HTML arrow Page 2 - 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 - Implementing HTML5
(Page 2 of 2 )

Making the prior web page a bit more functional: using the <nav> HTML5 element

As one might expect, adding a navigation bar to the earlier HTML5 page via the <nav> element (while keeping the whole design compatible with Internet Explorer) is a straightforward process reduced to firstly including the corresponding element into the markup and then styling it accordingly.   

But first things first. Here’s how the sample page looks after adding to it the mentioned navigation section:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the header and nav elements</title>
<!--[if lt IE 9]>
<script src="
http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</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>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
    <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> 

Even though the structure of the above navigation bar is extremely simple, it comes in handy for demonstrating how to use the <nav> element within an HTML5 document. Naturally, the most intriguing part of this enhancement process is to find out if Internet Explorer will recognize and parse the pertinent element as it did with its cousin: <header>.

Well, thanks to the work of “html5shiv”, it will. However, the best manner to see the result of this process is to polish the look of the navigation bar (and the remaining elements, of course) with some basic CSS styles.

Making things look more engaging: defining the visual presentation of the prior web page

Below I included the finished version of the earlier web page, which now includes a set of simple CSS styles that define the visual presentation of the <header> and <nav> HTML5 elements. Check it out:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the header and nav elements</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;
}
nav {
    display: block;
    height: 30px;
    padding: 10px 0 0 80px;
    background: #0080ff;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
    width: 130px;
}
nav ul li a {
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}
</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>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
    <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>

Unquestionably, the structure of the above document is very easy to follow. After all, it defines a basic heading section along with a primitive navigation bar and a few containers. But don’t be fooled by this simplictity, as the page’s real beauty relies on the cross-browser use of the <header> and <nav> HTML5 elements.

And if you’re still reluctant to believe this, look at the following image, which shows the apperance of these elements when rendered on Internet Explorer:

Not too bad, huh? Thanks to the functionality of “html5shiv”, the elements have been correctly interpreted by Microsoft’s browser, something that allows to create more semantic web pages without having to use generic divs.

Logically, “html5shiv” can be used with other popular HTML5 tags, asides from the ones covered above. However, these specific use cases will be discussed in forthcoming parts of the series. Meanwhile, feel free to stop by the article’s closing thoughts.

Final thoughts

Over this second part of the series, I illustrated with another basic example, how useful “html5shiv” can actually be, when it comes to adding HTML5 support to Internet Explorer. In this particular case, the mentioned example showed how to utilize the library with the <header> and <nav> elements; and as you saw before, the process was a breeze to grab.

But, hold on a second! If you’re anything like me, surely you’ll want to code pristine web pages that also use the semantic <section> HTML5 element, right? This time, luck is on our side, as “html5shiv” makes Internet Explorer parse correctly these tags. And to back up my speech with some functional code, in the upcoming tutorial I’ll be adding to the earlier HTML5 document a new area, which precisely will make use of the pertinent <section> element.

As always, don’t miss the next part!

 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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