Web Design in a Nutshell

Working with HTML Text

Formatting web page text is unlike formatting text for print. In print, you have the luxury of knowing that text will stay where you put it. Web text, on the other hand, is more fluid. Many aspects of presentation are determined when the document flows into each user’s browser window.

A good place to begin formatting a web document is to establish the general structure of the document by adding HTML tags that create paragraphs and heading levels in the raw text.

Paragraphs and Line Breaks

Line breaks that occur in the HTML source document are ignored when rendered by a web browser. HTML text wraps text automatically to fill the width of the browser window (or table cell). When the window is resized, the text is reflowed to fill the new width. Lines will break in different places (with fewer words per line) for a user who has the default type size set very large than for a user with small default type.

In HTML, you must deliberately specify where you want a line to break. This is most often done by indicating paragraphs and headings (both are examples of block-level elements), which automatically add line breaks with extra white space above and below. If you want to break a line but not add any extra space, insert a line break with the <br> tag.

The following two figures show the difference between lines broken with a <p> tag and a <br>. In Figure 7.1, the line is broken by a <p> and extra space is introduced. In Figure 7.2, the <br> tag breaks the line but does ...