The structure of your document, like anything else, needs to make sense. Forget the fonts, the colours, the pictures and graphics; these are only important after you have the basic design of your site ready. You should start with a title, then a series of paragraphs, lists, images and subheaders, and navigation links.

Initially, you need to forget that this page is going to be a website page, and concentrate on it making sense if it were just an ordinary printed page. Once you have built up the necessities, then you can focus on it looking good. If you use Cascading Style Sheets (CSS) you can accomplish this quickly and easily without changing the content of your site.

The first step is to ‘build a nest’ so to speak.

If you think of your document as a stack of containers (elements) that are ready for your use, the top one is the one that the browser puts on the page first, and then the second container (element) goes on second, and so on. If the browser comes across a smaller packed box inside one of the containers (elements), it also unpacks this before moving on to the next container (element).
There are two kinds of elements:

Block-level Elements – essentially the building blocks of your document, the body, headers, paragraphs etc.
Inline Elements – the smaller boxes that sit inside the block-level elements, like images and anchor tag etc

Block-level Elements

The Body
This is the first thing the browser will put onto the page, and as such is contained in the top level element. This is where information like the default colour and font is found, and is normally considered in a series of styles that define the background, fonts, margins etc.

Styles are also inherited, which means what you put in the body will also be inherited by all following elements.

Headers
You use headers to introduce the document. The top level header is H1 and usually only used once in the document. You can use more heads (H2, H3 etc) as you go through the document to break it up as you see fit.

Each header begins a new line in the document.

Lists
These have their traditional role of displaying bullet points, but are also used in navigation sometimes.
As with headers, each new list item starts on a new line.
Paragraphs

These will fill the rest of your page. As in a normal document, they begin on a new line and fill the available space going across your page. They also usually contain the text and images that from the major basis of your document.

DIV’s
A DIV, or division, is a block within a page that you want to emphasise. Using divisions helps you to style particular groups of elements in a document. They will also always position themselves below the proceeding element.

Inline Elements
These sit within the block elements and only take up the space that they need. Therefore, for example, a header could also be the anchor text for a link. In this instance, the header is the block-level element and the anchor tag surrounds the text within the header tags.

If you have a series of thumbnail sized pictures that you want to show side-by-side without any text, this is also possible because this is an inline element and so doesn’t require a new line. If you do, on the other hand, want to put each on a new line, simply put a paragraph between them.

Once you have all this sorted, remember to use Cascading Style Sheets, and you are away.