You can utilize JavaScript to embed another HTML document within an HTML file.
While constructing a website, you may desire to incorporate the identical navigation menu, footer, or various components across multiple pages. Thus, rather than duplicating the same code in every document, you can embed one HTML file within another. In this article, we will explore the techniques for embedding another HTML file within an HTML file.
Table of contents:
Techniques for Embedding Another HTML File in an HTML File
Several approaches exist, including using the <iframe> tag, JavaScript, and jQuery.load(), to include another HTML file. Let’s delve into these in the subsequent section:
Technique 1: Utilizing <iframe> Tag
The <iframe> tag can be employed to embed an HTML file within another HTML document. This technique is beneficial for showcasing 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>Embed 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 illustration, the header.html file is embedded into the primary HTML document via the <iframe> tag.
Technique 2: Utilizing JavaScript
You can employ JavaScript to insert the HTML file into a designated area of the HTML document. This method provides a dynamic way to load external HTML files.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embed 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 loaded dynamically into the div identified by id=”header-container”.
Technique 3: Utilizing jQuery.load()
You can utilize the .load() method in jQuery to incorporate 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>Embed 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:
Clarification: Employ jQuery’s .load() function to incorporate an external HTML document into your primary page. The header.html is appended to the #header-container div upon the document being ready.
Technique 4: Implementing Web Components
Utilizing web components enables you to construct a reusable component that facilitates loading an external HTML file.
Illustration:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incorporate with Web Components</title>
</head>
<body>
<!-- Custom HTML tag to include header.html -->
<custom-header></custom-header>
<p>Primary 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>Result:
Clarification:
This approach is utilized in contemporary web browsers and (connectedCallback()) is employed for functioning within a custom web development context. This script creates a unique HTML element named <custom-header>. It automatically loads when <custom-header> is detected, thereby allowing you to reuse the header without the necessity of duplicating its code on each page manually.
Summary
You can utilize the <iframe> tag, JavaScript function, jQuery.load(), and Web Components to integrate another HTML file into an HTML file from an external source. The methods discussed above are more efficient in appending another HTML file.
How to Incorporate Another HTML File in an HTML File? – FAQs
The article How to Include Another HTML File in an HTML File? was first published on Intellipaat Blog.