22

I have some HTML files, and each one of them I want to partially render in another HTML file, for example header.html and footer.html in order to observe DRY concept.

HTML files should look like this:

<!--render header.html-->
<div>
    Content
</div>
<!--render footer.html-->

How can I do that?

Afshin Mehrabani
  • 33,262
  • 29
  • 136
  • 201

5 Answers5

29

If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.

Have a look at the jQuery 'load()' function here:

http://api.jquery.com/load/

Assuming your have the following html:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

your usage would look something like this:

$('#header').load('header.html');
$('#footer').load('footer.html');
dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89
22

Here's a link (first one from Google I might add) that explains how to do this in various languages.

Also note that some IDEs take care of this for you. Dreamweaver being one example; in ASP.NET there are master pages; and so on.

PHP:

<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>

ASP:

<!--#include file="path to file/include-file.html"-->

JS:

JavaScript is another way to include HTML within the pages of your site. This has the advantage of not requiring server-level programming. But it's a little more complicated than the server-level include methods.

  1. Save the HTML for the common elements of your site to a JavaScript file. Any HTML written in this file, must be printed to the screen with the document.write function.

  2. Use a script tag to include the JavaScript file on your pages.
    <script type="text/javascript" src="path to file/include-file.js">

  3. Use that same code on every page that you want to include the file.

PLEASE NOTE that the JS version is NOT ideal.
1. JS may be disabled or unavailable in the browser.
2. The page won't be rendered/loaded all at once.

Also, I don't think DRY really counts for this one. Consider using an IDE that will create page templates for you (like Dreamweaver for example).

If you are brave enough (and a little bit old fashioned) and you can't use any of the above, consider using an iframe for your content:

<html>
    <body>
      <div>my header</div>
      <iframe src="mycontent.html" />
      <div>my fooder</div>
    </body>
</html>

DISCLAIMER
I would rather cut off my own hands than implement the iframe or JS approach. Give deep consideration towards whether you actually NEED to do this.

Paul Fleming
  • 24,238
  • 8
  • 76
  • 113
  • He is trying to include HTML file in HTML file, how do you use php on a .html extension file? – DJ22T Oct 29 '15 at 20:25
  • @DannyG My answer demonstrates how this can be achieved in a number of technologies. While I don't recommend it, if the OP wants to do this with HTML files only then the options are JS or IFRAME as noted in my post. Quote from the JS section: "not requiring server-level programming" – Paul Fleming Oct 30 '15 at 14:14
  • @DannyG JS can also be used to make XHR requests to pull the content in. – Paul Fleming Oct 30 '15 at 14:15
5

If you are looking for a client side only solution that is html/js only you should have a look at AngularJS and its ngInclude syntax.

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

Christoph
  • 26,519
  • 28
  • 95
  • 133
  • thanks Christoph ! "ng-include src" is cool, it seems fragment.js does the same work , but raise error .... – dfang Apr 05 '13 at 03:50
3

If you are using server-side programming, you can use server-side include else if your host file is an HTML file then you can use html SCRIPT tag to include the header.html and footer.html files. Though, am not sure as to what do you really mean by partially rendering HTML file?

Shant
  • 237
  • 1
  • 3
  • 16
  • I don't use any server side language. Only JavaScript, HTML and jQuery. – Afshin Mehrabani Jul 22 '12 at 07:45
  • 2
    Well in that case, you can use SCRIPT tag to include the HTML file with src attribute having the URL of the HTML file. The Article posted by flem is very helpful. – Shant Jul 22 '12 at 07:47
0

As others said, it looks like it can't be done with HTML alone. Another way it could be done on the server-side, if you are using Java, is with Thymeleaf.

For example, adding a main menu on every page with <div th:replace="fragments/mainmenu.html"></div> . Then mainmenu.html could just contain a bunch of divs. The fragment doesn't need to be a full HTML page.

Philip Dodson
  • 337
  • 3
  • 9