Home arrow HTML arrow html5shiv and the section Element
HTML

html5shiv and the section Element


If you’re eager to start using the new elements that come bundled with HTML5, but worry about whether or not Internet Explorer will allow them to render properly, leave your fears behind and take a look at “html5shiv”, a lightweight JavaScript library that adds HTML5 support to Microsoft’s browser by utilizing the “createElement()” DOM method. In this third part of a series we will be learning to use the handy <section> element.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
April 20, 2011
TABLE OF CONTENTS:
  1. · html5shiv and the section Element
  2. · Using Multiple HTML5

print this article
SEARCH DEVARTICLES

html5shiv and the section Element
(Page 1 of 2 )

Seated upon a simple piece of logic, “html5shiv” is a breeze to use. To demonstrate how to utilize the library in a few specific cases, in prior chapters of this series I went through the development of some comprehensive examples, which showed you how to employ the <header> and <nav> HTML5 elements to construct a basic web page layout. Of course, the most engaging facet of this process was that Internet Explorer rendered the page correctly, thanks to the silent work that “html5shiv” did in the background.

It’s worth it note that the library permits us to use (in a cross-browser fashion) many other HTML5 tags -not just the ones referenced above. In keeping with this idea, in this third installment of the series I’ll be improving the web page layout from our previous articles by adding a couple of <section> elements.

Will Internet Explorer parse these tags as expected? Well, as one might expect, it will. However, the fun part of this didactical process is to prove this with some functional code.

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

Extending the use of “html5shiv”: defining a semantic web page area with the <section> element

To be honest, using the <section> element in a cross-browser manner is pretty straightforward, due to the functionality offered by “html5shiv”. As I said before, however, the most effective way to demonstrate this is by example, so below I improved the web page layout created in the previous installment of the series, which this times uses the <section> element to define a generic section.

The markup for this sample layout looks like this:

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

Apart from defining a header and a navigation bar, the above web page now includes a brand new area, which has been semantically represented through the <section> HTML5 element. While the most important detail to stress here is that the tag will be recognized and parsed adequately by Internet Explorer, its visual presentation needs to be improved a little bit via CSS, as one would normally do with any other web page element.

Given that, in the next section I’ll be attaching some basic styles, so that you can visualize the document using most modern browsers, including Microsoft’s as well.

Giving the final touches to the previous web page: coding some basic CSS styles

If you feel curious and want to see how the previous web page layout looks after adding to it a generic section, below there’s the finished version of the page in question, which incorporates a few easy-to-follow CSS styles. Take a look at it:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the header, nav and 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</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>

Taking into account that the CSS styles added to the previous HTML5 document don’t bear any further analysis, I suggest you look at the following screen shot, which shows the document’s appearance when rendered in Internet Explorer:

As one might expect, thanks to the “magic” performed by “html5shiv”, the <section> element was correctly interpreted and styled accordingly. And best of all, the whole markup is now a little more semantic, as it uses only a single generic wrapper for centering the entire layout.

Before you launch your browser and give the above web page a try, it’d be helpful to spice it up with some additional touches. In its current state, the page defines only one generic section; however, it would be pretty didactical to aggregate at least one more, creating a layout that resembles a more realistic scenario.


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