Website Design Skeleton

You don’t want to re-invent the wheel every new website you begin coding on. Instead maximize your productivity with a template or skeleton if you will of a basic site design.

Your implementation may vary. I’ve tried to keep mine terse for the utmost configuration.

We’ll start with a basic header:


  <title>Change Me Later</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="/style.css" rel="stylesheet" type="text/css">

I’ve choose HTML 4.01 strict for various reasons. You will need to remember to fill in your title.

As you may have noticed, I’ve included a style sheet in this header, so let’s go over that.


* {margin:0;padding:0;}

Not much to see here, we reset our margin and padding to 0 to eliminate cross browser quirks and general madness while designing. Some people prefer more in their default CSS.

Let’s continue on to the main page.


<!-- Do stuff here -->

Not much to see nor explain. Now onwards to our footer.



And there you have your skeleton. It’s up to you to add the muscle.

A few ideas:

  • Include your name, version and other information in comments in the header and stylesheet.
  • Include your statistics code in the footer.
  • Include any javascript you might use.
  • Instead write a php library to generate your header/footer bassed on doctype/chartype.
  • Set default text styles, colors etc to your liking in your CSS

One Reply to “Website Design Skeleton”

  1. One other thing to consider that I always use and like in a seperate file is menu.php. You’re always going to want a menubar in some respect and it’s nice to have the piece external as well.

Leave a Reply

Your email address will not be published. Required fields are marked *