Including another HTML file in an HTML file

In this article we will learn the ways we have to include another HTML file in an HTML file, to be able to reuse files in a simple way

Hey you all programmers, how are you? Let’s learn the ways to include an HTML file in another HTML!

First, it is good to clarify that there is no native way to do this in the HTML itself.

That is, we will need other tools that will do this HTML file insertion in the other

So let’s see some of them:

Include by Apache

If you are using a web server in your application, such as Apache

It is possible to create an instruction that will insert a file into another

Let’s take a look:

<!-- #include file="file.html" -->

With  jQuery

With the jQuery library it is also possible to easily add an HTML to the page

See the instruction:

$( "#element" ).load( "file.html" );

Through the load method, we load an HTML file into another HTML

Other Solutions

You can also opt for frameworks that use components such as: React, Vue and Angular

So you can add the HTMLs only when needed, on the page you want

The concept of Single Page Applications (SPA) has become increasingly present in the web world.

Of course, here the learning curve is much higher, and you may need to change your project completely

If you need a quick solution use the two methods mentioned first, and then learn this variation with SPA

Conclusion

In this article we learned how to include another HTML file in an HTML file

We use several ways, such as native Apache, jQuery and modern front-end frameworks

It is also important to point out that there is no native way to complete this action with pure HTML

Do you want to learn more about HTML? Click here!