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

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"

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>...</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>...</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>...</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 ("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.

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

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>...</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>...</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>...</b>

Enclosed text is rendered in bold.

<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>...</big>

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

<blink>...</blink>

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

<cite>...</cite>

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

<code>...</code>

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

<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
• Specifies the date and time the change was made. Dates and times follow the format listed above where YYYY is the four-digit year, MM is the two-digit month, DD is the day, hh is the hour (00 through 23), mm is the minute (00 through 59), and ss is the seconds (00 through 59). The TZD stands for "Time Zone Designator" and its value can be Z (to indicate UTC, Coordinated Universal Time), an indication of the number of hours and minutes ahead of UTC (such as +03:00), or an indication of the number of hours and minutes behind UTC (such as -02:20).

  This is the standard format for date and time values in HTML. For more information, see http://www.w3.org/TR/1998/NOTE-datetime-19980827.

<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>...</em>

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

<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 "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>...</i> 

Enclosed text is displayed in italic.

<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>...</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>...</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>...</s> 

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

<samp>...</samp>

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

<small>...</small>

Renders the type smaller than the surrounding text.

<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 "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>...</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>...</strong>

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

<sub>...</sub>

Formats enclosed text as subscript.

<sup>...</sup>

Formats enclosed text as superscript.

<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>...</u>  

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

<var>...</var>

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

Spacing and Positioning

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

<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>...</center>

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

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

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.

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>...</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>...</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>...</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>...</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>...</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>...</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>...</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:

<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
• Deprecated. Defines the shape of the bullets used for each list item.