Home arrow HTML arrow html5shiv and the aside Element
HTML

html5shiv and the aside Element


In this fourth part in a series, we will be learning how to use the html5shiv Javascript library to work with the HTML5 <aside> element.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
May 04, 2011
TABLE OF CONTENTS:
  1. · html5shiv and the aside Element
  2. · How to Use the HTML5

print this article
SEARCH DEVARTICLES

html5shiv and the aside Element
(Page 1 of 2 )

If you’re willing to take the big plunge and use the brand new markup elements included with HTML5, but Internet Explorer still makes you hesitant, then leave your doubts behind and take a peek at “html5shiv” (http://code.google.com/p/html5shiv/), a small JavaScript package that makes Microsoft’s browser “understand” (at least to some extent) the elements in question through the use of the “createElement()” DOM method.

If you already had the chance to read the preceding tutorials in this series, you should have a pretty solid background on how to use “html5shiv”, as in those articles I developed some easy-to-grasp examples, which demonstrated how to put the library to work with the <header>, <nav>, and <section> HTML5 tags. While this is all well and fine, it’s valid to note that “html5shiv” will let you utilize other elements bundled with the new specification, including the popular <aside> and <footer>.

In this penultimate installment of the series, I’ll be illustrating how to use the library with the <aside> HTML5 element, so that you can start building semantic side bars on your web pages that will be correctly rendered by Internet Explorer.

Before we get started though, you may wish to read the first three parts in this series (if you missed them):

Using “html5shiv” with the <section> HTML5 element

In case you missed the previous part of the series, where I discussed in detail how to use “html5shiv” with the <section> HTML5 tag, I included the source code corresponding to this specific example, so that you can analyze it closely and grasp its driving logic. Here it is:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the header, nav and multiple section 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: #b0b000;
}
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;
}
section {
    display: block;
    padding: 15px;
    background: #b0b000;
}
</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>
    <section>
        <h2>Generic section 1</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.</p>
    </section>
    <section>
        <h2>Generic section 2</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.</p>
    </section>
</div>
</body>
</html>

From the earlier code portion, it’s clear to see that using some HTML5 elements in a cross-browser fashion (including the aforementioned <section>) it’s a straightforward process, reduced to conditionally downloading “html5shiv” at the top of the web page and nothing more.

Of course, my speech would sound somewhat empty if I didn’t complement the earlier example with an image that shows how all these elements are rendered by Internet Explorer. Well, here’s one that does exactly that. Check it out:

As one might expect, the pertaining elements were displayed correctly on Microsoft’s browser, thanks to the silent work that “html5shiv” did behind the scenes. But, if you’re anything like me, at this moment you’ll be wondering if the same results can be achieved with the <aside> tag. Well, as I expressed in the introduction, the library permits us to use this element too!


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