HTML5 Browser Support

You can help older browsers handle HTML5.

HTML5 Browser Support

All modern browsers support HTML5.

In addition, all browsers, regardless of their age, will automatically treat unrecognized elements as inline elements.

Therefore, you can help older browsers handle "unknown" HTML elements.

Note:You can even teach Stone Age IE6 how to handle unknown HTML elements.

Define HTML5 elements as block-level elements

HTML5 defines eight newSemantic HTML elements. All areBlock-levelelements.

You can use CSS display The property is set to blockTo ensure correct behavior in older browsers:

Example

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

Adding New Elements to HTML

You can add any new element to HTML using browser tricks:

This example adds an HTML element named <myHero> Define the display style for the new element:

Example

<!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>

Try It Yourself

Added JavaScript statements document.createElement("myHero"), and it is only applicable to IE.

Internet Explorer Issues

This solution can be used for all new HTML5 elements, but:

Note:Internet Explorer 8 and earlier versions do not allow styles to be added to unknown elements.

Fortunately, Sjoerd Visscher created "HTML5 Enabling JavaScript", "the shiv":

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The above code is a comment, but early versions of IE9 will read it (and understand it).

Complete Shiv Solution

Example

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>My First Article</h1>
<article>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</article>
</body>
</html>

Try It Yourself

The link to the shiv code must be located within the <head> element, as Internet Explorer needs to recognize all new elements before reading them.

HTML5 Skeleton

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
  <h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>
</body>
</html>

Try It Yourself