Methods of Text Control - HTML

There are various means to control the look and formatting of text in your documents. It should come as no surprise that the more direct methods—<font> tags and the like—have been deprecated in favor of CSS controls in HTML 4.01 and XHTML. The following sections cover the various means possible for historical and completeness purposes.

Tip:Although it is sometimes easier to drop a direct formatting tag into text, resist the urge and use styles instead. Your documents will be more flexible and more standards compliant.

The <font> tag
The <font> tag enables you to directly affect the size and color of text. Intuitively, the size attribute is used to change the size of text, and the color attribute is used to change the color. The size of the text is specified by a number, from 1-7, or by signed number (also 1-7). In the latter case, the size change is relative to the size set by the <basefont> tag. The <basefont> tag has one attribute, size, which can be set to a number, 1-7.

Note: Default font type and size is left up to the user agent. No standard correlation exists between the size used in a <font> tag and the actual font size used by the user agent. As such, the default size of the font (1-7) varies between user agents.

For example, if you wanted larger text in a red color, you could use a tag similar to the following:

Note that using “+3” for the size increases the text within the tag by a factor of 3 from the base font size

Emphasis and other text tags
You can use a handful of tags to emphasize portions of text. Although these tags have not been deprecated in HTML 4.01, it is strongly recommended that you make use of CSS instead. Table lists the emphasis tags and their use.

Emphasis Tags

Emphasis Tags

The creation and adoption of these tags seems somewhat haphazard. As such, the support for the tags is not standard across user agents—you may not be able to tell the difference between text coded with <cite> or <em>, for example.

CSS text control
CSS provides several different properties to control text. Table lists some of the more popular properties. As you can see, CSS offers a bit more control over your text, allowing you to specify actual fonts and actual font sizes. However, the advantage to using CSS properties over hardcoded tags is not found in the list of available properties, but in the flexibility in formatting and effecting later changes. For example, suppose you were

An example of text using emphasis tags.

An example of text using emphasis tags.

CSS Text Properties

CSS Text PropertiesCSS Text Properties

creating documentation for a programming language and wanted to format all reserved words a particular way—perhaps in a slightly larger, red, bold font. Using tags, the code would resemble the following:

Later, you might decide that the red color is too much emphasis, and larger, bold text is enough. You must then change every <font> tag used around reserved words. Suppose, instead, that you used CSS, as shown in the following code:

If you later decided to change the formatting of reserved words, you would only have to make one change to the style definition at the top of the document. (If you used an external style sheet, that one change could change an unlimited number of documents that used the sheet.)

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics