WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML5 Browser Support


You can teach older browsers to handle HTML5 correctly.


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>
Try it Yourself »

The JavaScript statement document.createElement("myHero") is added, only to satisfy IE.


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

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

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


The 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>
Mahata Gandhi was born in 2 October 1869 Porbander,India.He was the leader of the Indian independence movement against British rule.
</article>

</body>
</html>
Try it Yourself »

The link to the shiv code must be placed in the <head> element, because Internet Explorer needs to know about all new elements before reading them.


An 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>
<![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 leader</h1>

<article>
<h2>Mahata Gandhi</h2>
<p>Mahata Gandhi was born in 2 October 1869 Porbander,India.He was the leader of the Indian independence movement against British rule.</p>
</article>

<article>
<h2>George Washington</h2>
<p>>George Washington was born in 22 February 1732.He was the first President of the USA from 1789 to 1797.</p>
</article>

<article>
<h2>George Washington</h2>
<p>>George Washington was born in 22 February 1732.He was the first President of the USA from 1789 to 1797.,
.</p>
</article>

</section>

<footer>
<p>&copy; 2018 . All rights reserved.</p>
</footer>

</body>
</html>
Try it Yourself »