With HTML tags, you can include external files that contain styling information, scraps of JavaScript, images, PDF content, and even audio and video content. For reasons that defy explanation, there is no tag that allows you to include an external HTML file as-is. This means that if you have a 20,000-page website that has the same header, footer, and navigation bar, you are forced to include the code of the header, footer, and navigation bar in each of those 20,000 pages. Once you have the header, footer, and navigation bar code on each of those 20,000 pages, any changes must be made 20,000 times to update your website. Can you say unbelievably stupid
? I knew you could.
Back in the olden days, the way around this was to create your webpages using SHTML — Server [Parsed] HTML — instead of plain vanilla HTML. Before sending your webpage code to visitors, the server would parse your code and substitute predefined code wherever it encountered special Server Side Include (SSI) placeholders. To include files that contained the code for your header and your footer, for example, you would place these SSI directives in the appropriate places in your HTML file, use .SHTML instead of .HTML for the filename extension and the server would do the rest.
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--#include virtual="/_assets/includes/metatags.htm" -->
<title>Welcome</title>
</head>
<body id="top">
<!--#include virtual="/_assets/includes/header.htm" -->
<p>
Your content goes here.
</p>
<!--#include virtual="/_assets/includes/sidebar.htm" -->
<!--#include virtual="/_assets/includes/footer.htm" -->
</body>
</html>This was terribly convenient, but back then the Internet, servers, and hard drives were much slower than they are now, and server-parsing adding perceptible delays in the delivery of your webpages to visitors.
BBEdit handles SHTML files just fine, but it is getting more and more difficult to find modern web hosting that supports SHTML. This could limit your choices in selecting a web host, and it would definitely be a pain in the neck should you have to move your site to a different server. My recommendation is to avoid SHTML in favor of BBEdit includes, PHP, or (worst case) JavaScript AJAX calls.
Then along came the PHP (Personal Home Page) general-purpose language that was perfect for building websites. As with SHTML, the standard approach involves using a different filename extension: .PHP instead of .HTML. With PHP, your webpage template might look something like this:
<!DOCTYPE html> <html lang="en-US"> <head> <?php include $_SERVER['DOCUMENT_ROOT'].'/_assets/includes/metatags.htm'; ?> <title>Welcome</title> </head> <body id="top"> <?php include $_SERVER['DOCUMENT_ROOT'].'/_assets/includes/header.htm'; ?> <p> Your content goes here. </p> <?php include $_SERVER['DOCUMENT_ROOT'].'/_assets/includes/sidebar.htm'; ?> <?php include $_SERVER['DOCUMENT_ROOT'].'/_assets/includes/footer.htm'; ?> </body> </html>
PHP offers a lot of additional processing power beyond includes, which is why it used in 80 percent of websites, including powering WordPress.
BBEdit handles PHP files just fine, but for your webpages to load you must host them on a server that offers PHP processing. PHP hosts are widespread and easily found, but typically are available only with a monthly hosting fee.
These days you can also include external HTML content using JavaScript AJAX calls, such as jquery .load(). AJAX includes help cut down on the amount of time you need to spend updating and maintaining your site, but because they load after the display of the webpage has already started, they may flash
into existence a split second after they are needed, and even though you can see them on the page they are not really part of your webpage code, so any actions you need to perform on the included sections require special handling. This includes web crawlers such as Google, which will not see
the included code and those may not accurately crawl your site. If AJAX includes are the best solution for your website, though, BBEdit handles them just fine, too.
BBEdit offers the different types of includes: One-time includes, persistent includes, and placeholders. BBEdit includes work differently than SSI/SHTML or PHP includes in that instead of text replacements being done on the server, they are done on your computer before you upload the files to the server. This makes them not quite as elegant to use as SSI/SHTML or PHP includes, but they are incredibly handy.
The persistent include is the one we want for now. Using persistent includes, your webpage code might look like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- #bbinclude "meta.incl" --><!-- end bbinclude -->
<title>#TITLE# || BBEdit for websites</title>
</head>
<body id="top">
<!-- #bbinclude "header.incl" --><!-- end bbinclude -->
<h1>
#TITLE#
</h1>
<p>
Your content goes here.
</p>
<!-- #bbinclude "nav.incl" --><!-- end bbinclude -->
<!-- #bbinclude "footer.incl" --><!-- end bbinclude -->
</body>
</html>
Do not store your BBEdit persistent include files inside your local site root folder. See Project Organization for one way of managing your files.
You may have noticed that instead of the word Welcome
for the page title, the BBEdit version has Include files || BBEdit for websites,
as does the opening h1 tag. This is an example of a BBEdit placeholder. The judicious use of placeholders can really speed up the creation of mass quantities of webpages that have the same basic format and include files.