How to use Server-Side Includes

How to use Server-Side Includes
Does your website have features that are the same on every page, such as a menu or a tagline at the bottom of the page? If so, you can benefit greatly from the use of include files.

Server-side includes are a way to store HTML code in one file that can be accessed by every page on your site. The main benefit to using includes is that you will save enormous amounts of maintenance time. For example, say you have a fifty-page website and you decide to add a new option to the navigation menu. Would you rather go into every single page and add the new item, or make a change to one file and have it instantly appear on every page of your site? If you prefer the second option, read on.

An include file uses the .inc extension (for example, "") and can hold pretty much anything you'd use in coding your site – HTML, CSS rules, Javascript, etc. Once you've written up the file with your navigation menu, you can call it by placing the following code in each page where you'd like the menu to appear:

<!--#include virtual=""-->

Everything to the left of the equals sign tells the browser what to do with the command (basically, "include the following file…" and the information to the right of the equals identifies the specific file to include. If your file is stored in a separate folder on the server, you would write the include call like this:

<!--#include virtual="/_includes/"-->

Usually the easiest way to figure out which parts of the page should be set aside as includes is to skim through your site and note which sections appear over and over. The navigation menu is the classic example, but you could also include a header image or footer text. If you've got a sidebar that appears on multiple pages, it's also a candidate for an include file. To build the include file, just grab the HTML code for that section and paste it into the include file. You don't need any other code, like a or section – the include file isn't a page in and of itself, just a piece of one.

If you do decide to use includes you'll need to use the .shtml extension for every page that uses an include file, rather than using the standard .html extension. Using .shtml won't change anything about the pages or how the code works; it simply enables your web server to use include files.

This site needs an editor - click to learn more!

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2023 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.