Good basic site structure

Since more and more websites are complaint with standards (W3C and other), I think it might be usefull to have a basic compliant site structure to start from. First I want to make clear, this is one of the possibilities, it’s not the only one.

I’m not going to discuss the HTML head, only what is in the <body> container.

First of all, create a wrapper div, like this:

<div id="wrapper">
</div>

This will hold everything in your page. It will also be usefull if you want to center your layout, or limit the width.

Secondly, create a <h1> for the header, like this:

<h1 id="header"></h1>

You can give this header a background image, or just plain text. This will probably contain your site name. After the <h1> you could put a <h2> with the slogan or so, but here I’ll keep it at the <h1> only. If you do add more tags, I suggest putting it all in another <div>

Thirdly, create a menu div. If your site hasn’t got a menu you can leave it our, but I doubt that. Create it like this:

<div id="menu">
</div>

After the menu, create a content div, like this:

<div id="content">
</div>

And finally a footer div like this:

<div id="footer">
</div>

Your complete code should look something like this:

<div id="wrapper">
    <h1 id="header"></h1>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

This will be all you need for your basic site structure. If you put this in a separate file, you can just copy and rename it, next time you start a new page.

No Responses to “Good basic site structure”.

Comments are closed.