Websites tend to contain a lot of duplicate information, for instance:
- Common elements at the top, bottom or sides of webpages (like the top and bottom of this page)
- Navigation elements
It would be very time consuming and error prone to manually copy and paste these parts into every webpage.
I can think of a number of options for managing this situation such as:
- Server side includes:
- Local (Client side) includes:
- Templates and Library items:
- includes from database:
This allows html files to be included into other html files, this including is done in realtime when the webpage is requested from the web. This allows a section of html to be included in many pages without any physical duplication.
html does not have an 'include' tag so it is embedded in a comment as follows:
<!--#include src="hostDirectoryPath\filea.htm" -->
text in base file
<!--#include virtual="hostDirectoryPath\fileb.htm" -->
However this option does have some problems such as,
- server side includes may slow down the sever.
- not all web hosts may support SSI.
- its not possible to preview the page before uploading to server.
- may not be as powerful and flexible as the other options.
Eric has pointed out (here) that it would be better to use <?php include("myfile.html") ?>
This option might allow similar functionality to SSI, but instead uses kontent to combine the html on the local computer. This means there would be 2 file trees on the local computer, the first tree is edited directly by the user, the second tree is then generated automatically from the first, this can then be previewed before being uploaded to the server. This would not have the disadvantages of SSI and could be more flexible, for example, links from file 'a' might be relative to the file itself or relative to the file that included it.
It might be possible to allow several layers of includes, in other words an include inside another include inside another include and so on. This would require a mechanism to specify which level in the file hierarchy any links are relative to.
Dreamweaver uses templates and library items to include common information in web pages.
It uses comment tags to show where the template elements occur in the file, the template information is included in every file that uses it but this duplication is managed by dreamweaver to make sure that any changes to the template are copied into every file that uses it.
The extra information to manage this is uploaded to the server but it is ignored by the browser because it is encoded as a comment as follows:<html>
<!-- #BeginTemplate "/Templates/softwarePageKontent.dwt" -->
<!-- #BeginEditable "doctitle" -->
<title>kontent - managing duplicate information - Martin Baker</title>
<!-- #EndEditable -->
The advantage of this is that all the information is included in the file and it can be previewed and tested locally. The disadvantages are:
- Very complex to implement.
- Downloads from the server are slightly bigger because of these comments.
This is similar to local includes but instead of including from a file we include text from a database. This database might not necessarily be a relational database I think it would be better to use an XML file.
This would have a lot of advantages, it could make it easier to check and update this information across the website. However, it does have limitations, I don't think it would be very practical to include large chunks of text from the database. Due to this it would be good to combine this method with one of the other methods on this page.
The common information is included as a html frame. This means that a frame can be included in many web pages and therefore avoid duplicating data.
However the frames mechanism has a number of disadvantages,
- It is not recommended and my not be included in future html standards.
- Search engines will find the frame rather than the page that contains it, and therefore people may be sent to a partial page.
One possibility might be to use frames when the files are edited locally but convert to a complete page for uploading to the server, this would be similar to the local includes method above.
I suggest using both local includes and includes from a database. I would welcome any views on this.