A tag that is applied to an individual character is known as a character tag. A character tag can be grouped into two categories: physical and logical. (Note: physical styles are associated with physical character tags; logical styles are associated with logical character tags.)

As you work with these tags to style your text in different ways, you will discover that there is not really big difference how the text is displayed on a browser. For instance, you can italicize your text using the <i> tag (a physical character tag) or <em> tag (a logical character tag). Why does that make any difference? It depends on whether you are using italics for the sake of using italics or whether you are using italics to convey some special meaning. While a physical character tag controls how to format the text, a logical character tag describes how the text is being used, without regard to how it should be formatted. Thus a logical style would be used to convey some meaning while a physical style would not.

Physical styles

As mentioned above, a physical character tag controls how the characters are formatted. For instance, you might display some characters as bold or italic. Listing 1 displays some common physical character tags.

Listing 1 common physical character tags
Tag Description Renders as
<b> bold displays text as bold
<big> big displays text in a big font
<i> italics displays text as italic
<s> or <strike> * strike displays text with a line through it
<small> small displays text in a small font
<sub> subscript displays the text as subscript — text that displays below the baseline of the text
<sup> superscript displays the text as superscript — text that has baseline above the baseline of the rest of the text
<tt> teletype displays the text with fixed-width font
<u> underline underlines the text
* Both <s> and <strike> tags are deprecated in HTML 4.0 so instead use the <del> tag.

Listing 2 displays some examples of the common physical character tags.

Listing 2 examples of common physical character tags
HTML code Output
This is <b>bold</b> This is bold
This is <big>big font</big> This is big font
This is <i>italic</i> This is italic
Was <s>$50</s>; now $40 Was $50; now $40
This is <small>small</small> This is small
H<sub>2</sub>O H2O
May 5<sup>th</sup> 2005 May 5th 2005
<tt>fixed-width font</tt> fixed-width font
This is <u>underlined</u> This is underlined

Logical styles

A logical character tag describes how the text is being used, not necessarily how it is formatted. Listing 3 displays common examples logical character tags.

Listing 3 common logical character tags
Tag Description Renders as
<cite> citation emphasizes the text in italics.
<code> code sample Displays some characters as code usually in Courier font (i.e., fixed-width font)
<del> deleted text displays text with a line through it; renders differently in Netscape and Internet Explorer
<dfn> definition italics; renders differently in Netscape and Internet Explorer
<em> emphasis emphasizes the text in some way usually as italic.
<ins> inserted text underlined; renders differently in Netscape and Internet Explorer
<kbd> code sample fixed-width font
<samp> code sample fixed-width font
<strong> strong Text is emphasized more strongly than usually as bold.
<var> program variable italics

Listing 4 provides examples of how logical tags may display on a browser.

Listing 4 examples of logical tags
HTML code Output
This is used for a short <cite>quote</cite>. This is used for a short quote.
<code>y = m * x + b</code> y = m * x + b
<del>Deleted</del> text Deleted text
<dfn>definition</dfn> text definition text
This is <em> emphasized </em>. This is emphasized .
<ins>inserted</ins> text inserted text
<kbd>code</kbd> sample code sample
<samp>code</samp> sample code sample
This is <strong>strong</strong>. This is strong.
<var>program</var> variable program variable

Note that both logical and physical tags are two-sided tags (requiring an opening and closing tag). Also, the character tags can also be nested to format some text as

<b><i>this is bold and italicized</i></b>

which will result in :

this is bold and italicized

When you nest tags, make sure to closed them properly. Although the output of the following code is same, the tags are not closed properly:

<b><i>this is bold and italicized</b></i>

Do you notice why? Well, because the tags are overlapped: the <i> tag should be closed first because it was the last tag that was opened. The <b> tag should be closed last as it is the first tag that is opened. In general, a tag that is opened last, should be closed first. A tag that is opened first should be closed last.

In summary, use the characters tags to either format text with physical tags or to describe some text with predefined logical tags. Also, remember to properly close nested tags.