Inline Type Styles

Most HTML text tags indicate style or structural information forinline elements (strings of characters within the flow of text). Inline style tags affect the appearance of the enclosed text without adding line breaks or extra space. Closing tags are required for inline style tags in order to "turn off" the style attribute.

HTML inline styles fall into two conceptual categories: logical (or "content-based") styles and physical styles. This distinction does not affect the way you use the tags in an HTML document. However, in the movement toward removing style information from content, revived by the introduction of style sheets, logical tags are more in keeping with the ideal HTML model.

Logical Styles

Logical or content-based styles describe the enclosed text's meaning, context, or usage and leave the specific rendering of the tag to the discretion of the browser. Using logical tags, you may indicate that a selection of text should be emphasized or displayed as code. Fortunately, browsers adhere to conventions for the display of logical styles; for instance, you can be pretty certain that emphasized text will be rendered in italics and code will appear in a monospaced font.

Table 10-1 gives a list of logical inline style tags. Refer to "Summary of Text Tags" at the beginning of this chapter for complete browser support information.

Table 10-1. Logical inline style tags

Tag Description Usually displayed as
<abbr> Abbreviation Body text (requires style sheets for style information)
<acronym> Acronym Body text (requires style sheets for style information)
<cite> Citation Italic
<code> Code Monospace font
<del> Deleted text Body text (requires style sheets for style information); may be rendered as strike-through text.
<dfn> Defining instance Body text (requires style sheets for style information)
<div> Division Body text (requires style sheets for style information)
<em> Emphasized Italic
<ins> Inserted text Body text (requires style sheets for style information)
<kbd> Keyboard text Monospace font
<q> Inline quotation Italic (newer browsers only)
<samp> Sample text Monospace font
<span> Span Body text (requires style sheets for style information)
<strong> Strong Bold
<var> Variable Monospace or oblique (slanted) monospace font

Physical Styles

Physical styles provide specific display instructions, such as "italic" or "strike-through." Some physical styles affect the size of the text, such as "big" or "small." Several of these display-specific elements have been deprecated in favor of similar style sheet controls.

Table 10-2 lists the available physical inline style tags with their uses. Refer to the "Summary of Text Tags" at the beginning of this chapter for complete browser-support information.

Table 10-2. Physical inline style tags

Tag Description Function
<b> Bold Displays text in bold type
<big> Big Displays type slightly larger than the surrounding text
<blink> Blink Makes the text flash on and off (Netscape Navigator only)
<font> Font Specifies the font face, size, and color (discussed in "The <font> Tag" later in this chapter) (deprecated)
<i> Italic Displays text in italic type
<s> Strike-through An alternative tag for <strike> (deprecated)
<small> Small Displays type slightly smaller than the surrounding text
<strike> Strike-through Displays strike-through text (crossed through with a horizontal line) (deprecated)
<sub> Subscript Displays the text at a smaller size, slightly below the baseline of the surrounding text
<sup> Superscript Displays the text at a smaller size, slightly above the baseline of the surrounding text
<tt> Teletype Displays the text in the user's default monospaced font
<u> Underline Underlines the text (deprecated)