All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Include HTML File In HTML

Last Updated : Jul 1, 2023

How To Include HTML File In HTML

In this tutorial we will show you the solution of how to include HTML file in HTML, when using javascript we can load html file in another html file with the help of jquery library support.

Javascript used to create dynamic and interactive web content like applications and browsers.

Step By Step Guide On How To Include HTML File In HTML :-

For include any file in html we need to use load() method of jquery. Load() method loads data from a server and puts the returned data into the selected element.

Here we used <div> element with ID “htmlfile” for loaded file bind to that element. So the result will have two html files content.

Let see how to implement in coding.

<!DOCTYPE html>
<html>
<head>
<title>Include html file in html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script >
    $(function(){
        $("#htmlfile").load("content.html")
    });
</script>
</head>
<body>
    <h2>BELOW LINES LOADED FROM CONTENT.HTML FILE</h2>
  <div id="htmlfile"></div>
</body>
</html>
CONTENT.HTML
<html>
    <a href="#">google</a><br>
    <a href="#">facebook</a><br>
    <a href="#">gmail</a><br>
    <a href="#">linkedIn</a>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and if need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. First <script> tag contain jquery library supports for implement load() method. Within <script> tag $ symbol as we know it’s a alias for JQuery() function and this selector fuction that selects DOM elements.
  5. $(“#htmlfile”) selects ID of html element, load(“content.html”) loads contents from content.html file and returns data to the element with ID of “htmlfile”.
  6. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
  7. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  8. <h2> already we know it is header tag within <h2></h2> tag texts are main html file text. <div> tag used for loaded contents from content.html file displaying purpose.
  9. In content.html file we simply described four <a> anchor tags. We can modify or add any kind of contents in content.html file as your wish. Result will same if your modified content.html file those contents also displayed on webpage. <br> tag used for break the line.
  10. Note is don’t forget to run the server before execute the code then only jquery will do load data from server and return to client webpage.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

I hope this tutorial on how to include HTML file in HTML helps you and the steps and method mentioned above are easy to follow and implement.

In conclusion we are learned about how to include html file in html with jquery support.

Now we can load any kind of files in html. JQuery is a javascript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation and AJAX.

So we can explore many things in coding when use jquery.