Is there a way to import HTML into an HTML file?

Question

I've tried looking for this on here and on google but I haven't really found an answer to this specific question and I'm not sure if there's something - a term or something that I need to look for, so I apologize if this is a commonly asked question.

Either way, let's say for example that I'm building a website with many sections and I wanted these sections to be modular, so each section is it's own html file. So basically I could include this little module anywhere I want on the main html file or maybe I could simply include navbars and footers onto other HTML pages without having to rewrite lines of code.

Is this possible with just HTML alone?

the best you could do without js or a server side language is to use iframes — Pete, Feb 28 '19 at 11:41
Possible duplicate of [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — Wai Ha Lee, Feb 28 '19 at 18:06
See HTML Modules https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md and https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/ewfRSdqcOd8/w_Fr6rJ3DQAJ and https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-module-spec-changes.md and background discussion at https://github.com/w3c/webcomponents/issues/645 and some issue discussion at https://github.com/w3c/webcomponents/issues/783 — sideshowbarker, Mar 01 '19 at 10:09

Adrian · Accepted Answer · 2019-03-01T09:57:31.850

20

Edit: An option worthwhile exploring is the object tag. You can include another file (of any kind) onto your page.

This seems like a more suitable option compared to the rest of options below.

<object type="text/html" data="file.html"></object>

It works on similar basis as HTML5 Import.

The object tag is part of HTML 4 therefore it's supported since IE6+, Firefox 2+, Chrome 1+ etc.

Using HTML5 Import. It does have very limited support/browsers implementing it.

<link href="extern.html" rel="import" />

Other than that you will need Javascript at bare minimum to import another file if you want to do it from client-side. There are variety of options available to do it from back-end depending on your tech.

Another possibility as Pete highlighted is the use of iframes (although I would prefer not to use them).

The use of HTML5 Imports is highly discouraged as you can see on here.

Here's few notes taken from the above link:

MS Edge status: Under Consideration
Chrome status: Deprecated
Firefox status: not-planned
WebKit status: Not Considering
Firefox has no plans to support HTML imports though for now it can be enabled through the "dom.webcomponents.enabled" preference in about:config

edited Mar 01 '19 at 09:57

answered Feb 28 '19 at 11:39

Adrian

7,768
2
23
39

4

"Very limited" is an understatement: **Obsolete since Google Chrome 73** – Jonathon Reinhart Feb 28 '19 at 11:43
@JonathonReinhart Added a little more "discouragement" at the end of the answer. I do agree it is an understatement - couldn't think of a more suitable wording though. – Adrian Feb 28 '19 at 11:49
@Adriani6 thanks! I recall watching some tutorial on youtube that uses this sort of method to keep things modular a few years ago and I'm fairly certain they used a server-side language to get it done. Was just curious to see if this was possible with the bare minimum. This answers that question. – jollyjwhiskers Mar 01 '19 at 08:13
@jollyjwhiskers See the edit. This might be a solution you're looking for! – Adrian Mar 01 '19 at 08:43

score 4 · Answer 2 · answered Feb 28 '19 at 11:38

No, this cannot be done with plain HTML.

Alternatives:

Run server-side code like PHP
Use a static site generator to build your page
Use javascript on the page to bring in common components (although this doesn't work well when you're trying to eliminate code duplication between pages)

score 3 · Answer 3 · answered Feb 28 '19 at 11:44

You can't do it with plain HTML but you can use javascript inside script tag in your html file like this jQuery example

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
            $('#header').load("header.html");
            $('#footer').load("footer.html");
         });
      </script>
   </head>
   <body>
      <div id="header"></div>
      your content........
      <div id="footer"></div>
   </body>
</html>

score 1 · Answer 4 · answered Feb 28 '19 at 11:44

1

What you can do is create a php file where you write the html code, and in the index.php call that same file. For exemple:

Tis is your index .php and the file footer.php is the other file with the html that you want.

<html>
<body> 
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<?php include 'footer.php';?>
</body>
</html>

Or

you can also create an iframe, give it a specific size, in your html file and in the src, you can refer to the html file that you want

<iframe src="../../something.html"></iframe>

answered Feb 28 '19 at 11:44

Luis Luis Maia Maia

669
1
7
25

1

I was looking for a HTML+PHP solution. This worked for me and is conceptually simple. Interestingly, the included files were plain HTML with a `.html` extension and it still worked. Small suggestion: the html was static so I used `include_once` - not sure if it is more efficient or not. – rugplots Mar 22 '22 at 18:38
1

You can even batch several includes in the same `` block. – rugplots Mar 22 '22 at 18:44

Is there a way to import HTML into an HTML file?

4 Answers4

Linked