Including external HTML file to another HTML file

Question

How can I insert an external html file to my file?

For instance:

<div id="header">

       Here show the external HTML code in the file, for example: name.html

</div>

Thank you very much!

Please check similar questions before making a new one, I'm sure this has been asked many times before. — Ozzy, Jun 17 '13 at 13:17
If there are other questions which have better answers, could someone please link to them? Thanks — Luke Griffiths, Jun 09 '14 at 18:13
@kapa I'm voting to re-open because (1) the linked question asks about best practices and this one asks a practical how-to question, (2) the linked question is about templates in general and this one is specifically about including the contents of an external file (which can have other uses beyond just templating), (3) The answers on that question and this question are totally different with little if any overlap. — JBentley, May 04 '16 at 20:16
To expand on point (2), I needed to know how to include external files so that I could share content between flashcards in [Anki](https://en.wikipedia.org/wiki/Anki_%28software%29). None of the answers in the other question are relevant because they all assume the use of a browser (e.g. with JavaScript) or webserver (e.g. with PHP). This question, and the answers, can apply to uses of static HTML other than websites. — JBentley, May 04 '16 at 20:17
duplicate of [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — João Pimentel Ferreira, Dec 28 '20 at 21:37

score 60 · Answer 1 · edited May 21 '14 at 17:25

60

Another way is to use the object tag. This works on Chrome, IE, Firefox, Safari and Opera.

<object data="html/stuff_to_include.html"> 
    Your browser doesn’t support the object tag. 
</object>

edited May 21 '14 at 17:25

mmohab

answered May 21 '14 at 17:01

Stuart G

3

This causes issues with hrefs. They load within the frame of the object by default. You need to mark the hrefs target as parent http://stackoverflow.com/a/1037870/852806 – JsAndDotNet Oct 19 '16 at 15:42
1

this worked, but all the CSS for my div's in the stuff_to_include.html is being ignored. How do I get the styling back onto it? – Robbie Nov 30 '19 at 19:59
@Robbie Have you find any solution? – ppusapati Jul 14 '20 at 08:10

score 12 · Answer 2 · answered Jun 17 '13 at 13:20

12

You can use jquery load for that.

<script type="text/javascript">
$(document).ready(function(e) {
    $('#header').load('name.html',function(){alert('loaded')});
});
</script>

Don't forget to include jquery library befor above code.

answered Jun 17 '13 at 13:20

9

While technically correct (this will, indeed, load an external HTML file), this is like doing kidney surgery with a backhoe. Since the question isn't even tagged jQuery, this suggests going out and getting a backhoe for the express purpose of performing kidney surgery -- even worse. – Chris Baker May 21 '14 at 17:30

score 8 · Answer 3 · answered Jun 17 '13 at 13:15

8

You're looking for the <iframe> tag, or, better yet, a server-side templating language.

answered Jun 17 '13 at 13:15

SLaks

score 1 · Answer 4 · edited May 23 '17 at 12:02

1

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

But content that you way to have appear on multiple pages is better handled using templates.

edited May 23 '17 at 12:02

Community

answered Jun 17 '13 at 13:16

Quentin

But in this way I see the source code, right? Because my purpose is that: my header, menu and footer appear in many other HTML file. In order to don't repeat any time the code I prefer write one HTML for each section and then load it in the page (in this way maintenance is more easier). – user2467899 Jun 17 '13 at 13:20
"http://stackoverflow.com/a/16132516/19068" — Only if you view source. – Quentin Jun 17 '13 at 13:21
"Because my purpose is that: my header, menu and footer appear in many other HTML file." — Then use a template instead of an HTML feature. – Quentin Jun 17 '13 at 13:21

4 Answers4