Paragraph Formatting Tags

Browsers are designed to wrap lines of text to suit the size of the screen and the type of font used, so carriage returns within a document are treated as spaces. This is useful for you since you can insert carriage returns wherever they are convenient for your viewing within an editor without influencing the final page. To force a carriage return, use the Break tag, <br>. The <br> tag creates a single carriage return while the <p> Paragraph tag adds an extra blank line after the carriage return. NOTE: the Break tag is a unary tag, there is no </br> tag. For XHTML compliance, the form is <br>

The Paragraph tag should always be used in pairs to indicate the starting and stopping points of the paragraph. In earlier times, the paragaraph tag was used as a unary tag like the break tag, but modern browsers may render pages incorrectly if the paragraph tag is used this way. The Paragraph tag can also define paragraph alignment. CSS The format for this is:

<p {align="left|center|right|justify"}>paragraph text</p>

This will align the entire paragraph as specified within the tag. This method also works for centering images.

Another way to align paragraphs, list, images or tables is to use the Div tag.

<div align="left|center|right|justify"> data </div>

Be careful when using the align feature of either the P or DIV tags. While IE, Firefox and Safari will align only the top level elements (e.g. tables, lists, paragraphs, etc.) according to the align, Opera will align elements within these top level element according to the alignment specified. This is an annoying quirk that may make your pages less readable to users of Opera. Always check your pages to make sure this is not happening.

Several new block level elements have been introduced with HTML5. These are header, footer, section, article, aside, nav. The elements act like the div tag but give the segments of the page better description of their function. They are supported on all current browsers but not on older browsers such as IE8 which is still used by many people running Windows XP.

The <WBR> tag has been reintroduced in HTML5. It designates the preferred place to break a line of text (not supported IE9).

<pre>text</pre>

Occasionally you will want to drop a block of text into an HTML document that already contains formatting such as simple tables. Using the <pre> tag lets you drop in text which will be reproduced exactly as typed including all spaces and carriage returns. The text is generally displayed in a non-proportional font. (CSS)

This paragraph demonstrates preformatted text.

                        January         February        March
Lunch expenditure       $40             $50             $60
Weight gain (in lbs.)   5               10              15

<blockquote>text block </blockquote>
BLOCKQUOTE indents a paragraph, as in this example from Macbeth:

She should have died hereafter;
There would have been a time for such a word.
To-morrow, and to-morrow, and to-morrow,
Creeps in this petty pace from day to day
To the last syllable of recorded time,
And all our yesterdays have lighted fools
The way to dusty death. Out, out, brief candle!
Life's but a walking shadow, a poor player
That struts and frets his hour upon the stage
And then is heard no more: it is a tale
Told by an idiot, full of sound and fury,
Signifying nothing.


Next Lesson Next Page

HTML Home