Common Header / Footer with static HTML

Question

Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?

Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.

Which web server? IIS has a mechanism for this built in to the server. — ChrisLively
– ChrisLively, Commented Jan 6, 2009 at 23:14
I was about to ask this when I found this answer through Google. — Igor Zevaka
– Igor Zevaka, Commented Jun 5, 2010 at 13:35
An alternative for small websites is to use just one HTML page (with a single header and footer) and toggle sections with Javascript or just use anchors (e.g. in the header) to navigate inside the page. — collimarco
– collimarco, Commented Mar 5, 2017 at 18:53
i think the answer here is fairly good. stackoverflow.com/questions/18712338/… — Joe
– Joe, Commented Sep 13, 2017 at 17:48

Brig Lamoreaux · Accepted Answer · 2009-01-06 23:16:15Z

37

There are three ways to do what you want

Server Script

This includes something like php, asp, jsp.... But you said no to that

Server Side Includes

Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.

Client Side Include

This solutions has you calling back to the server after page has already been loaded on the client.

answered Jan 6, 2009 at 23:16

Brig Lamoreaux

Sign up to request clarification or add additional context in comments.

Comments

Hariprasad Vijayan · Accepted Answer · 2021-01-31 19:25:40Z

37

JQuery load() function can use for including common header and footer. Code should be like

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

You can find demo here

edited Jan 31, 2021 at 19:25

answered Dec 18, 2013 at 8:51

Hariprasad Vijayan

7468 silver badges16 bronze badges

1 Comment

HPWD Over a year ago

2014 and I still think this is a viable answer. The linked article provides a nice and simple demo, too.

moffeltje · Accepted Answer · 2016-12-07 11:21:32Z

Since HTML does not have an "include" directive, I can think only of three workarounds

Frames
Javascript
CSS

A little comment on each of the methods.

Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.

Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:

Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
<script type="text/javascript" src="header.js"> which has something like this in it: document.write('My header goes here');

Doing it via CSS would be really an abuse. CSS has the content property which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.

BSMP · Accepted Answer · 2018-12-07 19:41:14Z

11

The simplest way to do that is using plain HTML.

You can use one of these ways:

<embed type="text/html" src="header.html">

or:

<object name="foo" type="text/html" data="header.html"></object>

edited Dec 7, 2018 at 19:41

BSMP

4,9308 gold badges36 silver badges46 bronze badges

answered Dec 7, 2018 at 19:01

Jose

1591 silver badge4 bronze badges

2 Comments

Marc de la Barrera i Bardalet Over a year ago

Why isn't it the best answer? It seems to be the simplest no? I'm having the same problem

Chad Cloman Over a year ago

@MarcdelaBarreraiBardalet because these methods embed the HTML file in its own container, similar to an iframe. They don't insert the HTML as-is.

DanSingerman · Accepted Answer · 2009-01-06 23:07:01Z

You can do it with javascript, and I don't think it needs to be that fancy.

If you have a header.js file and a footer.js.

Then the contents of header.js could be something like

document.write("<div class='header'>header content</div> etc...")

Remember to escape any nested quote characters in the string you are writing. You could then call that from your static templates with

<script type="text/javascript" src="header.js"></script>

and similarly for the footer.js.

Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.

Shubham Badal · Accepted Answer · 2014-07-30 17:41:16Z

6

you can do this easily using jquery. no need of php for such a simple task. just include this once in your webpage.

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

now use data-load on any element to call its contents from external html file you just have to add line to your html code where you want the content to be placed.

example

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

answered Jul 30, 2014 at 17:41

Shubham Badal

1,18314 silver badges35 bronze badges

3 Comments

HPWD Over a year ago

I like this method, too. Do you know how SEO this would be (not a big issue, just curious)?

Shubham Badal Over a year ago

i am not sure but i think yes, it will affect seo. robots will read source of html page but as you can see when you view-source you will not find html content loaded. the html is embedded only when client executed javascript. simple parsing through html will not find sidepanel and footer etc content

mplungjan Over a year ago

For SEO you could do <a href="sidepanel.html" class="nav">Sidepanel</a> and replace the outerHTML with the panel

juanpazos · Accepted Answer · 2016-02-04 09:44:01Z

5

The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.

edited Feb 4, 2016 at 9:44

answered Apr 19, 2013 at 22:34

juanpazos

1571 gold badge2 silver badges10 bronze badges

Comments

allesklar · Accepted Answer · 2009-01-07 08:09:28Z

3

The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.

answered Jan 7, 2009 at 8:09

allesklar

9,6406 gold badges39 silver badges53 bronze badges

Comments

Joe Phillips · Accepted Answer · 2009-01-06 22:53:17Z

2

HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.

Your other option is to use AJAX I think.

answered Jan 6, 2009 at 22:53

Joe Phillips

51.6k33 gold badges109 silver badges168 bronze badges

Comments

Antfish · Accepted Answer · 2016-07-06 12:34:49Z

You could use a task runner such as gulp or grunt.

There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

an example of a gulp task:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

Malekai · Accepted Answer · 2019-05-20 03:18:37Z

You can try loading them via the client-side, like this:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

NOTE: the content will load from top to bottom and replace the content of the container you load it into.

Gareth · Accepted Answer · 2009-01-06 22:52:57Z

1

No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.

answered Jan 6, 2009 at 22:52

Gareth

139k36 gold badges152 silver badges158 bronze badges

Comments

Keltia · Accepted Answer · 2009-01-06 22:53:42Z

1

Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.

answered Jan 6, 2009 at 22:53

Keltia

14.8k3 gold badges32 silver badges30 bronze badges

Comments

Chuck · Accepted Answer · 2009-01-06 23:15:59Z

0

The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.

answered Jan 6, 2009 at 23:15

Chuck

238k31 gold badges308 silver badges393 bronze badges

Collectives™ on Stack Overflow

Common Header / Footer with static HTML

14 Answers 14

Server Script

Server Side Includes

Client Side Include

Comments

1 Comment

Comments

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

Server Script

Server Side Includes

Client Side Include

Comments

1 Comment

Comments

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related