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.
These articles provide a comprehensive overview of the fundamental concepts and basics of JavaScript programming.-
How To Change The Css Background Opacity Of An Element – Understand how to implement changing the CSS background opacity of an element in this blog.
Retrieve The Position Xy Of An Element Using Html – Understand how to retrieve the position (x, y) of an element using HTML in this blog.
How To Change Input Typedate Format In Html – Understand how to implement changing the input type date format in HTML in this blog.
Jquery Data Vs Attr – Understand how to implement jQuery .data() versus .attr() in this blog.
Lateral Join Vs Subqueries In Postgresql – Understand how to implement lateral join versus subqueries in PostgreSQL in this blog.
Css Text Align To Horizontally Center Element – Understand how to implement CSS text-align to horizontally center an element in this blog.
How To Make An Element Width 100 Minus Padding – Understand how to implement making an element’s width equal to 100% minus padding in this blog.
Css Selectors And Specificity – Understand how to implement CSS selectors and specificity in this blog.
Why Dont Self Closing Script Elements Work – Understand why self-closing script elements don’t work, explained in this blog.
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.