Guide to HTML – HTML Document Design

Guide to HTML – HTML Document Design cover image
  1. Home
  2. HTML
  3. Guide to HTML – HTML Document Design

Till now I have discussed many tags (and there are many many more to follow), but I feel a discussion on HTML document design is appropriate at this stage.

Before you embark on an HTML project you have to decide which kind of document structure to follow. The layout of an HTML document can be based on either a Logical Structure or a Design Structure. So what is the difference between the two?

Logical Structure

A logically structure document consists of different sections. The image below shows the format of a typical logical document structure.

Logical Document Structure

It is evident that this document consists of various sections such as the main heading, the sub headings, the paragraphs, the horizontal rules, list, table, address and footer. These are blocks of objects placed in a logical manner. The HTML tags which define such blocks, are called BLOCK ELEMENT TAGS. These tags always start on a new line and any text following their end tags will be placed on the next new line.

Design Structure

Design Structure might not follow a fixed logical format. It takes advantage of the tricks in HTML, using tags for purposes they were not intended for. Thus, vertical columns of text can be created using tables (<TABLE> tag, you’ll learn this in Advanced HTML tutorials) and indentation is achieved with <BLOCKQUOTE> or even the <DL> element. Such practices, esp. the one involving TABLES have been prevalent, and are used by many web developers.
Cascading Style Sheets (CSS) were developed to assist designers in laying out HTML elements on a page. However, at the time of writing, browsers do not support CSS well enough and there are many browser compatible issues to be ironed out.

HTML