HTML5 Browser Support

You can make some older browsers (that don't support HTML5) support HTML5.

HTML5 Browser Support

Modern browsers all support HTML5.

Furthermore, all browsers, including old and new ones, automatically treat unrecognized elements as inline elements.

Because of this, you can "teach" browsers to handle "unknown" HTML elements.

Note: You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements.

Defining HTML5 Elements as Block Elements

HTML5 introduces 8 new semantic elements. All of these elements are block-level elements.

To ensure these elements are displayed correctly in older browsers, you can set the CSS display property to block:

Example:

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

Adding New Elements to HTML

You can add new elements to HTML.

This example adds a new element to HTML and defines its style. The element is named <myHero>:

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Adding New Elements to HTML</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 New Element</myHero>
 
</body>
</html>

The reference to html5shiv.js must be placed within the <head> element because IE browsers need to load this file before parsing the new HTML5 elements.