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

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>

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


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)

Tags:

Html

Recent Posts