Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Proper Structuring for HTML [closed]

Tags:

html

css

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.

like image 800
ocinisme Avatar asked Jul 31 '12 11:07

ocinisme


People also ask

What is the correct HTML structure?

Within a web page, some HTML tags are required for the page to be displayed correctly. These tags are <html> , <head> , <title> and <body> . The <html> tags must begin and end the document and the <head> tags must appear before the <body> tags. Also, the <title> tags must be within the <head> tags.

How do you close a HTML tag?

An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags always proceed the element with a /).

Which HTML tags don't need to be closed?

There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.

Which sequence of HTML tags is correct a HTML >< head >< title ></ title ></ head >< body ></ body ></ HTML B HTML >< head >< title >< body ></ title ></ head ></?

All the web pages will have at least the base elements: HTML, head, title, and body. Hence, Option 1 is correct. The HTML <title> tag is used for indicating the title of the HTML document.


2 Answers

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.

like image 185
Anders Arpi Avatar answered Oct 19 '22 09:10

Anders Arpi


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.

like image 43
Paul Aldred-Bann Avatar answered Oct 19 '22 10:10

Paul Aldred-Bann