HTML5: 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.
  • You can "teach" older browsers to handle "unknown" HTML elements.

Define Semantic Elements as Block Elements

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

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

To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block.

Add New Elements to HTML

//this example adds a new element called <myHero> to an HTML page, 
//and defines a style for it:

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
  display: block;
  background-color: #dddddd;
  padding: 50px;
  font-size: 30px;
} 
</style> 
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

You can also add new elements to an HTML page with a browser trick.

The JavaScript statement document.createElement("myHero") is needed to create a new element in IE 9, and earlier.

Problem With Internet Explorer 8

IE8 (and earlier) does not allow styling of unknown elements.

Thankfully, Sjoerd Visscher created the HTML5Shiv! The HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

HTML5: HTML5 Browser Support — Structure map

Clickable & Draggable!

HTML5: HTML5 Browser Support — Related pages: