Home arrow HTML arrow htmlshiv5 and the HTML5 footer Element
HTML

htmlshiv5 and the HTML5 footer Element


In this final part in our series on the Javascript library html5shiv, you will learn how to use the HTML5 footer element, courtesy of the createElement() DOM method.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
May 11, 2011
TABLE OF CONTENTS:
  1. · htmlshiv5 and the HTML5 footer Element
  2. · How to Use the HTML5

print this article
SEARCH DEVARTICLES

htmlshiv5 and the HTML5 footer Element
(Page 1 of 2 )

“html5shiv” (http://code.google.com/p/html5shiv/), is a lightweight JavaScript library that lets you use the new markup elements included in HTML5 with Internet Explorer. Even when at first one might think that “html5shiv” does something “magical” behind the scenes, this is a wrong impression. In fact, the library appeals to the “createElement()” DOM method in order to spawn HTML5 tags, allowing Microsoft’s browser to understand and parse them correctly.

If you already read the tutorials that preceded this one, you should be familiar with the functionality provided by “html5shiv”. In those previous installments, I developed some examples which showed how to create a basic web page layout using the <header>, <nav>, <section> and <aside> HTML5 tags. The beauty of this development process was that the layout in question was rendered flawlessly by Internet Explorer, something that proves that the wild boy can be tamed (at least to some extent) through a few simple JavaScript hacks.

However, at this point I have to be frank and admit that this sample layout looks somewhat incomplete, as it lacks a decent footer section. Well, fear not, since in this last installment of the series I’ll be fixing this issue by using the <footer> HTML5 element. And best of all, this additional section will be displayed as expected in Internet Explorer, thanks to the smooth – yet effective - work performed by “html5shiv”.

 If you missed the other parts in this series or wish to revisit them), you can find them here:

http://www.devarticles.com/c/b/HTML/

Using “html5shiv” with the <aside> HTML5 Element

Before I show you how to add a basic footer section to the web page layout built in the previous part of this series, it’d be useful to take a quick look at it in its current state, so you can dissect its internal structure and grasp how each element is rendered on screen.

Having clarified that, here’s how the layout looks, after appending a side bar reflected via the <aside> element:

<!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>

If you have ever built your own web page layouts using CSS floats (which is a common methodology, by the way), then the above code fragment should be pretty familiar to you, as it utilizes a similar approach to position the <aside> element to the right of the document.

But ultimately, these details are irrelevant, since the most important thing to check for in this case is if the whole layout will be rendered correctly by most browsers, including Internet Explorer. Well, the following image will hopefully dissipate all of your doubts in a snap:

As seen above, “html5shiv” has done a remarkable job, as each section of the previous web page has been displayed as expected. Based on this result, I’d feel the temptation to say that the job is finally done and that it’s time to relax and have some fun. Unfortunately, there’s still a step that must be taken: as I said in the introduction, it’s necessary to add to the page a footer section, which should be semantically represented via the <footer> element.


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