The website contains multiple pages for various functionalities. To avoid mess and to easily modify the content, the developers preferred to design multiple files for different web pages and connect these pages to a single file. Thanks to HTML that provides the functionality of linking another HTML file in an HTML file for easy access.
This post will demonstrate the method for including the HTML file in another HTML file.
How to Include Another HTML File in an HTML File?
To add one HTML file to the other HTML file, try out the given instructions.
Step 1: Create First Page
First, create a “<div>” container and assign the class with the name “firstdiv”. Then, embed some text in the paragraph element “<p>”:
<p>Hello its my first HTML page</p>
</div>
It can be observed that the text added in the paragraph element is shown on the web page:
Step 2: Create Second Page
Create a second page, add a container “<div>” and embed some text inside the <div> tag:
Its my second HTML page
</div>
Move back to the first page for further processing.
Step 3: Define Space for Second Page
Create an empty div container and include a class named “secdiv” for locating the place for the second HTML page into the first HTML page:
Step 4: Include Second File into First File
Next, add “<script>” tag and define the type of the script as “text/javascript”. The script tag is used to embed JavaScript code in the HTML page. To load the second HTML page into the first page, define a simple function that will access the empty div container with the help of the class “.secdiv”. Then, load the second page by utilizing the “.load” function:
$(function (){
$(".secdiv").load("second_page.html");
});
</script>
As a result, the second HTML page is loaded into the first HTML page successfully:
That was all about including another HTML file in an HTML file.
Conclusion
To include another HTML file in an HTML file, first, create a “<div>” container, assign the “class” attribute and add some text. Then, create another “<div>” with the same procedure. After that, specify another empty <div> container that allocates the space for the second page on the first page. After that, utilize the JavaScript function “.load” within the “<script>” tag to load another HTML page in an HTML file. This post demonstrated the method for including the HTML file in other HTML files.
