Repeat same HTML code in several pages

Question

I have a really hard time searching for this, because I have no idea how to call it.

I'll try to describe the process I want, and see if any of you know such an editor. I have a website that has the same html component repeated in them, for example, a menu. I can define how the menu looks with css, but I can't (as far as I know) add the same piece of html to every html page with a simple line. What I do, is copy the menu over to every place. If I change the menu, I need to do it all again. I know this can be achieved by using a dynamic server, with something like php or jsp, but I don't need it to be dynamic.

I was wondering if there was a way to do this. I thought possibly there was an editor, where I can edit html using includes, and then "compile" the htmls after modification to produce the htmls I will replace on my server.

Thanks

you can achieve it using jQuery's `.load()` function. But I guess you are not looking for jQuery based solutions. — Clyde Lobo, Jun 28 '12 at 08:49
This is what PHP is for. It doesn't matter whether or not the content is dynamic. Just write the menu once, and then include it with PHP whenever you need it. — Jezen Thomas, Jun 28 '12 at 08:52
I think you are looking at templating, and I think dreamweaver has this kind of feature? — Andreas Wong, Jun 28 '12 at 08:52
@JezenThomas : I completely agree with you, this could be the easiest solution — Clyde Lobo, Jun 28 '12 at 08:56
If you're not looking to use PHP then i think Clyde's idea of using jQuery to load the menu is a good idea. Although it will introduce the overhead of having to load jQuery. — Jerryf, Jun 28 '12 at 08:58

score 5 · Accepted Answer · answered Jun 28 '12 at 08:57

5

Have a look at server side includes ... create a menu.shtml page and then include it like so :

<!--#include virtual="/menu.shtml" -->

Its supported by most web servers out of the box (including IIS, Apache and lighttpd)

answered Jun 28 '12 at 08:57

Manse

37,765
10
83
108

score 2 · Answer 2 · edited Jun 28 '12 at 08:59

2

Have you heard about MasterPage Concept

The below link will give you a quick start

Master page are pages which will act as a frame for all other pages. You have to write it only one. And each page that is coming under that, will have to include the master page. Thats all!

edited Jun 28 '12 at 08:59

Manse

37,765
10
83
108

answered Jun 28 '12 at 08:55

madhairsilence

3,787
2
35
76

score 2 · Answer 3 · answered Jul 11 '16 at 16:19

You can do this with jquery

Assume you have page1.html page2.html etc.

You want in each of these pages your contactinfo. You can create a file with the name "info.txt". On the spot where you want this contact info, you put a div. as shown in this example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- page content -->
    <div id="contact"></div>
  </body>
</html>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
        $("#contact").load("info.txt");
    ;
});
</script>

Whatever you place in 'info.txt' will be put on the spot of were you put

score 1 · Answer 4 · answered Jun 28 '12 at 08:54

You could write a simple bit of js in an external file and then call it in each page to dynamically load the menu. You can then simply edit the menu by editting the JS file. all you'd need to do then is include the in the html and use document.getElementById("menu").innerHTML = menuHTML; where menuHTML is a variable containing the pure HTML code of the menu. You can then include the JS file and call it in the body onload

Repeat same HTML code in several pages

4 Answers4

Linked