Resume

Poetry

Design Tip
of the Week

Last Week's
Design Tip

Email

Web User Survey

Home

When items on the page are close together, they appear to have a "relationship" - they belong together. When items are separated physically, they do not have a "relationship". It is important to pay attention to placement of items on the page to make sure that items are not unnecessarily "orphaned" or that they do not form an inappropriate relationship with other items.

For example, make sure that your heads and subheads are close to the copy with which they belong. It is easy to accidentally make them equidistant to copy on either side of them, or even closer to the copy above them than the copy to which they belong.

Make sure that captions are close to the pictures which they describe, not a double space below it. Be consciencious of the spacial elements on your page and make sure that the items you have grouped together, belong together.

Paragraph versus Line Breaks
You can prevent a large space between items that belong together by using a line break or "soft return" instead of a paragraph break.

The Paragraph code in HTML is

, it automatically creates an extra space between lines of text or between text and graphics. In web authoring software you create a Paragraph by hitting the return or enter key.

The Line Break code in HTML is
, it will break the line where you enter it, but it does not leave an extra line of white space. In web authoring software you create a Line Break by hitting shift return or shift enter.

Formatting
Keep in mind that certain formatting is paragraph specific. This means that formatting will be applied to the entire paragraph even if you have selected only one character. Paragraph specific formats include: headings, default text, indents, block quotes and alignments.

Lines separated by a line break are considered to be one paragraph by browser software. Therefore it follows, that if you apply a heading format and then use a line break to keep it close to the following copy, that the copy will then have the heading format. To avoid this, simply use individual formatting by applying a larger font size and bolding the header instead of using the heading format. You could also make your headers a different color.

Source: The Non-Designer's Web Book by Robin Williams and John Tollett, Peachpit Press, Berkley California