Formatting Text (Web Design in a Nutshell, 2nd Edition)

This chapter looks at the nature of text in web pages and reviews the HTML tags related to the structure and presentation of text elements.

10.1. Summary of Text Tags

This section is a listing of tags used for formatting text. It is divided into the following subgroups:

Paragraphs and Headings (Block-Level Elements)
Text Appearance (Inline Styles)
Spacing and Positioning
Lists

In this section, browser support for each tag is noted to the right of the tag name. Browsers that do not support the tag are grayed out. Tag usage is indicated below the tag name. Start and end tags are required unless otherwise noted. "Deprecated" means that the tag or attribute is currently supported but is due to be phased out of the HTML specification and is discouraged from use (usually in favor of similar style sheet controls). The attributes listed for each tag reflect those in common use. A more thorough listing of attributes for each tag, according to the HTML 4.01 specification, appears in Appendix A, "HTML Elements".

10.1.1. Paragraphs and Headings (Block-Level Elements)

Block-level elements are always formatted with a line break before and after, with most adding some amount of additional space above and below as well. The most commonly used block elements are paragraphs (<p>), headings (<h1> through <h6>), and blockquotes (<blockquote>).

Lists and list items are also block-level elements, but they have been grouped in their own section below.

<address>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<address>...</address>

Supplies the author's contact information, typically at the beginning or end of a document. Addresses are generally formatted in italic type with a line break (but no extra space) above and below.

<blockquote>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<blockquote>...</blockquote>

Enclosed text is a "blockquote" (lengthy quotation), which is generally displayed with an indent on the left and right margins and added space above and below the paragraph.

Note that:

Some older browsers display blockquote material in italic, making it difficult to read.
Browsers are inconsistent in the way they display images within blockquotes. Some align the graphic with the indented blockquote margin; others align the image with the normal margin of paragraph text. It is a good idea to test on a variety of browsers.

Attributes

cite=URL: Provides information about the source from which the quotation was borrowed. Not often used in common practice.

<div>

NN 2, 3, 4, 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<div>...</div>

Denotes a generic "division" within the document. This element can be used to add structure to an HTML document. When <div> was first introduced in HTML 3.2, only the alignment function (using the align attribute) was implemented by the major browsers. While it has no presentation properties of its own, it can be used in conjunction with the class and id attributes and then formatted with style sheets (Chapter 17, "Cascading Style Sheets"). Because divisions are block elements, they usually display with some added space above and below.

Attributes

align=center|left|right: Deprecated. Aligns the text within the tags to the left, right, or center of the page.

class=name: Assigns a name to an element or a number of elements. Elements that share a class identification can be treated as a group.

id=name: Assigns a unique name to an element. There may not be two elements with the same id name in a document.

style=style properties: Embeds formatting information to be applied to the division contents.

<h1> through <h6>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<hn>...</hn>

Specifies that the enclosed text is a heading (a brief description of the section it introduces). There are six different levels of headings, from <h1> to <h6>, with <h1> the largest and each subsequent level displaying at a smaller size. <h5> and <h6> usually display smaller than the surrounding body text.

Attributes

align=center|left|right: Deprecated. Used to align the header left, right, or centered on the page. Microsoft Internet Explorer 3.0 and earlier do not support right alignment.

<p>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<p>...</p> (end tag
optional)

Denotes the beginning and end of a paragraph. While many browsers will also allow the <p> tag to be used without a closing tag to start a new paragraph, the container method is preferred. When using Cascading Style Sheets with the document container, tags are required or the formatting will not work. Browsers ignore multiple empty <p> elements.

Attributes

align=center|left|right: Deprecated. Aligns the text within the tags to the left, right, or center of the page.

10.1.2. Text Appearance (Inline Styles)

The following tags affect the appearance or meaning of text. With the exception of <basefont>, all of the tags listed in this section define inline styles, meaning they can be applied to a string of characters within a block element without introducing line breaks. (<basefont> is used to specify the appearance of type for a whole document or for a range of text.)

<abbr>

NN 6 MSIE 5.5, 6 HTML 4.01 Opera5

