Character Formatting Tags: Usage

There are two types of HTML character formatting tags: logical and physical. The logical character formatting tags identify a more logical style to be assigned to the characters that they surround. For example, a citation is a logical format style. However, the physical character formatting tags presume the browser is able to display "bold" in bold, and "underline" in underline. Text browsers, especially, may not be able to display physical tags correctly. Therefore, it is recommended that logical character formatting codes be preferred whenever appropriate.

Logical Formatting Tags

<STRONG>...</STRONG> - Strong

This coding:

<STRONG>This text is strong</STRONG>

Renders:

This text is strong

<EM>...</EM> - Emphasis

Highlights the enclosed text, usually in italics.

This coding:

<EM>This text is emphasized</EM>

Renders:

This text is emphasized

<CITE>...</CITE> - Citation

Renders the enclosed text in a distinguishing style to indicate a citation -- most browsers display in italics.

This coding:

<CITE>Library of Congress Information Bulletin</CITE>

Renders:

Library of Congress Information Bulletin

Physical Tags

<B>...</B> - Bold

This coding:

<B>This text is bold</B>

Renders:

This text is bold

<I> ... </I> - Italics

Enclosed text is displayed in italics. Preferably, use the logical tags like emphasis or citation.

This coding:

<I>This text is italicized</I>

Renders:

This text is italicized

<U>...</U> - Underline

Specifies that the enclosed text be underlined. Use of this tag is not highly recommended, because underlining is generally associated with "linked" text.

This coding::

<U>This text is underlined</U>

Renders:

This text is underlined

<FONT>...</FONT> - Font Appearance

Specifies the size (relative to the base/normal font) and the color of the enclosed text. The <FONT> tag is deprecated in HTML 4.01 in favor of using the <SPAN> tag (see below) with style sheets.

The following attributes are available with the FONT tag:

• SIZE=
  The SIZE= attribute can either take an absolute value, ranging from 1 (smallest) to 7 (largest), or a relative value. Using the latter will change the font relative to the current font size. For example, <FONT SIZE="+1"> will make the font size one step bigger.

• COLOR=
  The COLOR attribute takes a hex value, which is the RGB-notation of the desired color. You can also use a color name, although the names are less widely supported than the codes. See the section on BODY for a more detailed explanation on how to specify colors.

This coding::

<font size="+2" color="#ff0000">This text is larger and red</font>

Renders:

This text is larger and red

<SPAN> ... </SPAN> - Inline Container Tag

The SPAN tag is used much the same way, but is an "inline" tag used to apply style sheet settings to a word or short phrase.

<SPAN STYLE="background-color: #ffcccc; font-family: arial, helvetica, sans-serif;">
This paragraph is in Arial and has a background color</SPAN>

Renders:

This paragraph is in in Arial and has a background color

• Glossary of HTML Tags (By Category)
• Home Page
• Library of Congress Home Page