Include Another HTML File in a HTML File

Include another HTML file in a HTML file

In my opinion the best solution uses jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

This method is a simple and clean solution to my problem.

The jQuery .load() documentation is here.

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

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

Include html in another html file

Method 1:

I think it would be best way to include an html content/file into another html file using jQuery.

You can simply include the jQuery.js and load the HTML file using $("#DivContent").load("yourFile.html");

For example

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#DivContent").load("another_file.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

Method 2:

There are no such tags available to include the file but there are some third party methods available like this:

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

Method 3:

Some people also used server-side-includes (SSI):

<!--#include virtual="a.html" -->

How to include a html file inside another html file with Vanilla Javascript?

You can try this. I am considering elements has id

<script>
    document.getElementById('link-about').onclick = function() {
        document.getElementById('my-div').innerHTML = '<object data="about.html" >'
    }
</script>

Include another HTML file in a HTML file in the HEAD section of the document

Use $.get from jQuery to add data to head tag. After inital page render.

$.get('./lforms-examples/pages/header-footer/ComponentHeader.html', function(data) {
    $('head').append(data);
});

Read more about favicon
https://mathiasbynens.be/notes/rel-shortcut-icon

How to include an HTML page into another HTML page without frame/iframe?

If you're just trying to stick in your own HTML from another file, and you consider a Server Side Include to be "pure HTML" (because it kind of looks like an HTML comment and isn't using something "dirty" like PHP):

<!--#include virtual="/footer.html" -->

How to include navigation bar in one html file into another html file

It is possible to do. You just need to override the default behavior of the a tag - which will open the link in the current (i.e embedded) document.

Since you want the parent window to be redirected to the selected page, you just need to set the parent window's location with a bit of JavaScript:

// Add this to header.html
function redirect(page) {
    window.parent.location = page;
}

And in header.html, you would need to add an onclick to each of the navigation links like this:

<a href="contact.html" onclick="redirect(this.href)">CONTACT</a>

How to include html file in another html file and then alert result via javascript jquery

jQuery has a handy function for getting other webpages, $.get():

$.get('b.html', function(data) {
    alert(data);
});

function(data) {} is a callback which runs when the http request is made successfully, and data will contain the response body.