Learn how to structure a page correctly.

In today’s field of web development you will find plenty of xHTML developers that output some pretty nifty code. Personally i take great pride in being able to develop code that when opened speaks for itself. Also creating clean code can be the difference of your website being accessible by multiple devices easier. So today i wanted to give you a few hints and tips as to achieving a clean back-end structure that will make your task easier,and bear other benefits as well.

First element that i consider important is the header. This is the one element i consider requires an id rather than a class. Then inside the header (usually) you will find the menu div. This div also will usually bear an id, i guess if you have more than one navigation element you might consider using a class, then you can have the same menu on the bottom of the page as well as the top. One thing to keep in mind, if you have a navigational element in the top of the page that is considered a menu, compared to a navigational element on the side of the page which is considered navigation. So on the side you can have a div with an id of nav or navigation.

Now we get to the actual structural elements, back in the day i guess those were usually simple 2 column layouts that were constructed of two divs, one sideNav and maybe a mainCol. Now a days you have more complex layouts, especially with all the nice frameworks you may be using. So the columns of a website will look more like col30, or col300. Col30 would stand for a column at 30% either a fluid 30% or 30% of the overall size which can be 960px. Using col300 would be more specific to an actual size, so a column of width 300px.

And then of course the footer would be the last generic element. All combined here is a sample structure for a website:

A couple things you may not understand are, first i like to use

But until them i like to know where a div ends, it can help you so much when you have big layouts that get complicated. I use the class clear for clear:both it clears my floats.
Secondly i use left for float:left.

Related posts:

1. Mock Design Slice HTML CSS JavaScript – Modern Approach to Creating Websites
2. Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)
3. Simple Fast Easy make your website iPhone ready!
4. Top 10 HTML Snippets
5. Fixing the IE7 z-index issue (internet explorer 7 z-index)

Did you absolutely LOVE this article... share it!