Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / CSS / How you can use HTML5 now even with older browsers

Feb 1, 2010 By Jared Heinrichs 1 Comment

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:

image

I hope you found this informative 🙂

Share this:

  • Tweet

Filed Under: CSS, HTML

Comments

  1. Anonymous Coder says

    May 10, 2011 at 6:57 pm

    I would recommend you change

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2018 Winnipeg Web Design

sponsored