# Direct HTML includes.... are they even possible???

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?

![html5-imports.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645870356558/nY_yrGf9K.png)

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:

![blog-img-1.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1645853612111/MTeUdtMLF.JPG)

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](https://searchengineland.com/guide/what-is-seo)) issues. These tags make a web page vulnerable to XSS([Cross-site Scripting](https://owasp.org/www-community/attacks/xss/)) 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.


![Screenshot (884).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645870190541/WO1Qc0tWY.png)

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?
 

