Book HomeWeb Design in a NutshellSearch this book

Chapter 10. Formatting Text

Contents:

Summary of Text Tags
Working with HTML Text
Inline Type Styles
<div> and <span>
The <font> Tag
Lists
Text Layout Techniques with HTML
Character Entity References

Designers accustomed to desktop publishing programs are usually shocked to find how little control HTML offers over the display of the page. Before you get too frustrated, bear in mind that HTML was not developed as a method for designing how the page looks, but rather as a means of marking the structure of a document.

In fact, the tags that do provide specific display information (<center>, for example) are not true to the original HTML concept. In an ideal world, all style and presentation would go in style sheets, leaving HTML markup to work as originally designed. The W3C has made these intentions clear by deprecating in the HTML 4.01 specification nearly all tags that control presentation in favor of Cascading Style Sheet controls (see Chapter 17, "Cascading Style Sheets").

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:

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.

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).

<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

Deprecated. Specifies the color of the enclosed text. For information on how to specify color, see Chapter 16, "Specifying Color in HTML".

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.

<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).



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.