You can use the JavaScript to include another HTML file in an HTML file.
When you are building a website, you might want to use the same navigation menu, footer, or other elements on multiple pages. So, instead of copying and pasting the same code in every file, you can include one HTML file inside another. Here, we will discuss the methods to include another HTML file in an HTML file in this blog.
Table of contents:
Methods to Include Another HTML File in an HTML File
There are a few methods, such as using the <iframe> tag, JavaScript, and jQuery.load(), that are used to include another HTML file. Let’s discuss them in the section below:
Method 1: Using <iframe> Tag
You can use the <iframe> tag to add another HTML file to an HTML file. This method is useful for displaying external content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Include with Iframe</title>
</head>
<body>
<h1>Main Page</h1>
<iframe src="header.html" width="20%" height="100"></iframe>
<p>Welcome to the website!</p>
</body>
</html>
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Intellipaat</h1>
</body>
</html>
Output:
Explanation: In this example, the header.html is added to the main HTML file using the <iframe> tag.
Method 2: Using JavaScript
You can use JavaScript to insert the HTML file in the specific section of HTML. It is a dynamic approach for uploading the external HTML file.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Include with JavaScript</title>
<script>
function loadHTML(url, elementId) {
fetch(url)
.then(response => response.text())
.then(data => {
document.getElementById(elementId).innerHTML = data;
})
.catch(error => console.error('Error loading HTML:', error));
}
</script>
</head>
<body onload="loadHTML('header.html', 'header-container')">
<div id="header-container"></div>
<p>This is the main content.</p>
</body>
</html>
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Intellipaat</h1>
</body>
</html>
Output:
Explanation: The header.html file is added dynamically into the div with id=”header-container”.
Method 3: Using jQuery.load()
You can use the .load() function in the jQuery to include the external HTML file.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Include with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#header-container").load("header.html");
});
</script>
</head>
<body>
<div id="header-container"></div>
<p>Content of the main page.</p>
</body>
</html>
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Intellipaat</h1>
</body>
</html>
Output:
Explanation: Use jQuery’s .load() function to add an external HTML file to your main page. The header.html gets added to the #header-container div when a document is ready.
Method 4: Using Web Components
Using web components allows you to create a reusable component that makes you load the external HTML file.
Example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Include with Web Components</title>
</head>
<body>
<!-- Custom HTML element to include header.html -->
<custom-header></custom-header>
<p>Main content goes here.</p>
<script>
class HeaderComponent extends HTMLElement {
connectedCallback() {
fetch("header.html")
.then(response => response.text())
.then(data => this.innerHTML = data)
.catch(error => console.error("Error loading HTML:", error));
}
}
customElements.define('custom-header', HeaderComponent);
</script>
</body>
</html>
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Intellipaat</h1>
</body>
</html>
Output:
Explanation:
This method is used in modern web browsers and (connectedCallback()) is used for running inside a custom web development. This code makes a custom HTML element called <custom-header>. It automatically loads when <custom-header> is found, this way, you can reuse the header without having to copy its code into every page manually.
Conclusion
You can use <iframe> tag, JavaScript function, jQuery.load(), and Web Components to include the other HTML file to an HTML file externally. The above-mentioned methods are more effective in adding another HTML file.
How to Include Another HTML File in an HTML File? – FAQs
1. How can I include an HTML file using JavaScript?
You can use JavaScript to load an HTML file into a specific element on your page. For example, you can use the fetch function to get the HTML content and then insert it into a div.
2. What is the iframe method?
You can use an iframe to add another HTML file within your current HTML file. This method is simple but comes with some limitations, like not being able to style the added content easily.
3. How do I include an HTML file using server-side includes (SSI)?
Server-side allows you to include HTML files on the server side before sending the content to the client’s browser. This requires the server to support SSI and is often done using directives like <!–#include virtual=”file.html” –>.
4. Can I use jQuery to include an HTML file?
Yes, you can use jQuery’s load method to load an external HTML file into a specific element on your page. This is similar to using plain JavaScript but can be simpler if you’re already using jQuery.
5. Is there a way to include HTML files in modern JavaScript frameworks?
Modern JavaScript frameworks like React, Vue, and Angular have their own methods for including components or templates, which can be more efficient and powerful than traditional methods.