Repeating Elements Across Web Pages (HTML Includes?)

Good afternoon!

I’m the Webmaster for the Topeka Gem and Mineral Society. Two years ago, I inherited a web site that was not put together very well and given the job to clean it up and make it presentable. It’s a reasonably simple setup–the person who originally set it up knew a little about CSS and HTML–and I’ve been working within that framework ever since.

My goal is to eventually do a complete site overhaul. We have primarily older members in our group; however, some of them want to share their knowledge and skills, and our site will soon need to house video and other resources. I’ll cross that bridge when I come to it.

My issue now is simple maintenance. The site itself is ten pages. Each page has a header, a navigation bar, a footer, and a content pane. The header, footer, and nav bar don’t change from page to page; however, they are hard coded on each page. The obvious problem is that when I DO need to make changes, I have to make them ten times.

I need to keep this as simple as possible. I’m trying to plan ahead (to the time I’m no longer Webmaster) and keep this maintainable by the person who succeeds me.

I’ve been looking at HTML includes to port in the three “fixed” portions of the page, but I can’t even find a straight answer on how to implement them…and there’s several different ways to do it as well (or so it seems).

Can anyone out there offer a good idea on how to work this? My frustration is nearing overload.

Thanks in advance for any assistance that’s offered.

Jason A Schulz
Webmaster / Social Media Manager
Topeka Gem and Mineral Society

PS: I’m learning about web sites and construction–that’s why I joined Sitepoint a year ago. There’s a lot of good stuff out there. I know enough to be dangerous, and I’m trying to channel that. Just so you know.

I do not think you can do it with html.

I use php to create a header, navigation and footer and you can then make pages from them. All you need to do is include them into the page above and below your content.

The header would contain the html and have a variable for the title and keywords. Depending on the page name the title variable would be populated with index, contact whatever. The page name can come from another variable or obtained from the URL. It sounds a bit complicated but it is not to hard.

I’m told it’s possible with just html, but I have no idea how. Personally I use PHP for this kind of thing.
Before you run and hide, thinking I don’t want to have to learn anything as complex as a back-end programming language, I’ll say it only has to be as complex as you want to make it. Simply using includes is quite simple and straight forward.

When I first stared doing this I had a whole bunch of pages all with (mostly) the same includes in them.
A bit like:-

<?php include "includes/doctype.php ?>
<head>
  <?php include "includes/common-head-elements.php ?>
  < unique head elements > ...
</head>
<body>
   <?php include "includes/header.php ?>
   <?php include "includes/nav.php ?>
   <main>
      <p>Unique page content here.<p>
   </main>
   <?php include "includes/footer.php ?>
</body>

That worked, but any change to the page structure (as opposed to content) was still replicated so many times. Because there was the above for every page, just with different unique bits.
Now I do the inverse, I have one single HTML template page, and include the content instead.
So just about all the common html elements are there, like a complete page, except for the actual content, which is a php include and the unique parts like title tag which echo a variable.
The second method is much better IMO and far more maintainable, but it does require just a little more than very rudimentary PHP know-how.
So the first method may be better for you if you don’t know, or are not willing invest a little time to learn anything more than very basic PHP includes.
But the second way is not overly complex or mind blowing at all IMO, just slightly more advanced.

2 Likes

I decide to add an example and it is slightly different to @SamA74 but there is not set method it depends on personal preference.

header.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title><?php echo $title; ?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="utf-8" > 
		<meta name="description" content="<?php echo $description ?>" >
		<meta name="keywords" content="<?php echo $keywords; ?>" >
		<meta name="robots" content="index, follow\" >
		<link rel="Stylesheet" href="/css/layout.css" >

Index page - index.php

<?php

$title = "index";
$keywords = "Index page";

include('header.php');
include('navigation.php');
-- Normal html content
include('footer.php');
?>

I seem to recall Felgal saying it could be done, but I never found out how. By that time I was getting into php and not looking back, so was not interested enough to find out.

But doing exactly what the OP asks is what first brought me to php.
Then I started to see the potential for what else php could do for me, and that was it…

Yes I find php very useful especially for navigation - to add a page all you need is to add the information to one navigation file rather than every page.

I have a site and I can make multiple pages using paging from just one page and it has different page titles etc.

