Chapter 2 - Tags

                                     

[Chapter 1] << [CONTENTS] >> [Chapter 3]

This lesson introduces a number of basic tags that allow an HTML page to be formatted - much in the same way that word processors format documents. The following topics are covered:

• Character Formatting
• Paragraphs
• Paragraph Alignment
• Forced Line Breaks
• Spaces
• Horizontal Rules

Character Formatting:

The Bold <B></B> element specifies that the enclosed text should be displayed in boldface.
The Underlined <U></U> element specifies that the enclosed text should be displayed underlined.
The Italic <I></I> element specifies that the enclosed text should be italicized.
Below are these HTML tags beside samples of their respective browser displays:

HTML Code		Browser Display
This text is <B>bold!</B>		This text is bold!
This text is <I>italicized.</I>		This text is italicized.
This text is <U>underlined</U>.		This text is underlined.

Paragraphs

In HTML you indicate paragraphs with the <P> and </P> elements. Without these elements the document becomes one long paragraph. Likewise, browsers ignore any indentations or blank lines in the HTML code.
Thus the examples below, although coded differently, are all displayed the same way:

HTML Code		Browser Display
<P> This is a very short paragraph to illustrate my point.</P> <P>And this is the second paragraph. </P>		This is a very short paragraph to illustrate my point. And this is the second paragraph.
<P> Although this is written differently with lots of carriage returns it still only displays the paragraphs when you put in the Paragraph Tag.</P> <P> Like so.</P>		Although this is written differently with lots of carriage returns it still only displays the paragraphs when you put in the Paragraph Tag. Like so.

NOTE: The </P> closing tag may be omitted. This is because browsers understand that when they encounter a <P> tag, it means that the previous paragraph has ended.
To preserve readability when composing HTML files, separate paragraphs with blank lines. As mentioned above, browsers will ignore blank spaces inserted into source code.

Paragraph Alignment

Paragraph alignment can be manipulated by including either the RIGHT, LEFT, or CENTER (note the Americanized spelling) attributes within the <P> tag as shown below:

HTML Code		Browser Display
<P ALIGN=left> This paragraph is left aligned. </P>		This paragraph is left aligned.
<P ALIGN=CENTER> This is a centered paragraph. </P>		This is a centered paragraph.
<P ALIGN=RIGHT> This paragraph is right aligned. </P>		This paragraph is right aligned.

Forced Line Breaks

The line break tag <BR> can be used to control how browsers render text. When an HTML document is viewed the text normally does a word-wrap at the end of a line. If a text break is desired before the end of a line, use the <BR> tag to force a line break without any extra space between lines. This element has no closing tag.

HTML Code		Browser Display
CN Tower<BR> 301 Front Street West<BR> Penthouse<BR> Toronto, Ontario M5V 2T6<BR> Canada<BR>		CN Tower 301 Front Street West Penthouse Toronto, Ontario M5V 2T6 Canada

Using the <P> tag instead of the <BR> tag for short lines of text, such as the above example, would have resulted in unwanted additional white space.

Horizontal Rules

The horizontal rule <HR> tag produces a horizontal line the width of the browser window. Horizontal rules are useful for separating major sections of a document. The length of a rule can be varied by using the "WIDTH=" and "SIZE=" attributes.

HTML Code		Browser Display
Horizontal Rules rule!<HR SIZE=3 WIDTH=80%>		Horizontal Rules rule!

There are two other attributes that can be used with the <HR> tag. They are:

ALIGN=	RIGHT, LEFT, or CENTER
NOSHADE	Causes the rule to appear solid black.

Share on Google Plus