<abbr>...</abbr>

Identifies the enclosed text as an abbreviation. It has no inherent effect on text display but can be used as an element selector in a style sheet.

Attributes

title=string: Provides the full expression for the abbreviation. This may be useful for non-visual browsers, speech synthesizers, translation systems, and search engines.

Example

<ABBR TITLE="Massachusetts">Mass.</ABBR>

<acronym>

NN 6 MSIE 4, 5, 5.5, 6 HTML 4.01 Opera5

<acronym>...</acronym>

Indicates an acronym. It has no inherent effect on text display but can be used as an element selector in a style sheet.

Attributes

title=string: Provides the full expression for the acronym. This may be useful for non-visual browsers, speech synthesizers, translation systems, and search engines.

Example

<ACRONYM TITLE="World Wide Web">WWW</ACRONYM>

<b>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<b>...</b>

Enclosed text is rendered in bold.

<basefont>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<basefont> (no end
tag)

Deprecated. Specifies certain font attributes for text following the tag. It can be used within the <head> tags to apply to the entire document, or within the body of the document to apply to the subsequent text.

Attributes

size=value: Deprecated. Sets the basefont size using the HTML size values from 1 to 7 (or relative values based on the default value of 3). Subsequent relative size settings are based on this value.

Internet Explorer 3.0+ only

color="#rrggbb" or name: Sets the color of the following text using hexadecimal RGB values.

face=font: Sets the font for the following text.

<big>

NN 2, 3, 4, 6 MSIE , 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<big>...</big>

Sets the type one font size increment larger than the surrounding text.

<blink>

NN 2, 3, 4, 6

<blink>...</blink>

Causes the contained text to flash on and off in Netscape browsers.

<cite>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<cite>...</cite>

Denotes a citation -- a reference to another document, especially books, magazines, articles, etc. Browsers generally display citations in italic.

<code>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<code>...</code>

Denotes a code sample. Code is rendered in the browser's specified monospace font (usually Courier).

<del>

NN 6 MSIE 4, 5, 5.5, 6 HTML 4.01 Opera5

<del>...</del>

Indicates deleted text. It has no inherent style qualities on its own but may be used to hide deleted text from view or display it as strike-through text via style sheet controls. It may be useful for legal documents and any instance where edits need to be tracked. Its counterpart is inserted text (<ins>). Both can be used to indicate either inline or block-level elements.

Attributes

cite=URL: Can be set to point to a source document that explains why the document was changed.

datetime=YYYY-MM-DDThh:mm:ssTZD

<dfn>

NN 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01 WebTVOpera5

<dfn>...</dfn>

Indicates the defining instance of the enclosed term. Usually rendered in bold text, it calls attention to the introduction of special terms and phrases.

<em>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<em>...</em>

Indicates emphasized text. Nearly all browsers render emphasized text in italic.

<font>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<font>...</font>

Deprecated. Used to affect the style (color, typeface, and size) of the enclosed text.

Attributes

color=color name or #RRGGBB

face=typeface (or list of typefaces): Deprecated. Specifies a typeface for the text. The specified typeface is used only if it is found on the user's machine. You may provide a list of fonts (separated by commas), and the browser uses the first available in the string.

size=value: Deprecated. Sets the size of the type to an absolute value on a scale from 1 to 7 (3 is the default), or using a relative value +n or -n (based on the default or <basefont> setting).

<i>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<i>...</i>

Enclosed text is displayed in italic.

<ins>

NN 6 MSIE 4, 5, 5.5, 6 HTML 4.01 Opera5

<ins>...</ins>

Indicates text that has been inserted into the document. It has no inherent style qualities on its own but may be used to indicate inserted text in a different color via style sheet controls. It may be useful for legal documents and any instance in which edits need to be tracked. Its counterpart is deleted text (<del>). Both can be used to indicate either inline or block-level elements.

Attributes

cite=URL: Can be set to point to a source document that explains why the document was changed.

datetime=YYYY-MM-DDThh:mm:ssTZD: Specifies the date and time the change was made. See <del> for an explanation of the date/time format.

<kbd>

