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:
- HTML <header> tag
- HTML <section> tag
- HTML <footer> tag
- HTML <aside> tag
- HTML <nav> tag
- HTML <main> tag
- HTML <article> tag
- HTML <figure> tag
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>
<!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>Practice Your Knowledge
Which of the following browsers support HTML5 according to www.w3docs.com?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.