Need Help with your Website? Email or call us on 01268 442171.

Building a Logical Document Structure

The logical document structure has nothing to do with fonts, colors and images. A logical structure is one where a document begins with a title followed up with a series of paragraphs, lists, images and subheaders. If the document is a web page then there will probably be some navigation links as well.

So get rid of all those tables, JavaScript menus, maps and layers. All you need is a set of headers, lists and paragraphs, laid out in the same order you would expect to read them on a printed page.

Build a logical structure first and make it look pretty afterwards. That way you can go from this:

to the document you are reading without changing a single thing on the page. And it's all done with Cascading Style Sheets, nothing on the page has been changed. If you remove the style sheet the logical document structure remains. This the secret to organizing your content.

Here's how it works.

Build the Nest

Think of the document as a series of containers stacked up ready to be used. The container at the top of the stack is the one the browser puts on the page first. It then makes its way down the stack filling in the web page with the contents of the containers. Every now and then is comes across smaller containers tucked inside larger containers. When this occurs, it unpacks the containers before moving on down the stack.

The technical names for these containers are 'elements'. There are two types of element:

Block-level Elements. The building blocks from which a document is built. The primary block-level elements are the body, headers, paragraphs, lists, divs and tables. Block-level elements always begin on a new line.
Inline Elements. These are the nested containers and sit inside the block level elements. The most commonly used inline elements are images, spans and the anchor tag. As their name suggest, inline elements follow on from the preceding character, they do not start a new line.

The body of the document is a bit of a special case because it wraps round all the other containers but the browser treats it just like all the others.

That's the theory, now the explanations.

Block Level Elements

The Body

The first thing the browser wants to do is set up the page. It wants to know the default font, background colour and where to put the very first pixel of information. This is all defined in the body and is the top level element on the page. The body information is normally contained in a series of styles that define the background colours, fonts, padding, margins and so on.

And because styles are inherited, what you define in the body will be inherited by all subsequent elements (which makes life a lot easier).

Headers

We next need to introduce the document using a header. The top level header is H1 and is usually only used once in a document. As we write our document we can use more headers (H2, H3, etc) to break up the content if required. There are 3 levels of header on this page:

'Building a Logical Document Structure' is the H1

'Block Level Elements' is an H2.

'Headers, Lists, Paragraphs and DIVs' are all H3.

Lists

As well as their traditional role in displaying a series of bullet points, lists are often used for navigation links. They are block level elements with each list item starting on a new line. You can have different type of list on a single page - all you need to do is introduce different style sheets. The article list up on the right is built from a single list that follows on from the main header. There is a another list in the section entitled 'Building the Nest', it's the same HTML but just uses a different stylesheet.

Paragraphs

The rest of the page is filled with paragraphs. Each paragraph begins on a new line and fills the available horizontal space. Paragraphs usually contain text or images and form the major part of any document.

DIVs

A div(ision) is a block within a page that you want to highlight.

This page has 4 main divisions: logo, navigation, main and footer (you can identify them by the thin green border). Using divisions allows you to style groups of elements in this case the border and a bit of padding.

I've also used a container div that goes round the outside. This one centers the content on the page, adds the border and has the green background image up on the right.

The rounded corners required a bit of jiggery-pokery but the whole thing was achieved using some nested DIVs and a bit of CSS.

Tables

Table are best used for displaying tabular data. Either implicit or explicit, table columns have headers and table rows are numbered. Try not to use tables for positioning block level-elements, cascading style sheets do a far better job of this.

Inline Elements

Inline elements sit within block level elements and only take up the space they need. This means for example a header could be the anchor text for a link. The header is the block level element and the anchor tag is the inline element and surrounds the text within the header tags.

If you have a series of thumbnail images, you can line them all up in a single paragraph, there doesn't need to be any text, just the images. The images will appear next to each other because inline elements do not begin on a new line. If you want each image on a new line, put each one in a separate paragraph. It's that simple.

Summary

A document begins with a header, then a list of contents (navigation), paragraphs and sub headers. Groups of elements can be collected together in divs.

Each block-level element can contain inline elements such as links and images.

Once you have built the logical structure you can add the content and make it look pretty using Cascading Style Sheets.

Need Help with your Website? Email or call us on 01268 442171.

top