Linking identical HTML over several pages

Question

How would I link identical HTML used in several pages, instead of adding the same markup in all of the several pages.

score 3 · Answer 1 · answered Jul 27 '12 at 23:36

3

It can be done from the server side.

If you're using PHP, you can use include().

answered Jul 27 '12 at 23:36

Madara's Ghost

172,118
50
264
308

pb2q · Accepted Answer · 2012-07-28T16:08:45.820

3

You can do this using an iframe on each of the several pages, with the src being the common HTML.

It also is possible on the client-side using javascript. jQuery makes this particularly easy providing a load method. You can use jQuery.load() to add an HTML block into elements across different HTML pages.

As an example, if every one of the pages has an div named content:

<div id=`contents`></div>

Then you could do this in each page:

$('#content').load('commonContent.html');

edited Jul 28 '12 at 16:08

answered Jul 27 '12 at 23:41

pb2q

58,613
19
146
147

or wait no, the #content is loaded into the html – user1535882 Jul 27 '12 at 23:43
no, `commonContent` is the HTML that you want to share across **all** the pages. each of your _several pages_ that should contain identical markup would have a section named `content`, and the given code would load the same HTML into each of those pages – pb2q Jul 27 '12 at 23:44
but what about the css? will it fall into line, or if not structured right probably be messed up.. – user1535882 Jul 27 '12 at 23:48
generally the same CSS will apply to each of the several pages, but each page will need to include the relevant css, **or** you can similarly load that dynamically. – pb2q Jul 27 '12 at 23:49
1

one possible objection to using an iframe is that it's deprecated in HTML/XHTML strict, but not in HTML5 – yitwail Jul 28 '12 at 16:33
1

the drawback of a javascript solution is that users can disable javascript, so it's often recommended to use javascript only to enhance a page but not to create essential content – yitwail Jul 28 '12 at 16:43

score 2 · Answer 3 · answered Jul 27 '12 at 23:37

2

It is possible using JavaScript http://webdesign.about.com/od/javascript/ht/htjsincludehtm.htm

answered Jul 27 '12 at 23:37

Alex

1,018
1
11
21

score 1 · Answer 4 · answered Jul 27 '12 at 23:49

If it's allowed by the web host, server side includes (SSI) will do the trick. So, to insert the contents of a file "common.htm", just put this in the html for each page:

<!–-#include virtual="common.htm” -–>

you can read about it here: http://en.wikipedia.org/wiki/Server_Side_Includes

score 1 · Answer 5 · edited May 23 '17 at 11:51

1

You should check: http://www.triadwebcrafters.com/article_server_side_language.cfm and Best practice for inserting large chunks of HTML into elements with Javascript?

edited May 23 '17 at 11:51

Community

1
1

answered Jul 27 '12 at 23:52

mmln

2,104
3
24
33

score 0 · Answer 6 · answered Jul 28 '12 at 16:19

0

You might want to look into asp.net MVC framework. You have a Shared View in it to write the part which is common between different pages.

answered Jul 28 '12 at 16:19

aadarshsg

2,069
16
25

Linking identical HTML over several pages

6 Answers6