All TalkersCode Topics

Follow TalkersCode On Social Media

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

How To Include A Html File Into Another HTML File

Last Updated : Mar 11, 2024

How To Include A Html File Into Another HTML File

In this tutorial we will show you the solution of how to include a HTML file into another HTML file, we know that it is a complex concept, and there are many ways to done this.

But one thing to note here that you always found this topic with the help of some server languages.

But today, we here tell you that how to are able to include html file into another html file with the help of html code only.

Step By Step Guide On How To Include A HTML File Into Another HTML File :-

As, we already say that you always found on web that this article is done with the help of JavaScript, jQuery, Ajax and other languages.

But today here, we will show you how you are able to done this with the help of html codes only.

For this here you have to include or paste a script code that is publicly available for all. Which is given below.

<!DOCTYPE html>
<html>
<head>
    <title>
       Html include
    </title>
    <script src="js/jquery.js"></script>
    <script src="https://unpkg.com/htmlincludejs"></script>
</head>
<body style="text-align: center;">
    <include src="demoo.html"></include>
</body>
</html>
Demoo.html
<!DOCTYPE html>
<html>
<head>
    <title>
        html
    </title>
    <script src="js/jquery.js"></script>
</head>
<body style="text-align: center;">
    <h1>
        Form in html
    </h1>
    <h3>
        Fill the following details
    </h3>
    <form id="formdetails">
        <label for="">
            Enter your First name
        </label>
        <input type="text" name="fname" id="fname">
        <br><br>
        <label for="">
            Enter your last name
        </label>
        <input type="text" name="lname" id="lname">
        <br><br>
        <label for="">
            Enter your age here
        </label>
        <input type="number" name="age" id="age">
        <br><br>
        <label for="">
            Enter your email here
        </label>
        <input type="email" name="email" id="email">
        <br><br>
        <input type="submit" value="submit" name="submit" id="submit">
    </form>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page.
  4. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
  5. So, both have </head> and </title> ending tags respectively. Here, we link a script that I found on https://www.npmjs.com/package/htmlincludejs
  6. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In second html, we create a form only.
  7. Whereas in first one html code, we only include a script file which we get from web and the link is specified in this article.
  8. After this is body tag, here we use include tag, which is a paired tag. in src attribute of include you have to give the location with name and extension.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article we are able to include an html file into another html file.

I hope this tutorial on how to include a HTML file into another HTML file helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