April 9, 2024
How to include HTML files on web pages the good, old-fashioned way
Server-side includes have been around for as long as I can remember — and that goes back to the days of dial-up. After all these years, I finally feel good about using them.
Let me explain.
First of all, SSIs are an easy way to include one html page in another html page. So, for example, if you have a navigation bar that’s the same on all pages, you can create it once in a separate html file, then include it on all the other html pages.
Here’s what the include code looks like:
<!--#include virtual="/nav.html" -->
That way, if you have to make a change to the navigation, you only have to do it in one place, instead of laboriously going through every page copying and pasting.
But there was always a catch, and I never liked it. You had to change the file extensions of all your pages to shtml. I guess the “s” stands for “server-side”.
Anyway, it’s annoying and looks weird.
So what changed for me at long last? I learned about commands in the htaccess file!
You can add lines to htaccess that make html and htm files act like shtml files.
AddType text/html .shtml AddHandler server-parsed .shtml Options Indexes FollowSymLinks Includes AddHandler server-parsed .html .htm
Before you do that, though, make sure it’s OK with your hosting service. As far as I can tell, the worst that could happen is that it simply wouldn’t work. But you never know. In my case, the service provided the instructions so I knew it was OK.
While I appreciate all the YouTubers patiently showing how to do includes with JavaScript, I can’t help but feel that something coming straight from the server is going to be a faster, more seamless experience for visitors.