Equivalent of Include() in HTML

Equivalent of include() in HTML

It cannot be done purely by HTML. (There are iframes, however, but I don't think that qualifies in this case.)

It can be done using JavaScript. You get the other file via Ajax, and place its contents inside an HTML element on the current page.

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.

HTML equivalent of PHP include for JavaScript parts

In order to import other pages into your current document, you need to use a link tag.

For example....

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

This will allow you to reference other html, css or javascript documents into your page without copying and pasting the same code within each page.

https://www.w3schools.com/html/html_links.asp

Include option in HTML

HTML is not a server-side language, it's just a markup language. It does not offer any way to include the contents of a different page in your HTML code. HTML simply doesn't support it.

If you're willing to use a library such as jQuery, then this will be an easy task. You can use the jQuery .load() method to fetch the contents of your HTML file and then inject it the HTML DOM.

$(document).ready(function() {
    $('#someDiv').load('/path/to/file.html');
});

Note that remote files won't work because of the Same Origin Policy. Also, note that it's a bad idea if you care about SEO. The search engine spiders won't see your actual HTML code, and they might miss out important parts of your website.

The best way to do this would be to use a server-side language. If you're already serving dynamic content, then it makes more sense to do so. Server-side scripting runs on the server machine and then the results of that scripting, generally HTML markup are then sent out to the client.
The difference is that the HTML markup is generated before pageload, not during or after, as is the case with the method shown above.

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" -->

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.

Include html in html through javascript

This instruction doesn't work at all

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

...probably becaue SSI is not enabled. Presumably you're telling us this because you think it would give you the result you want - implying that part of the question is why didn't it work? What did you do to investigate?

Is it a bad practice to write an html header (or footer) in a javascript file then include the .js in all of my html files?

It's not about bad practice - it won't work - you can inject html from javascript - but you need javascript code to do the injecting. Also this contradicts your earlier statement:

I want to use only html

The code you've provided does not inject html it appends it. The problem with document.write is that it only writes to the end of the document input stream. And if that stream is already closed, it re-opens it and clears the current HTML. There's never a good reason to use document.write(). Consider:

<html>
   <div id="header">
     <noscript>....</noscript>
   </div>
   <div id="page_specific_content">
   ...
   </div>
   <div id="footer">
     <noscript>....</noscript>
   </div>
 </html>

and...

 function addHeader()
 {
   var el=document.getElementById("header");
   if (el) {
      el.innerHTML="...";
   }
 }

But this is still a bad way to write a dynamic website. Even if you don't want to run ASP or PHP or PERL or serverside JS or.... on your production server, it'd make a lot more sense to to dfevelop using a proper CMS or templating system then scrape the HTML to get a static version for publication.

Equivalent of Include() in HTML