HTML5 Browser Support

All the modern browsers support HTML5, automatically handling the unknown elements as inline elements. furthermore, it’s possible to “teach” the older browsers to handle such kinds of elements.

Semantic Elements as Block Elements

HTML5 specifies eight new semantic elements, and all of them are block-level elements. Here they are:


Set the CSS display property for the elements mentioned above, to ensure proper behavior in older browsers.

HTML5Shiv

The HTML5Shiv is placed inside of the <head> tag. It is a javascript file. It is referenced in a <script> tag.

You should use the HTML5Shiv while using the new HTML5 elements.

Example of the HTML5Shiv:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <section>
      <h1>The most beautiful places in the world</h1>
      <article>
        <h2>Salar de Uyuni, Bolivia</h2>
        <p>The world's largest salt flats, spanning 4086 miles (10,582 sq. km), Salar de Uyuni is unlike anywhere else on earth.</p>
      </article>
      <article>
        <h2>Moraine Lake, Canada</h2>
        <p>Moraine Lake may only only half the size of its nearby neighbour Lake Louise, but it's even more scenic.</p>
      </article>
      <article>
        <h2>Iguazu Falls, Argentina/Brazil border</h2>
        <p>One of the modern natural wonders of the world, this chain of mini waterfalls is one of the planet's most awe-inspiring sights.</p>
      </article>
    </section>
  </body>
</html>



Do you find this helpful?

Related articles