Yes there is not really any right or wrong (within reason), but what works best for you.
The way I do it now is probably more like your example, though not exactly the same.
I may come up with an example, but not today, I’m out of time.

There was an interesting topic about using php for maintainable html navigation last year, which the OP (or others) may find of use.

1 Like

You can configure Linux server with a handle - added to your .htaccess - this will then execute any PHP included in a .html file.

He was probably referring to “SSI includes” which use the “.shtml” extension. :winky:

Further reading:-

Introduction to Server Side Includes

coothead

4 Likes

Yes, there is the server side scripting, now adays often forgotten among web devs.
The SSI directives was common in the past and still very useful for static pages.

The pages that uses the includes should have the file extension “shtml” to get the includes parsed by the server. The included files can have any other file extension, but common is “html” to be easy to check in a browser.

E.g. Following @SamA74’s PHP site structure example for the home page index.shtml:

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <!--#include file="includes/head.html" -->
</head>
<body class=home">

<div class="wrapper">
    <div class="header">
        <!--#include file="includes/header.html" -->
    </div>
    <div class="nav">
        <!--#include file="includes/nav.html" -->
    </div>
    <div class="sidebar">
        <!--#include file="includes/sidebar.html" -->
    </div>
    <div class="content">
        <p>Unique page content here.<p>
    </div>
    <div class="footer">
        <!--#include file="includes/footer.html" -->
    </div>
</div>

</body></html>

Oh, I see Coothead already mentioned SSI. He too has probably used those includes some decade ago. :slight_smile:

1 Like

I’ve done shtml but it was decades ago and I haven’t done shtml since when I found PHP

Shtml works but is limited compared to PHP
But it could still be an option if you don’t need what PHP can do. In addition to cootheads link there’s

http://httpd.apache.org/docs/current/mod/mod_include.html

1 Like

Or a more minified “includes/index.shtml”:

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <!--#include file="includes/head.html" -->
</head>
<body class=home">
    <div class="wrapper">
        <!--#include file="./includes/header.html" -->
        <!--#include file="./includes/nav.html" --> 
        <!--#include file="./includes/sidebar.html" -->
        <div class="content">
            <p>Unique page content here.<p>
        </div>
        <!--#include file="./includes/footer.html" -->
    </div>
</body></html>

E.g. the “includes/head.html”:

     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./favicon.png">
     <link rel="stylesheet" href="./css/site-styles.css">

E.g. the “includes/header.html”:

    <div class="header">
         <div class="logo">
             <h1>....</h1>
         </div>
    </div>

E.g. the includes/footer.shtml":

    <div class="footer">
         <div class="counter">
              <!-- source # <!--#exec cgi="../cgi-bin/counter"--> -->
         </div>
    </div>
1 Like

I suppose the OP needs to decide how far to take the website. You can mix html, shtml and php pages along with javascript but I think php is a good base.

For instance if you want to make a gallery (examples of minerals) you can set it so you can just drop a new photo into a folder and it will be added to a gallery page automatically. Going to the next step you can have php access a database and you can add information about the image that can be linked to it.

Here is a simplified example of how I do this now. It may be a little odd, but it works for me.
All the actual page files, as in those in the URLs that people view, like index.php, about.php or whatever, they are all identical, with just a single line of code.

index.php :-

<?php   ////	Load the common controller script	//////
    require_once "includes/common-controller.php";

That’s it, that’s all there is.
If for any reason php fails to parse on the sever, you are not exposing very much logic at all. That actually happened to me last week, when I moved a site to a new host.
But it also makes managing multiple pages easier too. Note, they are all including the exact same file. Let’s see that file.

common-controller.php :-

<?php   // This is for anything that is exactly the same for every page
    // Common Includes
    include_once "includes/libs/menu.php"; // Load the menu array
    // Anything else
    
    $thispage = basename($_SERVER['PHP_SELF']); // Get the current pagename
    if($thispage == 'index.php'){
        $cano = '';
        $thisurl = '/'; // For the menu
    }
    else{
        $cano = $thispage;
        $thisurl = $thispage;
    }
    // Some settings
    $follow = NULL;
    $pagetemp = "includes/templates/page.php"; // Default HTML template
    // Add anything else that will apply to all pages

    /////////////////////		Load Controller script (same filename)	//////////////////////////////
    require_once "includes/controllers/".$thispage ;

