We all have been using HTML to create web pages for ages now. Whether it's just a basic web page or a good-looking website, HTML is everywhere. But at times it becomes irritating when you've to write the same code again and again for different web pages of a website. Like if you want a common header in all of your web pages related to a particular application, you've to write its code in every web page's HTML file. So, is there any way with which you can just write a template HTML file for the header and include them in every other web page's HTML file?

This idea came to my mind a few days back when I was working on a practice project. I had to create 2 different web pages, but both of them had this same header, and I was wondering if I can just create a "header.html" file containing the code of the header and will use it in both the web pages. So, I started digging up the internet for the same. At first, I got some pretty easy methods to perform my task, but all those stuff have their own complications. Some of them were using javascript selectors, jquery, plug-ins, and so on.

I started thinking, why can't I just have something like an in-built HTML tag which can do the work for me, so that I don't have to use javascript and all. Then, I found that we do have something called HTML imports which look something like this:

I could have just inserted this piece of code in my HTML file and that will work, but no it ain't that simple. On further digging, I found out that HTML imports have been deprecated from the majority of the browsers and the reason was simple, they had been a Parsing **obstruction**. The more you use this kind of import, the more time it will take to load your web page.

After moving on with HTML imports, I found that IFrame and Object tags can do the same work for me, but there is a problem with them too. I have to style them separately as they are different components on a web page, but this can be resolved using styling. The main problems are Security risks and SEO(Search Engine Optimization) issues. These tags make a web page vulnerable to XSS(Cross-site Scripting) and they might not be indexed and shown in google's search results. That's why IFrame and Object tags are also not the ideal methods.

So, after this much research, I am pretty sure that there is no method available currently for including one HTML file directly in another. Javascript and its successors have made it easy to do the same and they are being used pretty much everywhere. I leave you guys to think about it, that whether there should be any method that can help us include HTML files in one another directly or not?