Building a Logical Document Structure
The logical document structure has nothing to do with fonts, colours and images or even the position of things on the page. A logical structure is one where the document is divided into a number of sections. Each has their own headers, paragraphs, lists and images so that information flows logically from one section to the next.
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. And do that with Cascading Style Sheets so that if you remove the style sheet the logical document structure remains.
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 body, headers, paragraphs, lists and divs etc.
Inline Elements. These are the nested containers and sit inside the block level elements: images, spans and the anchor tag.
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.
Each header begins on a new line in the document.
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. The primary navigation up at the top is a list as are the secondary navigation lists on the right. All styled using CSS.
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: header, sidebar, container and footer. A division can have sub divisions each with their own stylesheet. This makes it very easy to change the look of one part of the page without affecting the logical structure.
And because divs are block level elements they will position themselves below the preceding element.
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 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 make it look pretty using Cascading Style Sheets.