Home arrow HTML arrow Page 2 - 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 - How to Use the HTML5
(Page 2 of 2 )

As you may have guessed, enhancing the previous web page layout with an <aside> tag is a process that can be accomplished in a snap. Nevertheless, if you’re still not fully convinced, take a look at the following code sample, which uses the tag in a pretty basic fashion: 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the aside element</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>
    <aside>
        <h2>Side bar</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>
    </aside>
    <section>
        <h2>Main content 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.</p>
    </section>
</div>
</body>
</html>

Now the web page proudly uses the <aside> element to reflect the presence of a side bar, which contains some generic content. Needless to say that the most interesting (and intriguing) facet of this enhancement process is to see if Internet Explorer will render this bar as one might expect.

Well, in fact it will, thanks to the magic that “html5shiv” does in the “backdoor”. However, before you launch your browser and test the previous web page in its current state, it’s necessary to spice it up a little bit with some CSS styles.

Making things look prettier: adding some CSS styles to the earlier HTML5 document

As noted in the earlier section, below is a slightly revamped version of the previous web page which uses some trivial styles to define the visual presentation of each area, including the just appended <aside>. Take a look at it:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the aside 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: #b0b000;
    overflow: hidden;
}
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;
}
aside {
    display: block;
    width: 180px;
    float: right;
    padding: 10px;
    background: #bec998;
}
section {
    display: block;
    width: 280px;
    padding: 10px;
    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>
    <aside>
        <h2>Side bar</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>
    </aside>
    <section>
        <h2>Main content 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.</p>
    </section>
</div>
</body>
</html>

In this particular case I decided to float the side bar to the right of the viewpoint. However, this step is entirely optional, as the <aside> element can be used to reflect a section that has a lower relevance than the main one, regardless of its position on the screen. 

Finally, here’s a complementary image that shows how the previous HTML5 document looks when viewed with Internet Explorer:

That looks quite good, doesn’t it? Effectively, the <aside> tag was correctly interpreted and styled accordingly, like a generic div (or any other block-level element). In this case, though, the inclusion of the tag came helped to boost the semantic meaning of its side bar, which is indeed a significant improvement, at least when it comes down to building better, more solid markup.   

In summary, if you’re still hesitating about the actual functionality provided by “html5shiv”, the above example should encourage you to use it during the development of your own web sites. So, go ahead and give it a try! You won’t be dissapointed, believe me.

Final thoughts

In this penultimate part of the series, I extended the layout of the previous HTML5 document by adding to it a basic side bar, something that was accomplished through the inclusion of the <aside> HTML5 element. As you just saw, the process was extremely straighforward, meaning that you shouldn’t have major problems replicating it when building your own web pages.     

So far, so good. At this point, the structure of the mentioned document looks pretty decent, as it will be rendered correctly by most modern browsers, including the always rebel Interner Explorer, thanks to the quiet work performed by “html5shiv”.

So, what’s the missing piece of the document in question? Well, as you may have noticed, it lacks of a footer section, an issue that must be adressed in a cross-browser manner. Thus, in the final installment, I’m going to add to the pertaining document that section, not surprinngly, via the <footer> element.
  
Don’t miss the last 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