Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 semantic elements and which old browsers does it support?
HTML5 introduced semantic elements that provide meaning to the structure of web content. These elements like <header>, <nav>, <article>, <section>, and <footer> describe their content's purpose rather than just its appearance. However, older browsers, particularly Internet Explorer 8 and earlier versions, do not recognize these new semantic elements.
What are HTML5 Semantic Elements?
HTML5 semantic elements are tags that clearly describe their meaning in a human and machine readable way. Unlike generic <div> and <span> elements, semantic elements convey the purpose of the content they contain.
Common HTML5 Semantic Elements
-
<header>− Contains introductory content or navigation links -
<nav>− Contains navigation links -
<article>− Contains independent, self-contained content -
<section>− Defines sections in a document -
<aside>− Contains content aside from main content -
<footer>− Contains footer information -
<main>− Contains the main content of the document
Browser Support for HTML5 Semantic Elements
Modern browsers support HTML5 semantic elements without any issues. However, older browsers have limited or no support −
| Browser | Support Status | Version |
|---|---|---|
| Internet Explorer | Not supported | IE 8 and earlier |
| Internet Explorer | Full support | IE 9+ |
| Firefox | Full support | Firefox 4+ |
| Chrome | Full support | Chrome 6+ |
| Safari | Full support | Safari 5+ |
| Opera | Full support | Opera 11.1+ |
Making HTML5 Semantic Elements Work in Old Browsers
There are two primary methods to ensure HTML5 semantic elements work in older browsers, particularly Internet Explorer 8 and earlier −
Method 1 − CSS Display Block Fix
By default, browsers treat unknown elements as inline elements. To make semantic elements behave like block elements in older browsers, add the following CSS −
article, aside, details, figcaption, figure,
footer, header, main, nav, section, summary {
display: block;
}
Example − Basic Semantic Structure with CSS Fix
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Semantic Elements</title>
<style>
/* CSS fix for older browsers */
article, aside, footer, header, nav, section {
display: block;
}
body { font-family: Arial, sans-serif; margin: 0; padding: 10px; }
header { background: #4CAF50; color: white; padding: 10px; text-align: center; }
nav { background: #f1f1f1; padding: 10px; }
article { background: #fff; padding: 15px; margin: 10px 0; }
footer { background: #333; color: white; padding: 10px; text-align: center; }
</style>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<article>
<h2>Welcome to HTML5</h2>
<p>This article demonstrates HTML5 semantic elements.</p>
</article>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
The above code displays a properly structured webpage with semantic elements styled as block elements −
My Website (green header, white text, centered) Home | About | Contact (gray navigation bar) Welcome to HTML5 (article heading) This article demonstrates HTML5 semantic elements. © 2024 My Website. All rights reserved. (dark footer, white text, centered)
Method 2 − JavaScript createElement Fix
Internet Explorer 8 and earlier versions require JavaScript to create and recognize HTML5 semantic elements before they can be styled. This method involves creating the elements using document.createElement() −
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
document.createElement('main');
</script>
Example − Complete Fix for Internet Explorer 8
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Semantic Elements - IE8 Compatible</title>
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
document.createElement('main');
</script>
<![endif]-->
<style>
article, aside, footer, header, main, nav, section {
display: block;
}
body { font-family: Arial, sans-serif; margin: 0; }
header { background: #2196F3; color: white; padding: 20px; text-align: center; }
nav { background: #f8f9fa; padding: 15px; border-bottom: 1px solid #dee2e6; }
main { padding: 20px; }
article { margin: 15px 0; }
footer { background: #6c757d; color: white; padding: 15px; text-align: center; }
</style>
</head>
<body>
<header>
<h1>TutorialsPoint</h1>
<p>Learn HTML5 Semantic Elements</p>
</header>
<nav>
<strong>Navigation:</strong>
<a href="#">HTML5</a> |
<a href="#">CSS3</a> |
<a href="#">JavaScript</a>
</nav>
<main>
<article>
<h2>HTML5 Semantic Elements</h2>
<p>HTML5 semantic elements provide meaning to web page structure, making content more accessible and SEO-friendly.</p>
</article>
<section>
<h3>Benefits</h3>
<p>Better accessibility, improved SEO, and cleaner code structure.</p>
</section>
</main>
<footer>
<p>Copyright © TutorialsPoint. All rights reserved.</p>
</footer>
</body>
</html>
The conditional comment <!--[if lt IE 9]> ensures the JavaScript fix only runs for Internet Explorer versions earlier than IE 9.
Method 3 − Using HTML5 Shiv Library
The most popular solution is to use the HTML5 Shiv library, which automatically handles both the createElement and CSS fixes −
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
This single line of code in the <head> section provides complete HTML5 semantic element support for Internet Explorer 8 and earlier.
Testing Browser Compatibility
To test if semantic elements work properly in older browsers, check if the elements render as block-level elements and can be styled with CSS. Without the fixes, semantic elements in IE8 will appear as inline elements and may not display correctly.
Example − Compatibility Test
<!DOCTYPE html>
<html>
<head>
<title>Semantic Elements Test</title>
<style>
article, section { display: block; background: #f0f0f0; margin: 10px; padding: 10px; }
body { font-family: Arial, sans-serif; padding: 10px; }
</style>
</head>
<body>
<h2>Semantic Elements Test</h2>
<article>
<h3>Article Element</h3>
<p>This should appear as a block element with gray background.</p>
</article>
<section>
<h3>Section Element</h3>
<p>This should also appear as a block element with gray background.</p>
</section>
<script>
function checkSupport() {
var article = document.createElement('article');
var isSupported = article.toString() === '[object HTMLElement]';
document.write('<p>HTML5 semantic elements supported: ' + (isSupported ? 'Yes' : 'No') + '</p>');
}
checkSupport();
</script>
</body>
</html>
328 Views