NN 2, 3, 4, 6 MSIE 2, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<kbd>...</kbd>

Stands for "keyboard" and indicates text entered by the user. It is usually displayed in the browser's monospace font (usually Courier). Some browsers also display it in bold.

<q>

NN 6 MSIE 4, 5, 5.5, 6 HTML 4.01 Opera5

<q>...</q>

Delimits a short quotation that can be included inline, such as "to be or not to be." It differs from <blockquote>, which is for longer quotations set off as a separate paragraph element. Some browsers automatically insert quotation marks. When used with the lang (language) attribute, the browser may insert language-specific quotation marks.

Attributes

cite=url: Designates the source document from which the quotation was taken.

<s>

NN 3, 4, 6 MSIE 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<s>...</s>

Deprecated. Enclosed text is displayed as strike-through text (same as <strike> but introduced by later browser versions).

<samp>

NN 2, 3, 4, 6 MSIE 2, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<samp>...</samp>

Delimits sample output from programs, scripts, etc. Sample text is generally displayed in a monospace font.

<small>

NN 2, 3, 4, 6 MSIE 2, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<small>...</small>

Renders the type smaller than the surrounding text.

<span>

NN 4, 6 MSIE 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<span>...</span>

Identifies a span of inline characters, but does not by default affect the formatting of those characters. It can be used in conjunction with the class and/or id attributes and formatted with Cascading Style Sheets (see Chapter 17, "Cascading Style Sheets").

Attributes

class=name: Assigns a name to an element or a number of elements. Elements that share a class identification can be treated as a group.

id=name: Assigns a unique name to an element. There may not be two elements with the same id name in a document.

style=style properties: Embeds style information to be applied to the division contents.

<strike>

NN 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<strike>...</strike>

Deprecated. Enclosed text is displayed as strike-through text (crossed through with a horizontal line). The HTML 4.01 specification prefers style sheet controls for this effect.

<strong>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<strong>...</strong>

Enclosed text is strongly emphasized. Nearly all browsers render <strong> text in bold.

<sub>

NN , 3, 4, 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<sub>...</sub>

Formats enclosed text as subscript.

<sup>

NN 3, 4, 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<sup>...</sup>

Formats enclosed text as superscript.

<tt>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<tt>...</tt>

Formats enclosed text as teletype text. The text enclosed in the <tt> tag is generally displayed in a monospaced font such as Courier.

<u>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<u>...</u>

Deprecated. Enclosed text is underlined when displayed. The HTML 4.01 specification prefers style sheet controls for this effect.

<var>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<var>...</var>

Indicates an instance of a variable or program argument, usually displayed in italic.

10.1.3. Spacing and Positioning

The following tags give authors control over the line breaks, alignment, and spacing within an HTML document. Tables (discussed in Chapter 13, "Tables") and style sheets (Chapter 17, "Cascading Style Sheets") offer better control over spacing and positioning than the minimal controls listed here.

<br>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<br>

Breaks the text and begins a new line but does not add extra space.

Attributes

clear=all|left|right|none: Breaks the text flow and resumes the next line after the specified margin is clear. This is often used to start the text below an aligned image (preventing text wrap). none is the default, causing a simple line break.

<center>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<center>...</center>

Deprecated. Centers the enclosed elements horizontally on the page (a shortcut for <DIV align=center>).

<multicol>

NN 4

<multicol>...</multicol>

Netscape 4.x only. Displays enclosed text in multiple columns of approximately the same length. It is rarely used.

Attributes

cols=number: Required. Specifies the number of columns.

gutter=number: Specifies the amount of space (in pixels) to maintain between columns.

width=number: Specifies the width of the columns in pixels. All columns within <multicol> are the same width.

<nobr>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 WebTV Opera5

<nobr>...</nobr>

Nonstandard. Text (or graphics) within the "no break" tags always display on one line, without allowing any breaks. The line may run beyond the right edge of the browser window, requiring horizontal scrolling. The HTML 4.01 specification prefers style sheets for preventing line breaks.

<pre>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<pre>...</pre>