Here we have all the things that will be exactly the same for all of the pages, so one change here, means the same change being propagated to any number of pages on a site.
So you can set default settings, like the HTML page template.
Note I’m using basename($_SERVER['PHP_SELF']) to uniquely identify the current page (not the include we are in). That is used in a number of ways, such as setting the canonical page name, and identifying the current page in the menu. But more importantly, it’s used to set the page’s unique controller script which has the same filename, but in another folder:-

require_once "includes/controllers/".$thispage ;

This file will hold all the settings and logic unique to that particular page. On a basic static site it will be fairly simple, but dynamic content it could be as complex as you need it to be, with functions, classes, database connections, info from URL variables, any number of conditionals to alter various settings, anything can happen.
This is just an example for a simple page:-

<?php
    // Setting for the head element
    $title = 'The Page Title' ; // Set Default Page Title for meta tag.
    $pdesc = 'A unique page description for the meta tag.' ; // Set Page Description for meta tag.
    $follow = true ; // Will Robots follow and index?
    //$cano = $something ; // Override the default canonical

    $h1 = $title ; // Or whatever else
    $pagecontent = "includes/content/".$thispage ; // Setting include for the page content, 
    $sidecontent = "includes/content/side/".$thispage ; // side bar content file
    //$pagetemp = "includes/templates/other-template.php"; // Override the default template if needed
	// Any other includes required
	include_once "includes/functions/somefunction.php";
	
	// Any other logic required...
	// Could be any number of conditinals, database calls, ect, to change above settings and more.
	// Possiblities are endless

    /////////////////////		Dispay HTML Template	//////////////////////////////
    include_once $pagetemp;

Here we just make a few setting for the individual page, like title, description, etc. It also may override which HTML page template is used by the page and it sets which page content file to use.
Finally it includes that HTML page template.

page.php :-

<!DOCTYPE html>
<html lang="en-gb">
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title><?php echo $title ?></title>
        <meta name="description" content="<?php echo $pdesc ?>">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <link rel="canonical" href="http://www.example.com<?php echo $cano ?>">
        <?php if(!$follow) : ?>
        <meta name="robots" content="nofollow, noarchive, noindex">
		<?php endif ?>
    </head>
    <body>
        <div class="skip">
            <a href="#content" title="Skip to main content">Skip Navigation</a>
        </div>
        <div class="page">
            <header>
                <img src="images/logo.svg" alt="Logo Text">
            </header>
            <nav class="menu">
                <ul>
                    <?php foreach($menu as $mlabel => $murl) : ?>
                    <li><a<?php if($murl == $thisurl){echo ' class="current"';} ?> href="<?php echo $murl ?>"><?php echo $mlabel ?></a></li>
                    <?php endforeach ?>
                </ul>
            </nav>
            <div class="middle">
                <aside class="side clearfix">
					<p>Common sidebar stuff.</p>
					<?php include $sidecontent ?>
                </aside>
                <main id="content">
                    <h1><?php echo $h1 ; ?></h1>
                    <?php include $pagecontent ?>
                </main>
            </div>
            <footer>
				<p>Common footer content.</p>
            </footer>
        </div>
		<script>Common scripts</script>
    </body>
</html>

Just an example, yours will have whatever structure you want.
The important thing is, this is just one file for every page. So again, one change here will be propagated to any number of pages on the site, taking all the pain out of your site-wide edits to the html structure and design.
You see the settings made in the controller populate the unique parts like title, description, h1, etc.
Then in the main page body we include the actual page content file that we set in the controller. That file would just be a chunk of HTML with the unique body content for the page.

I find this method make site maintenance a breeze compared to my older method, as that still had multiple files with all the same stuff in them, that had to be edited over and over. Here the idea is to keep all the boilerplate stuff that is repeated on every page, all in one single file. Then only the stuff that is unique to a page goes into the individual files.

There may be other way. I’m thinking now it could be made smarter using a bit of OOP, but this is really just an introduction to using php for simple sites.

3 Likes

Wow! Lots of good information here. Thanks!

I’m still processing it, but if there’s any more ideas out there please keep them coming!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.