Home/ Questions/Q 511355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:12:29+00:00

Very basic question: I am coding a web app that has a handful of

  • 0

Very basic question: I am coding a web app that has a handful of pages. These pages have the usual shared elements: eg, the site’s header/masthead and a side-bar are present on all pages. The HTML is static (not dynamically generated, its “ajaxy-ness” is done client-side).

What is the best way of importing/”including” those common elements into my pages? The solution I am using is to have the HTML files contain empty place-holders

<div id="header"></div>
<div id="leftSideBar"></div>
(...)

and then do in jquery’s $(document).ready():

$.get("header.html", function(html) { $("#header").html(html); });
// ....

Is this the best way to do this? I’m new to web development. : )

I guess I could also dig up a “macro-like” code-generation tool that I would run on the HTML files to replace, eg, “#header” with the contents of header.html. That way loading a page would require a single request for a single HTML file, which sounds better.

What is the smart way to achieve this? I am sure this problem has been solved a thousand times.

EDIT: The server-side is coded in Python+cherrypy. (I am assuming it is reasonable to try to keep away from dynamically generating HTML when doing “web 2.0-ish” web apps. Please correct me if I am wrong. As I said, I am very new to this environment.)

Thank you for your insights,

lara

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to include files, please consider using some backend language such as PHP or ASP. Javascript is not really meant to do this even if this would work.

    <?php include 'other_file.php'; ?>

    Using javascript to do this will lead, I think, to a poor SEO and the loading of the page might look weird for the end user. If you really don’t want to use a backend language, some IDE have a way to handle templates, you could look into that.

    Concerning frameworks, most of them have a way to handle templates. ASP.NET has the master page system, Ruby on Rails has layouts.

    Here’s an example using Rails :

    <html>
...
<div id="content"> <%= yield %> </div>
...
</html>

    Here all the content of a subpage will go into the “yield”. Here’s a link to learn more about that.

    Some frameworks can handle multiple place holders.

    • 0