best practice for dealing with common "structural" elements of pages?
Question: 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


Answer: 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](http://www.entheosweb.com/website%5Fdesign/dreamweaver%5Ftemplate.asp),
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](http://guides.rubyonrails.org/layouts%5Fand%5Frendering.html) to learn
more about that.

Some frameworks can handle multiple place holders.

