An HTML Footer Include Made Easy

Date August 3, 2010

Someone asked me a question about HTML includes recently.

I want to make changes to the footer on one page and make it change across all of my pages. How do I do this?

Well, it’s pretty simple. Here’s a quick tutorial.

  1. Create a new HTML page with empty code. If your editor inserts code automatically, delete it.
  2. Go to your original HTML page where you have your existing footer. Cut the code (Edit->Cut). Paste (Edit->Paste) it into the new HTML file you created. Save it as footer.html into the root directory (wherever your index.html is located.
  3. Now we want to insert the code that includes the newly created footer on the page. This is called an HTML Include. Go back to your original HTML page. In place of where you originally had the footer code, you’re going to insert this code:
    <!–#include file=”footer.html”–>
  4. Save your file.
  5. Upload both files to your server and everything should work perfectly.

For all other existing pages of your website, you’ll need to go and delete its current footer and add in the HTML Include footer code. If you’re using a program like Dreamweaver or Microsoft Visual Web Developer you can do a Find and Replace of the entire solution to make it quick and easy.

You can also do the same thing for your header, a sidebar or anything else that repeats throughout your site.

Any questions?

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>