Learning HTML - Text Controlling Tags Part 1

In this section, we shall look at

• Paragraph tag <P>
• Division tag <DIV>
• Center tag <CENTER>
• Blockquote tag <BLOCKQUOTE>
• Address tag <ADDRESS>
• Preformatted tag <PRE>

The Paragraph Tag

Blocks of text in HTML should be placed in paragraphs. This not only helps you in formatting the page logically but also assists in maintenance. Browsers typically insert a blank line before and after a paragraph of text. You can use <BR> tag inside the paragraph tags to insert a line break.

The paragraph tag is <P>. You should always end the paragraph with </P> even though it is not required.

The important Attribute of this tag is ALIGN which can take one of the four values; "LEFT", "RIGHT", "CENTER", "JUSTIFY". LEFT is the default value.

<P> is aligned to the left.</P>

<P align="right"> is aligned to the right.</P>

<P align="center"> is centrally aligned.</P>

When "JUSTIFY" value is used, the browser inserts blank spaces between words so that the text is justified equally at both the ends quite like this very paragraph (note the difference between this para and the others). This is preferred by people who like to have symmetry in their document layout. You should be able to make out the difference between the justifications of this paragraph and the ones above and below it. Yes?

<DIV> tag

Enclosing text and other HTML elements inside <DIV> and </DIV> tags divides the document into sections. It's especially useful with Cascading Style Sheets usage, when a whole section can adopt a certain formatting style. You can use the ALIGN attribute of this tag to align the text surrounded by these tags.

<CENTER> tag

According to W3C (the World Wide Web Consortium) the <CENTER> tag is now deprecated and is to be replaced by <DIV align="center"> but since its use has been prevalent, it does not seem to be superceded so soon.

<CENTER>Centrally aligns this text</CENTER>

The Blockquote tag

If you wish to introduce some large body of text and make it stand out from the rest, you should put it between <BLOCKQUOTE> - </BLOCKQUOTE>. The enclosed text will be indented from the left and right margins and also adds space at the top and bottom quite like this paragraph. Many web designers have been guilty in the past of placing various HTML elements inside <BLOCKQUOTE> tags to take advantage of the indenting. This is not a good practice and should be avoided. A better choice would be to use Style Sheets.

Address tag

The <Address> - </Address> tag is a logical formatting element. You should use this to include any addresses. This should NEVER be used for physical layout as it may be rendered differently by the browsers. Text between these tags looks like:

Johnny Bravo,<BR>
Hubba Hubba Street<BR>
Aaron City<BR>

In Internet Explorer and Netscape Communicator, the text inside <Address> tag is italicized.

Preformatted text tag

Text within <PRE> - </PRE> is rendered along with any 
spaces, tabs, returns. So there is no need of using the <BR> 
tag and I can introduce tabs		quite like this or 
spaces like      this. Text within these tags is displayed 
as monospace (Courier Font in Windows). A monospace font 
is one in which the width of each character whether its 
the wide 'm' or the thin 'i' is equal.

Now play with the code:
To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.