Part Six: Browser Support for HTML5 Elements
We’ve been creating a web page with some HTML and HTML5 elements, but to be sure web browsers understand our new HTML5 elements, we must add a couple more things.
CSS for Browser Support
Most of the new HTML5 elements we have discussed are supposed to behave like block level elements. To ensure that they do, you will need this code in your linked CSS document.
article, section, aside, nav, header, footer {display: block;}
To learn more about coding a CSS style sheet, see our companion tutorial: “Smooth Strides from CSS to CSS3.“
Javascript for Browser Support: HTML5 SHIV
But before that, we should do one more thing: For Internet Explorer 8 and below, we need to hack support in via Javascript. Add the code below between your opening and closing <head> tags below the <link> tag.
<head>
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
Let’s take one last look at the basic structure of our speed skating document:
<html lang=”en”>
<head>
<title>Page Title Goes Here</title>
<meta charset=”utf-8″>
<meta name=”description” content=”Describe your page here using sentences.“>
<link rel=”stylesheet” href=”style.css”>
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
<body>
<div id=”wrapper”>
<header>…</header>
<nav>…</nav>
<section>
<h1>The History of Speed Skating</h1>
<p><img src=”speed-skater.jpg” alt=”speed skater” width=”125″ height=”250″><span class=”special”>Did you know?</span> Speed skating dates back over a thousand years to Scandinavia, and the Netherlands, where the natives added bones to their shoes and used them to travel on frozen rivers, canals and lakes?</p>
<p>It was much later, in the 16th century, that people started seeing skating as fun and perhaps even a sporting activity.</p>
</section>
<aside>…</aside>
<footer>…</footer>
</div>
</body>
</html>
In our example, we’ve basically created a web page that has structure. To style our web page, we must turn to CSS and CSS3. See “Smooth Strides from CSS to CSS3.” In our related tutorial, we will create a SIMPLE HTML5 web document and add some styling to it with CSS3.
Return to Top