Font Styles

The style tags provide a straightforward way to control the font. These tags fall into two categories: physical styles and logical styles. The style tags provide only crude control over your text; for more sophisticated techniques, see the Font Control section.

Physical Styles

Physical style tags allow you to specify a particular font change. For example, to make text bold, you can mark it off with the <b> tag: <b>bold text</b>.

• <b>: makes text bold.
• <i>: makes text italic.
• <small>: makes text smaller.
• <big>: makes text bigger.
• <tt>: makes text teletype (turns it into a monospace font, such as you might get from an old-model typewriter).

Inline Style Tags

Unlike the <p>aragraph tag and <h>eader tags, the style tags listed above don't mark off a "block" of text -- they perform their work without adding extra line breaks:

<p>
  1. This is a paragraph with a section of 
  <b>bold text</b> inside of it.
</p>

<b>
  2. This is a section of bold text with 
  <p>a paragraph</p> inside of it.
</b>

The first sentence results in one "block" with a couple of bold words inside of it. In the second sentence, the <p> tags break the text up into multiple blocks.

Logical Styles

At first glance, logical styles seem similar to physical styles:

• <strong>: makes text strong.
• <em>: makes text emphasized.
• <cite>: marks off citations.
• <code>: marks off computer code fragments and commands.

You might have noticed that the <strong< tag looks an awful lot like the <b> tag, the <em> tag looks a lot like the <i> tag, and so on. However, there is a subtle difference between the physical styles (such as <b> and <i>) and the logical styles (such as <strong> and <em>).

The <i> tag literally means, "italicize this text." The <em> tag literally means, "emphasize this text." What does "emphasized text" mean, exactly?

Most browsers interpret it to mean, "italicize this text." So in practice, <em> usually leads to the same result as <i>. However, there are a couple of points to consider:

• When a browser interprets <em> as "italics", that's just a convention. A browser doesn't have to interpret the tag that way... "italics" means italics, but "emphasis" could mean anything, really.

• There is a technique that can change the behavior of tags across your entire website. (The technique involves using cascading style sheets, which we'll discuss in detail later.) You can use stylesheets to define all <em> tags as, say, "bold and red," or all <strong> tags as "italic, green, and large."

In theory, you can muck with the definitions of the physical style tags, but this is bad form. Bold should be bold; changing the definition of the <b> tag doesn't make a lot of sense, if you think about it.