Proper Structuring for HTML [closed]

Question

I have been reading around about best practices when doing developing a website. But I am still curious because the answers are found are mostly various, depend on a project's scope and many other considerations.

But just to cut it short, basically I wanted to ask about a proper formatting for 3 main elements in a website.

1. Header
2. Main/Body
3. Footer

How is the structure should be build? Are those three should be wrapped in a container like this:

<div class="wrap">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

And how is the styling should be done? I saw some people advised to use position:absolute for the CSS, while some others use relative instead. Sorry for the very basic question, but I am really confused about this at this current point of my learning.

Answer 1

The only reason a pseudo-standard like having a lot of wrappers exist is because it has proven useful when creating layouts. Basically it's all there for a reason. If you can design the page you want without having a <div id="mainwrapper"> around it - then you don't need a main wrapper like that. :)

My tip would be to simply start creating a site and try to get it to look like you want using simple elements and CSS styling. If you can't make it work - for example you don't understand how to create a flowing column layout - then just search the web for something like "HTML flow column layout" and go from there.

Edit: "Making it work" usually means not having to result to using tables, a lot of magic numbers and loads of elements to create something simple.

A rule of thumb: Don't cut and paste code/solutions if you don't understand 1) what they do 2) why you need them. It's better to try building it yourself and then, as you work with it, realise why some patterns (clearfix, avoiding tables, floating layouts and so on) are so common. It might not save you time right now, but it definitely will make you a better developer in the long run.

Answer 2

HTML layouts are very subjective and it depends on your requirements / preference as a developer. The two main layouts are static (using absolute positioning etc) and floating (using floated divs for a liquid layout).

This is a good article that covers these principles in more depth

Basically, you should be using block level elements i.e. div tags to structure your page. In cases where you have tabular data tables are perfectly fine, but don't use them for your layout as they're slow to render and can make things difficult when you need full control on your page layout.

Best practice for styling suggests that you use CSS to position and style your elements via class attributes and not inline. This will then allow you to minify your CSS scripts and reduce the overhead of your page. CSS has evolved very well, and there are a lot of selectors available to you to reduce the number of classes in your markup. See CSS selectors at W3C for more information on them.