A Complete Guide to Web Design

Inline Type Styles 115

Formatting

Text

Inline Type Styles

Web Design in a Nutshell, eMatter Edition

HTML styles fall into two conceptual categories:logical(or “content-based”) styles
andphysicalstyles. This distinction is purely intellectual and does not affect the
way you use the tags in an HTML document. However, in the movement toward
removing style information from the content revived by the introduction of style
sheets, logical tags are the more “pure” way to go.

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 that code will appear in a monospaced font.

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

Physical Styles

Physical styles provide specific display instructions, such as “italic” or “strike-
through.” Some physical styles control the size of the text, such as “big” or “small.”
Once style sheets are universally supported they will be the preferred method for

Table 7-1: Logical Inline Style Tags

Tag Description Usually Displayed as:

<abbr> Abbreviation Body text (requires style sheets for style infor-

mation)

<acronym> Acronym Body text (requires style sheets for style infor-

mation)

<cite> Citation Italic

<code> Code Monospace font

<del> Deleted text Body text (requires style sheets for style infor-

mation)

<div> Division Body text (requires style sheets for style infor-

mation)

<em> Emphasized Italic

<ins> Inserted text Body text (requires style sheets for style infor-

mation)

<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 infor-

mation)

<strong> Strong Bold

<var> Variable Monospace oblique font