Text Formatting

Formatting text involves many different things, so there are many different tags. None of the tags in HTML are case sensitive so you should not worry whether the tag is in capital letters or not. Below is a list of tags, their syntax, and description:

<P>

This tag is for paragraph. Whenever you are starting a new paragraph, start the paragraph with this tag. It will leave one line blank so as to indicate that the following is a new paragraph. <P> tag does not require a </P> tag.

<br>

This tag is used whenever you want to leave a line blank. Wait a minute, doesn't the <P> tag do just that? Yes and No. Yes, it leaves a blank line. Now suppose you want to leave two lines blank. The logical thing to do would be to type <P> twice or <br> twice or each exactly once. <P><br> or <br><P> will give you two blank lines, <br><br> would give you two blank lines, but <P><P> will give you only one line. The reason being that two paragraphs do not need to have more than a blank line in between them. So, now you can rest assured that <br> has its purpose and use. There is no </br> tag so it is not used.

<hr>

This tag is used to draw a horizontal line like the one below the heading of this page. It also does not require an ending tag </hr>.

<center>

This tag does exactly what is says, it centers. It centers text, images, tables, frames, lists and a lot more. The syntax is as follows:

<center> This text shall be centered </center>

Can I use <font> tag with it? Yes definitely! Now observe:

<font color="#123456" size=+2><center><b> Donkey </b></center></font>

is equivalent to

<center><b><font color="#123456" size=+2> Donkey </font></b></center>

which is also the same as

<b><center><font color="#123456"><font size=+2> Donkey </font></font></center></b>

As you can see there are many ways of doing the same thing. You can also get the same result with a different combination. Try it! Remember, web design is all about creativity. The tools are easy and user friendly so that anyone can use them.The only thing that will make your web page stand out is creativity.

<div>

This is another important tag. You will come across this tag in the a few other lessons. For now let's see how we can use this with text. This tag lets you align to the right and  left. Here is the syntax:

<div align="right">This text will appear on the right </div>

<div align="left"> This text will appear on the left </div>

Below is what you will see on the page:

 

This text will appear on the right

This text will appear on the left

<div> is rarely used for centering because it is more convenient to use <center>. You can use the align attribute inside <body>, <p> and many more which we will cover in the later lessons. The syntax is the same for all of them.

<p align="right">This paragraph should be on the right </p>

<p align="left"> This is the default </p>

You might be wondering why I used </p>. It is not used, but when you used align attribute with <p>, you have to specify where the <p> (the paragraph) ends.

Font tags:

All of the following tags have the same syntax are all are involved in changing fonts. The following is the syntax. I did not include a description because it is self evident.

<b> bold </b>

<i> Italics </i>

<tt> Typewriter Text </tt>

<blink> blinking text </blink>

<sup> superscript </sup>

<sub> subscript </subscript>

<strike> strikethrough </strike>

<nobr> nonbreaking </nobr>

<u> underline </u>

Note: <blink> tag does not work in Internet Explorer. It might not work on the newer versions of netscape.

Reference Table

You do not have to memorize all these tags. I myself do not remember all these tags. I however constantly have to go back and look at the tags and their description. I suggest that you do the same. To make it easy to go back and refer, I have included this reference table.

 

Item
Syntax
What it does
<b>
<b> bold </b>
make the text bold
<i>
<i> italics </i>
italicizes the text within
<TT>
<tt> Typewriter Text </tt>
Typewriter Text
<blink>
<blink> blinking text </blink>
blinking text
<sup>
<sup> superscript </sup>
superscript
<sub>
<sub> subscript </sub>
subscript
<strike>
<strike> strikethrough </strike>
strikethrough
<nobr>
<nobr> nonbreaking </nobr>
nonbreaking
<u>
<u> underline </u>
underline
<p>
<p> or <p align="right"> </p>
start a paragraph
<br>
<br>
leaves one line blank
<hr>
<hr>
make a horzontal line
<center>
<center></center>
center the text
<align>
<align="left"> </align>
aligns the text according to the attribute