Good practices for including a menu in a website?

Question

I'm quite new to website building. Yet do have some experience in LaTeX and some other programming languages.

I really try and reuse code etc. So, when building my website, I want to "include" for instance the menu in the other pages, in stead of explicitly copy-pasting it in.

There are several ways I know of that can do this:

• the menu is a static page, your content is in an iframe. This is the worst way to do this, since it breaks a lot of stuff such as back/forward etc... (which I know might be wishable for some, but not in my case).

• This is what I'm using now: every web page includes the menu using an iframe:

  <iframe src="menu.html" class="menu" height="100%" frameborder="0"></iframe>
  

  the downside to this method is: the menu doesn't get reloaded properly when people revisit your website, unless you use some scripting that specifically tells the browser to do this:

  document.getElementById('some_frame_id').contentWindow.location.reload();
  

• This is what I was thinking of since my new host allows this: including the the menu using SSI.

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

  The possible downside is that every webpage must allow for the includes, and thus has to be parsed (this slows down the filesystem). Security is not a problem for me.

What would you recommend? Are there courtesy rules of what should be done? Are compatibility problems with any of the methods described above? Are there better methods?

For instance: I'm suspecting the second method (which I'm using now) breaks google indexing, so only my homepage gets indexed. (I'm not sure if this is true though).

Answer 1

The way to do this is to use something like Server-Side include. Other web developers might be using PHP or Python or some templating system, but ultimately the design pattern is that the HTML output is duplicated, but HTML in your template system is not.

Your concern about SSI slowing down rendering is unfounded. SSI is incredibly fast and the web server will employ the same optimizations it would rendering one page; it can cache it in memory and process it on the fly.

Given that you're simply wanting to avoid duplicate HTML, SSI sounds like a good way to go, especially if you already have it working well for you. Its downside is its lack of advanced programming features. But speed is basically never an issue with SSI; it's one of the fastest solutions out there. It also does not affect Google indexing; Google only sees the outputted HTML, not the SSI. SSI is server-side.