Delimits preformatted text, meaning that lines are displayed exactly as they are typed in, honoring multiple spaces and line breaks. Text within <pre> tags is displayed in a monospace font such as Courier.

Attributes

width=value: Deprecated. This optional attribute determines how many characters to fit on a single line within the <pre> block.

<wbr>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 Opera5

<wbr>

Nonstandard. Indicates a potential word break point. The <wbr> tag works only when placed within <nobr> -tagged text and causes a line break only if the current line already extends beyond the browser's display window margins.

10.1.4. Lists

Th e following is a collection of tags used for formatting a number of different types of lists in HTML. Any list can be nested within another list.

<dir>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<dir>...</dir>

Deprecated. Creates a directory list consisting of list items <li>. Directory lists were originally designed to display lists of files with short names, but they have been deprecated with the recommendation that unordered lists (<ul>) be used instead. Most browsers render directory lists as they do unordered lists (with bullets), although some use a multicolumn format.

<dl>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<dl>...</dl>

Indicates a definition list, consisting of terms (<dt>) and definitions (<dd>).

Attributes

compact: Deprecated. Makes the list as small as possible. Few browsers support the compact attribute.

<dd>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<dd>...</dd> (end tag optional)

Denotes the definition portion of an item within a definition list. The definition is usually displayed with an indented left margin. The closing tag is commonly omitted but should be included when applying style sheets.

<dt>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<dt>...</dt>  (end tag optional)

Denotes the term portion of an item within a definition list. The closing tag is normally omitted but should be included when applying style sheets.

<li>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<li>...</li>  (end tag optional)

Defines an item in a list. It is used within the <dir>, <ol>, and <ul> list tags.

Attributes

The following attributes have been deprecated by the HTML 4.0 specification in favor of style sheet controls for list item display.

type=format

Deprecated. Changes the format of the automatically generated numbers or bullets for list items.

Within unordered lists (<ul>), the type attribute can be used to specify the bullet style (disc, circle, or square) for a particular list item.

Within ordered lists (<ol>), the type attribute specifies the numbering style (see options under the <ol> listing) for a particular list item.

value=number: Deprecated. Within ordered lists, you can specify the number of an item. Following list items increase from the specified number.

<menu>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<menu>...</menu>

Deprecated. This indicates the beginning and end of a menu list, which consists of list items <li>. Menus are intended to be used for a list of short choices, such as a menu of links to other documents. It is little used and has been deprecated in favor of <ul>.

Attributes

compact: Displays the list as small as possible (not many browsers do anything with this attribute).

<ol>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<ol>...</ol>

Defines the beginning and end of an ordered (numbered) list, which consists of list items <li>. Item numbers are inserted automatically by the browser.

Attributes

compact: Deprecated. Displays the list as small as possible (not many browsers do anything with this attribute).

start=number: Starts the numbering of the list at number instead of at 1.

type=1|A|a|I|i: Deprecated. Defines the numbering system for the list as follows:

Type value	Generated style	Sample sequence
1	Arabic numerals (default)	1, 2, 3, 4
A	Uppercase letters	A, B, C, D
a	Lowercase letters	a, b, c, d
I	Uppercase Roman numerals	I, II, III, IV
i	Lowercase Roman numerals	i, ii, iii, iv

<ul>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<ul>...</ul>

Defines the beginning and end of an unordered (bulleted) list, which consists of list items <li>. Bullets for each list item are inserted automatically by the browser.

Attributes

compact: Deprecated. Displays the list block as small as possible. Not many browsers support this attribute.

type=disc|circle|square

Attributes

Attributes

Attributes

Attributes

Attributes

Example

Attributes

Example

Attributes

Internet Explorer 3.0+ only

Attributes

Attributes

Attributes

Attributes

Attributes

Attributes

Attributes

Attributes

Attributes

Attributes

Attributes

Attributes

Attributes

Chapter 10. Formatting Text

Contents:

10.1. Summary of Text Tags

10.1.1. Paragraphs and Headings (Block-Level Elements)

10.1.2. Text Appearance (Inline Styles)

10.1.3. Spacing and Positioning

10.1.4. Lists