Chapter 10. Formatting Text
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.
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.
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.
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.
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.
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.
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.)
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.
Indicates an acronym. It has no inherent effect on text display but can be used as an element selector in a style sheet.
<ACRONYM TITLE="World Wide Web">WWW</ACRONYM>
Enclosed text is rendered in bold.
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.
Internet Explorer 3.0+ only
Sets the type one font size increment larger than the surrounding text.
Causes the contained text to flash on and off in Netscape browsers.
Denotes a citation -- a reference to another document, especially books, magazines, articles, etc. Browsers generally display citations in italic.
Denotes a code sample. Code is rendered in the browser's specified monospace font (usually Courier).
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.
Indicates the defining instance of the enclosed term. Usually rendered in bold text, it calls attention to the introduction of special terms and phrases.
Indicates emphasized text. Nearly all browsers render emphasized text in italic.
Deprecated. Used to affect the style (color, typeface, and size) of the enclosed text.
Enclosed text is displayed in italic.
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.
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.
Deprecated. Enclosed text is displayed as strike-through text (same as <strike> but introduced by later browser versions).
Delimits sample output from programs, scripts, etc. Sample text is generally displayed in a monospace font.
Renders the type smaller than the surrounding text.
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").
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.
Enclosed text is strongly emphasized. Nearly all browsers render <strong> text in bold.
Formats enclosed text as subscript.
Formats enclosed text as superscript.
Formats enclosed text as teletype text. The text enclosed in the <tt> tag is generally displayed in a monospaced font such as Courier.
Deprecated. Enclosed text is underlined when displayed. The HTML 4.01 specification prefers style sheet controls for this effect.
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.
Breaks the text and begins a new line but does not add extra space.
Deprecated. Centers the enclosed elements horizontally on the page (a shortcut for <DIV align=center>).
Netscape 4.x only. Displays enclosed text in multiple columns of approximately the same length. It is rarely used.
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.
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.
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.
Indicates a definition list, consisting of terms (<dt>) and definitions (<dd>).
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.
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.
Defines an item in a list. It is used within the <dir>, <ol>, and <ul> list tags.
The following attributes have been deprecated by the HTML 4.0 specification in favor of style sheet controls for list item display.
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>.
Defines the beginning and end of an ordered (numbered) list, which consists of list items <li>. Item numbers are inserted automatically by the browser.
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.
Copyright © 2002 O'Reilly & Associates. All rights reserved.