HTML Web Design Tutorial: HTML5 Browser Support

HTML5 Browser Support

HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

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

Define HTML5 Elements as Block Elements

HTML5 defines eight new semantic HTML elements. All these are block-level elements.

To secure correct behavior in older browsers, you can set the CSS display property to block:

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

Adding New Elements to HTML

You can also add any new element to HTML with a browser trick.

This example adds a new element called <myHero> to HTML, and defines a display style for it:

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>

Problem With Internet Explorer

You could use the solution described above, for all new HTML5 elements, but:

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



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