Text Formatting

In the section on the BODY, we learned how to apply text colors page-wide. In this chapter, we'll learn the main commands in HTML which all you to change the style of text. These changes are "character-level," meaning you can make changes to just one character at a time--or you can change as many characters as you wish.

The tags used to format text in HTML include:

  • <b>
  • <strong>
  • <i>
  • <em>
  • <big>
  • <small>
  • <font>

<b> or <strong>? <i> or <em>?

One fact about HTML that confuses some people is that there are two tags each for bold and italic text. There is a different between them.

BOLD

If you wish to create bold text, you can use either the <b> or the <strong> tags. The difference is one of emphasis. <b> will just make the text appear bold. The <strong> tag, however, also adds special emphasis to the text. Search engines, for example, will see words in the <strong> tags as being more important. Additionally, using the <strong> tag may cause some text-reading programs (for blind people) put more spoken emphasis on the words.

If you don't want any special emphasis--just bold text--then use the <b> tag. If you do want special importance placed on bold text, use the <strong> tag.

ITALIC

The same is true for italics. If you want just plain, italic-style text, use the <i> tag. If you want special emphasis on your italics, then use <em> instead.

If you don't care about what emphasis is placed on the text, then either <b> or <strong>, or <i> or <em> will work fine.

Go ahead, try all four tags out in the Live Exercise below.

 

Size Matters

The next tags to learn are <big> and <small>. These (obviously) affect the size of the text. They are used in an additive way--that is, the more you use them, the greater the effect. For example:

HTML Rendered Page
<small><small>Smaller Text</small></small> Smaller Text
<small>Small Text</small> Small Text
Normal Text Normal Text
<big>Big Text</big> Big Text
<big><big>Bigger Text</big></big> Bigger Text

The more you repeat the tags, the bigger the text will become. Each time you add an ending tag, the size will decrease. Go ahead and try in the Live Exrcise below.

A Deprecated FONT

Finally, we have the <font> tag. This is the most useful tag, as it can assign size, color, and font face, something no other HTML command can do. However, the <font> tag has also become "deprecated," which means that the tag is either no longer considered useful, or there are better ways to do the same thing. In the case of the <font> tag, the higher-level language called CSS has replaced it. If you want to style text, the best way is by using CSS.

A good example of a deprecated tag is the <blink> tag. The command was very simple: text would blink on… and off… and on… and off… and so forth and so on. When the tag first came out in the 1990's, many people thought it was a cute little effect. That did not last very long. Very quickly, everyone grew to hate the <blink> tag. Internet Explorer never used it, nor did many other browsers. Today, although some browsers may still recognize and render the <blink> tag, most do not. It is a deprecated tag.

So, why am I teaching you the <font> tag, which is also deprecated? Partly so you know what it is (many people still use it), and partly for practice. Also, before you learn CSS, it is the only way you can change color or fonts in your text.

The Font Tag

The <font> tag, by itself, does nothing. If you just <font>use the tag like this</font>, then nothing will change. The <font> tag requires attributes to do anything. The attributes and possible values are:

Attribute Values Example
color= "colorname" <font color="darkred">text</font>
size= "+n" / "-n" <font size="+2">text</font>
face= "fontname" <font face="Verdana">text</font>

And, of course, <font color="green" size="+1" face="Verdana">you can use all of the attributes together</font> at once.

Go ahead, try the command out in the Live Exercise below:



HTML tags you should know by now:
  • <html>
  • <head>
  • <title>
  • <body>
  • <b>
  • <strong>
  • <i>
  • <em>
  • <big>
  • <small>
  • <font>
 



 



Video Review