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
How to include another HTML file in an HTML file?
In this tutorial, we will learn different methods to include another HTML file within an existing HTML file. This technique is useful for creating reusable components, headers, footers, or content sections that can be shared across multiple pages.
Several methods are available to include external HTML files, each with its own advantages and use cases. Let us explore the most effective techniques that have proper web browser support.
Using jQuery Load Method
The jQuery load() method is one of the most popular approaches for dynamically including HTML content. It fetches content from an external file and inserts it into a specified element.
Syntax
$(selector).load(url);
Parameters
selector jQuery selector for the DOM element that will contain the loaded HTML content.
url The path to the HTML file to be included.
Example
This example demonstrates how to load external HTML content using jQuery. First, create the external HTML file (content.html)
<html> <body> <h3>This content is loaded from an external HTML file</h3> <p>This demonstrates jQuery load functionality.</p> </body> </html>
Now create the main HTML file that includes the external content
<!DOCTYPE html>
<html>
<head>
<title>jQuery Load Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Including HTML file using jQuery load()</h2>
<div id="includeHtml" style="border: 2px solid #ccc; padding: 15px; margin-top: 10px;">
Loading content...
</div>
<script>
$(document).ready(function() {
$("#includeHtml").load("content.html");
});
</script>
</body>
</html>
The jQuery code waits for the document to load, then fetches content.html and inserts it into the div with id "includeHtml".
Using Custom w3-include-html Attribute
This method uses a custom HTML attribute and JavaScript to include external files without requiring external libraries.
Syntax
<div w3-include-html="filename.html"></div>
Example
Create an external HTML file (header.html)
<header style="background-color: #f0f0f0; padding: 20px; text-align: center;"> <h1>Website Header</h1> <nav>Home | About | Contact</nav> </header>
Now create the main HTML file with the inclusion logic
<!DOCTYPE html>
<html>
<head>
<title>Custom Include Method</title>
</head>
<body style="font-family: Arial, sans-serif;">
<h2>Including HTML using w3-include-html attribute</h2>
<div w3-include-html="header.html"></div>
<div style="padding: 20px;">
<p>This is the main content area.</p>
</div>
<script>
function includeHTML() {
var elements = document.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var file = element.getAttribute("w3-include-html");
if (file) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
element.innerHTML = this.responseText;
}
if (this.status == 404) {
element.innerHTML = "Page not found.";
}
element.removeAttribute("w3-include-html");
includeHTML();
}
}
xhr.open("GET", file, true);
xhr.send();
return;
}
}
}
includeHTML();
</script>
</body>
</html>
This method uses XMLHttpRequest to fetch the external file and replace the element content with the loaded HTML.
Using Fetch API Method
The modern Fetch API provides a cleaner approach to including HTML files compared to XMLHttpRequest.
Syntax
fetch('filename.html')
.then(response => response.text())
.then(html => {
document.getElementById('container').innerHTML = html;
});
Example
Create a footer file (footer.html)
<footer style="background-color: #333; color: white; padding: 15px; text-align: center;"> <p>© 2024 TutorialsPoint. All rights reserved.</p> </footer>
Main HTML file using Fetch API
<!DOCTYPE html>
<html>
<head>
<title>Fetch API Method</title>
</head>
<body style="font-family: Arial, sans-serif;">
<h2>Including HTML using Fetch API</h2>
<div style="padding: 20px;">
<p>Main content goes here.</p>
</div>
<div id="footer-container">Loading footer...</div>
<script>
fetch('footer.html')
.then(response => response.text())
.then(html => {
document.getElementById('footer-container').innerHTML = html;
})
.catch(error => {
document.getElementById('footer-container').innerHTML = 'Error loading footer';
console.error('Error:', error);
});
</script>
</body>
</html>
The Fetch API provides better error handling and uses promises for cleaner asynchronous code.
Using HTML Iframe
The <iframe> element provides the simplest method to include external HTML files, though it creates an isolated document context.
Syntax
<iframe src="filename.html"></iframe>
Example
Create a sidebar file (sidebar.html)
<!DOCTYPE html>
<html>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f9f9f9;">
<h3>Navigation</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Main HTML file using iframe
<!DOCTYPE html>
<html>
<head>
<title>Iframe Method</title>
<style>
.container { display: flex; }
.sidebar { width: 200px; }
.content { flex: 1; padding: 20px; }
iframe { border: none; width: 100%; height: 300px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 0;">
<h2 style="padding: 20px;">Including HTML using iframe</h2>
<div class="container">
<div class="sidebar">
<iframe src="sidebar.html"></iframe>
</div>
<div class="content">
<h3>Main Content Area</h3>
<p>This is the main content area alongside the included sidebar.</p>
</div>
</div>
</body>
</html>
The iframe method creates a separate document context, which provides better isolation but may limit styling and JavaScript interaction.
Comparison of Methods
| Method | Dependencies | Browser Support | Styling Control | Use Case |
|---|---|---|---|---|
| jQuery load() | jQuery library | Excellent | Full control | Dynamic content loading |
| w3-include-html | Custom JavaScript | Good | Full control | Simple inclusion without libraries |
| Fetch API | None (modern browsers) | Modern browsers | Full control | Modern web applications |
| Iframe | None | Universal | Isolated context | Complete page embedding |
Conclusion
Including HTML files within other HTML files can be achieved through multiple approaches. The jQuery load() method and Fetch API offer dynamic loading with full styling control, while iframes provide simple embedding with isolated contexts. Choose the method based on your project requirements, browser support needs, and whether you want dynamic or static inclusion.
68K+ Views
