text

previous | index | next

There are three ways to improve the quality and value of a page: content, content and content (free after Eric Raymond). Of course, the presentation of the content is essential in making sure that any person interested in the content can get to the heart of it with a minimum of interference. That is exactly why HTML provides various ways to adjust the presentation.

Although a strong trend towards graphical presentation has been set in with the arrival of present-day internet browsers, text still is the number one information carrier. HTML emphasizes this by providing essentially two different approaches to text presentation: logical text tags, which allow the browser to determine the presentation, and physical text tags, which put the control more at the side of the author. Then there are some tags that help structure the text.

logical text tags

Logical text tags use the approach where text is identified as belonging to a certain category, and is marked up as such. The advantage is that all pages viewed with a specific browser will have the same markup for the same categories, although this may vary between browsers. The latter is typically of no concern to either the author or the public. The table below lists most of these, describes them and gives an example. All logical font tags require a closing tag.

Logical text tags

<TAG>	description	Example
<H1>	level 1 header	Example
<H2>	level 2 header	Example
<H3>	level 3 header	Example
<H4>	level 4 header	Example
<H5>	level 5 header	Example
<H6>	level 6 header	Example
<ADDRESS>	address	Example
<BLOCKQUOTE>	large quote	Example
<EM>	emphasis	Example
<STRONG>	strong emphasis	Example
<DFN>	definition	Example
<CODE>	source code	Example
<SAMP>	sample	Example
<KBD>	keyboard input	Example
<VAR>	variable	Example
<CITE>	citation	Example
<BIG>	large text	Example
<SMALL>	small text	Example

As you can see, a lot of different tags result in the same appearance. This is because the number of ways a browser can display text are limited.

physical font tags

Although there is much to say in favor of logical text tags, the tendency has been towards physical text markup, much like it always has been done in text processing. To this end a few physical text tags exist.

Physical text tags

<TAG>	description	Example
<B>	bold	Example
<I>	italic	Example
<TT>	fixed width	Example
<SUB>	subscript	Example
<SUP>	superscript	Example

Apart from these tags, a specific <FONT> tag exists, which allows direct manipulation of the appearance through its attributes

SIZE=[+|-](1-7)

this attribute allows direct setting of the font size, either absolute, or relative to the basefont size, by prepending a + or -.

COLOR=color

this attribute is used to change the font color. Colors are discussed later in this course.

FACE="font name"

This attribute is not in the HTML 3.2 specification. Supported by most popular browsers, it allows changing of the actual font face, examples of which you may see on this page, in the customized headers. It is possible to specify more than one font face in between the quotes, separated by comma's, and the browser will pick the first it has available. Font faces that are more or less broadly available are

• "Times, Times New Roman"
• "Helvetica, Arial"
• "Courier" (fixed width)
• "Fixed, Terminal" (fixed width)

Keep in mind that nesting of text markup tags depends on the capabilities of the platform on which the browser runs, and may lead to unexpected results.

So don't expect purple bold italic fixed width large text to display correctly on any system, just because it looks nice on yours.

miscelaneous

Browsers will break text lines on whitespace at the best possible location. This may lead to line breaks where you don't want them.

Use &nbsp; (non-breaking space) in stead of a regular space when a browser should not break the line at that location.

A few other tags exist that are important to mention. First of all, the <PRE> tag allows typesetting of preformatted text, meaning that all whitespace is preserved. This can be used to insert pieces of source code, or text-aligned tables. It is typically displayed in the fixed width type face. It optionally takes an attribute WIDTH, defining the width of the preformatted text in characters.

A more structural tag is <P>, which indicates the beginning (or ending) of a text paragraph. It typically skips a line before displaying the text. In the Quick Reference a number of tags is indicated that also have the effect of ending a paragraph. A paragraph can be horizontally aligned by specifying the ALIGN attribute, which defaults to left justified. If a line break is required without starting a new paragraph, the <BR> tag should be used. This will also force the browser to insert empty lines if several of these tags are used in sequence.

Finally, there are some tags you might want to avoid. One is the <U> tag, which provides underlining. Since a lot of internet users are accustomed to links being underlined, the use of underlining may lead to confusion. Another tag that rears its ugly head every now and then is the <BLINK> tag, which, as you guessed, causes text to blink.

Don't use the blink tag, period.

previous | index | next