How you can use HTML5 now even with older browsers

I’ve been reading up on HTML5 lately. I’ve got to say that the HTML5 code is so much cleaner. Unfortunately browsers like Internet Explorer 6 don’t understand some of the new elements that make up HTML 5 unless you tell it to them yourself.

What are some of the new elements you say? Well without further adieu here are the main additions to web layout:

header
section
footer
aside
nav
article
figure

You might be asking what is the big deal with these being added to HTML5? Well up until now most people would do something similar to this to create a header section:

<div id="header">

   some code goes here


</div>

 
Things like search engines don’t really understand that the last piece of code is the header. To top it off when pages start getting a ton of <div>’s, it makes it much harder to read the code then what HTML5 brings to the table. 
Here is the same HTML container but now we are using the “header” section that is part of HTML5:
<header>

    some code goes here...

</header>
 
HTML5 also helps to make the CSS easier read and follow. Here is the example of css for both the <div> approach and the new HTML5 approach.
Old <div> approach:
#header    { width:1000px; height: 300px; }

#header h1 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


#nav    { width:1000px }

#footer { width:1000px }
 
New HTML5 approach:
header { width:1000px; height: 300px; }

header h1 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


nav    { width:1000px }

footer { width:1000px }
 
As you can see the new elements will provide a type of meta data to the browser and search engines letting it know where the main content is on the page. This should help with SEO (search engine optimization).
For most browsers you will need to add the elements to the HTML document by doing three things:
Set the new Doc Type:
<!DOCTYPE html>
 
Second we have to tell the browser to treat the new items as Block Type elements using CSS. Once we create the CSS file all we have to do then is to link the CSS to the page we want to code in HTML5. Copy this css and save it as HTML5.css:
header, section, footer, aside, nav, article, figure {

	display:block;	

}
 
The third thing you will have to do is to add some JavaScript to the beginning of your webpage to add these items to the DOM list in your browser. (Incase it isn’t supported yet)
<!--[if IE]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]—>   
 
As you can see in the example above we finally a doc type that a mortal can actually remember! Ok. Time to wrap this one up. Here’s a small FULL example of HTML5 and the CSS that goes with it:
HTML5 (index.html)
<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="utf-8" />


    <title>HTML5 Demo</title>

    

    <link href="stylesheet/reset.css" rel="stylesheet" type="text/css">

    <link href="stylesheet/html5.css" rel="stylesheet" type="text/css">  

    <link href="stylesheet/master.css" rel="stylesheet" type="text/css">

    

    

    <!--[if IE]>

    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->   

</head>



<body><div id="page" class="container floatmiddle">


    <header>

    	<h1>The title of the webpage</h1>

    </header>

    

    <nav class="container">

    	<p class="floatleft">Left</p>

        <p class="floatright">Right</p>

    </nav>

    

    <section>

    	<p>This is a test</p>	

    </section>

    

    <footer>

    	<p>This is the footer</p>

    </footer>


</div></body>

</html>


reset.css  <– Click here for the code
HTML5 – See above for the code.
master.css
body    { background:f4f4f4; font: 15px/1.5 Georgia,serif;}

a       { text-decoration: none; }


header h1 { font: bold 30px Helvetica, Sans-serif; margin: 0 0 5px 0; }

header h2 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


#page { width: 500px; background:#CCC }
 
This will produce something that will look similar to this:

I hope you found this informative 🙂 
Share this:
Tweet

How you can use HTML5 now even with older browsers

Comments

Leave a Reply Cancel reply

`Try searching this site!`