Dynamic HTML: The Definitive Reference, 3rd Edition

Chapter 1. HTML and XHTML Reference

This chapter provides a complete list of HTML tags and attributes specified in the W3C recommendations for HTML 4.01 and XHTML 1.1 plus those implemented in yesterday’s and today’s mainstream browsers. This includes many items from the Web Hypertext Application Technology Working Group (WHATWG), such as Web Forms 2.0. Version information accompanies each tag and attribute so that you can see whether a particular entry applies to the browser(s) you must support. At a glance, you can see the version number of Internet Explorer (IE), pre-Mozilla Netscape Navigator (NN), Mozilla-based browsers (Moz), Safari (Saf), Opera (Op), and the W3C HTML specification (HTML) in which the item was first introduced. Because this book deals with Dynamic HTML, the history timeline goes back only to HTML 3.2, Netscape Navigator 2, and Internet Explorer 3. For derivatives of the Mozilla Foundation’s browser (e.g., Firefox, Netscape 6 or later, Camino, etc.), see Appendix F. Although some DHTML facilities were available in early versions of Opera, this book starts its Opera history with version 7 from 2003, which coincides with the advent of the rendering engine that Opera uses today. Therefore, an item marked “Op 7” may have been supported by earlier versions.

Other than for Opera, if an item existed prior to one of these versions—or was available at the first release of newer browsers, such as Mozilla and Safari—and is still in use, it is simply marked “all.” Where no implementation exists, I’ve used “n/a” to indicate that. Items valid for a single version show the number encased in pipe symbols (e.g., |4| for Version 4 only). Deprecated items are listed here because modern browsers support them for backward compatibility, and legacy code may rely on them. When an item has been not only deprecated, but removed from a standard, it is indicated with a “less than” symbol, as in <4. In a change from the last edition of this book, the NN indicators are only for Versions 2 through 4 of Netscape Navigator. Items that first appeared in Netscape 6 are covered by the Mozilla entries.

Following a section that lists attributes shared by all elements, this chapter is organized alphabetically by HTML element (or tag, if you prefer); within each element’s description, attributes are listed alphabetically. The reference entries are designed so that it is easy to see which elements require end tags (in HTML), and whether attributes are optional or required. Scripted object references are displayed in the W3C DOM standard syntax style unless the item requires a different DOM style (e.g., the Navigator 4 layer element). Although the W3C DOM document.getElementById( ) syntax prevails in the listings, if IE supports the item through its DOM scripting, you can assume that the document.all reference style also applies in that environment. The description for an item details any significant differences between the various browser implementations of the item, but this reference is not intended to be a universal bug database.

All example code is formatted according to W3C HTML standards because the widest number of DHTML browsers support that format and all readers will be familiar with it. At the same time, however, the code demonstrates most practices encouraged for XHTML formatting, such as lowercase tag and attribute names and quoted attribute values of all types. The only XHTML formatting characteristics lacking from the example code are end tags for empty elements (such as the XHTML backward-compatible <br /> technique) and explicit value assignments to attributes that do not require them in HTML (such as the selected attribute of checkbox type input elements). These coding style variations are easy to modify on your own if your code must conform to XHTML validation (see Online Section I).

For in-depth coverage of event types related to event attributes mentioned in this chapter, see Chapter 3. To find out which, if any, HTML and XHTML DTDs support a particular element or attribute, consult Appendix E.

Attribute Value Types

Many HTML element attributes share similar data requirements. For the sake of brevity in the reference listings, this section describes a few common attribute value types in more detail than is possible within each listing. Whenever you see one of these attribute value types associated with an attribute, consult this section for a description of the type.

Length

A length value defines a linear measure of document real estate, such as the width of a table element. The unit of measurement can be any applicable unit that helps identify a position or space on the screen. HTML attribute length units are uniformly pixels, but in other content, such as that specified in Cascading Style Sheets (see Chapter 4), measurements can be in inches, picas, ems, or other relevant units. A single numeric value may represent a length when it defines the offset from an edge of an element. For example, a coordinate point (10,20) consists of two length values, denoting pixel measurements from the left and top edges of an element, respectively. A length value applying to a horizontal or vertical space may also be represented as a percentage value, such as width="50%". Attributes associated with length values are deprecated in favor of corresponding CSS attributes for strict HTML 4 and XHTML conformance.

Identifier

An identifier (usually assigned to name or id attributes) is a name that adheres to strict syntactical rules. Most importantly, an identifier is one word with no whitespace allowed. If you need to use multiple words to describe an item, you can use the camelCase format (in which internal letters are capitalized) or an underscore character between the words. Most punctuation symbols are not permitted, but all numerals and alphabetical characters are. To avoid potential conflicts with scripting languages that refer to items by their identifiers, it is good practice to avoid using a numeral for the first character of an identifier.

URI and URL

The term Universal Resource Identifier (URI) is a broad term for an address of content on the Web. A Universal Resource Locator (URL) is a type of URI. For most web authoring, you can think of them as one and the same because most web browsers restrict their focus to URLs. A URL, commonly applied to href and src attributes, may be complete (including the protocol, host, domain, and the rest) or may be relative to the URL of the current document. In scriptable browsers, attributes that expect URI values can also accept the javascript: pseudo-protocol, which makes a script statement or function the destination of the link. This pseudo-protocol, while implemented widely, is not a formal standard and does not work in browsers with JavaScript disabled.

Language Code

There is an extensive list of standard codes that identify the spoken and written languages of the world. A language code always contains a primary language code, such as “en” for English or “zh” for Chinese. Common two-letter primary codes are cataloged in ISO-639 (an excerpted list of codes is available at http://www.ietf.org/rfc/rfc1766.txt). An optional subcode (separated from the primary code by a hyphen) may be used to identify a specific implementation of the primary language, usually according to usage within a specific country. Therefore, although “en” means English, “en-US” means a U.S.-specific version of English. The browser must support a particular language code for its meaning to be of any value to an element attribute.

Alignment Constants

The frequent presence of the align attribute among various elements (and the related but less pervasive valign attribute) is misleading when describing attribute values, because the attribute conveys different meanings for several element groups. Add to the mix several proprietary values that are implemented in some browsers, and it’s easy to confuse which values to use when. That all such attributes are deprecated in favor of the CSS text-align (horizontal) and vertical-align properties is welcome relief to authors who code their layout exclusively with CSS (and for whom this section is largely irrelevant).

Element alignment is divisible into five categories, each with its own set of applicable elements and permissible values. Browsers accept case-insensitive values, but if you intend to continue working with these attributes, you should get in the habit of using all lowercase values to conform with the transitional DTDs.

Alignment outside the box

The first category governs the alignment of text that surrounds the rectangular space of the element bearing the align attribute. W3C HTML elements in this category include applet, iframe, img, input, and object. IE adds embed, fieldset, and select elements to the list, while deleting iframe. Here is a synopsis of various widely-supported align attribute settings for these elements and how they affect the display of the element and surrounding text content:

absbottom

Text is aligned such that the bottom of any possible text rendering (including character descenders) is on the same horizontal line as the very bottom of the element.

absmiddle

The middle of the text height (from descender to ascender) is aligned with the middle of the element height.

baseline

The baseline of the text is on the same horizontal line as the very bottom of the element (note that character descenders extend below the baseline).

bottom

The W3C sanctioned value that is the equivalent of baseline.

left

If there is text starting on the same line as the element, the element is lowered to the next line and displayed flush left within the next outermost container context. Text that follows the element cinches up to the end of the text preceding the element, causing the text to wrap around the object or image (called floating). This is a W3C-sanctioned value.

middle

The baseline of the text is aligned with the middle of the element height. This is a W3C-sanctioned value.

right

If there is text starting on the same line as the element, the element is lowered to the next line and displayed flush right within the next outermost container context. Text that follows the element starts on the line immediately below the starting text, causing the text to wrap around the object or image (called floating). This is a W3C-sanctioned value.

texttop

The very top of the element is on the same horizontal line as the ascenders of the preceding text.

top

The top of the element is on the same horizontal line as the top of the tallest element (text or other kind of element) rendered in the line. This is a W3C-sanctioned value.

Text alignment inside the containing box

The legend element acts like a label for a form’s fieldset element. The caption does the same for a table. Alignment of these elements applies to the location of the element’s text relative to the rectangular space occupied by the form’s fieldset border or table. Support for this element-attribute pair varies widely among modern browsers. The align attribute settings for this category are:

bottom

Text is aligned at the bottom or below the related element’s box. Browsers obey attribute value only for caption element. This attribute is a W3C-sanctioned value.

center

Text is at the top or above the related element’s box and centered horizontally. Although not a W3C-sanctioned value, this value is supported in modern browsers for the caption element, but not the legend element in Safari or Opera.

left

Although this is a W3C-sanctioned value (where indications are that text should be to the left of the containing element), browsers align text at top left of box for legend; for caption, only Mozilla places caption text to the left of the element.

right

Although this is a W3C-sanctioned value (where indications are that text should be to the right of the containing element), browsers align text at top right of box for legend; for caption, only Mozilla places caption text to the right of the element.

top

Text for legend aligned at top left of containing box; at top center for caption. This is a W3C-sanctioned value.

Horizontal alignment of a block element

This category is potentially confusing because of the perception of what a browser does when you set the align attribute for the p, div, h1 through h6, and hr elements. These block elements normally occupy a transparent box that is the full width of the next outermost container. For most elements, that container is the body element, which extends to nearly the full width of the browser window. Therefore, when you specify one of the three primary W3C-sanctioned attribute values to an element containing short strings—center, left, and right—it appears as though the element, itself, is being aligned. In truth, the element is in the exact same spot, taking up the same width as other body content, but the text inside is aligned per the attribute setting. If you specify a fixed-width style for the element, the align attribute continues to control the text inside the element, while the element hugs the left margin. To center the width-constrained element, you must nest it inside another full-width container, and set its align attribute to center.

To add to the confusion, the W3C HTML 4 transitional specification allows for a value of justify, while the strict HTML 4 and all XHTML specifications remove that value from text alignment types of align attributes (except for table element components). Browsers support the justify value when aligning these elements.

Horizontal text alignment in a table cell

In the W3C specification, text inside descendant nodes of the table element (tbody, tr, td, and the rest) can be aligned according to the values center, justify, left, and right. IE through Version 7, however, does not recognize the justify value for table components. If you wish to justify text in an IE table cell, wrap the text in a p or div container, and set that container’s align attribute to justify.

Vertical text alignment inside an element

Vertical alignment within a table component requires the valign attribute, which has permissible values that resemble some of those of the align attribute. Those values are baseline, bottom, middle, and top.

Colors

A color value can be assigned either via a hexadecimal triplet or with a plain-language equivalent. A hexadecimal triplet consists of three pairs of hexadecimal (base 16) numbers that range between the values 00 and FF, corresponding to the red, green, and blue components of the color. The three pairs of numbers are bunched together and preceded by a pound sign (#) in the form #rrggbb. Therefore, the reddest of reds has all red (FF) and none (00) of the other two colors: #FF0000; pure blue is #0000FF. The letters A through F can also be lowercase.

This numbering scheme creates a huge number of potential combinations (over 16 million), but not all video monitors are set to distinguish among millions of colors. Therefore, you may wish to limit yourself to the more modest palette of colors known as the web palette. A fine reference of colors that work well on all browsers at popular bit-depth settings can be found at http://www.lynda.com/hexh.html.

The HTML recommendation also specifies a basic library of 16 colors that can be assigned by plain-language names. Note that the color names are case-insensitive. The names and their equivalent hexadecimal triplets are as follows:

Black	#000000	Maroon	#800000	Green	#008000	Navy	#000080
Silver	#C0C0C0	Red	#FF0000	Lime	#00FF00	Blue	#0000FF
Gray	#808080	Purple	#800080	Olive	#808000	Teal	#008080
White	#FFFFFF	Fuchsia	#FF00FF	Yellow	#FFFF00	Aqua	#00FFFF

In other words, the attribute settings bgcolor="Aqua" and bgcolor="#00FFFF" yield the same results.

Many years ago, Netscape deployed a much longer list of plain-language color equivalents, originally adopted from the X Window System palette known as X11 color names. These are detailed in Appendix A and are recognized by recent versions of mainstream browsers.

Shared HTML Element Attributes

A vast majority of elements found in HTML 4.x, XHTML 1.x, and today’s browsers have numerous attributes in common. Rather than repeat the descriptions of these attributes ad nauseam in the reference listings, their details are listed here only once. These shared attributes do not appear in the attribute lists for each element in the rest of this chapter, but they are available in practically every element (within the browser or standard version range indicated in each listing). Obviously, the few shared attributes that are meaningless except for rendered elements may not be available to nonrendered elements. For example, it wouldn’t make any sense to apply the tabindex attribute to a style element because the style element presents no content of its own on the page to which a user could tab. In a few cases, the W3C specifications do not implement common attributes in nonrendered elements, but the browsers support them because the W3C DOM establishes scriptable properties for those attributes. Consult Appendix E to verify HTML 4 and XHTML DTD support for a particular shared attribute. Here is a list of the shared attributes.

Attributes

accesskey	class	contenteditable	dir	disabled
hidefocus	id	lang	language	repeat
repeat-max	repeat-min	repeat-start	repeat-template	style
tabindex	title	unselectable	xml:lang

accesskey:IE 4/5 NN n/a Moz 0.9 Saf 1 Op 7 HTML 4 (see text): Optional

 

accesskey=" character "

A single character key that either gives focus to an element (in some browsers) or activates a form control or link action. The browser and operating system determine the keyboard combination that the user must press with the access key to activate the link. For example, most Windows browsers require a press of the Alt key along with the designated access key, while Mac browsers use the Ctrl key as the modifier. Opera, on the other hand, has an entirely different sequence: Shift+Esc and then the access key.

Although accesskey is listed here as a widely shared attribute, that isn’t strictly the case across all implementations. HTML 4 and most current browsers recognize this attribute for the following elements: a, area, button, input, label, legend, and textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, object, select, span, table, and td (but removes label and legend). IE 5 adds every other renderable element, but with a caution: except for input and other form-related elements, you must also assign a tabindex attribute to the IE 5 and later element (even if simply a value of zero for all) to let the accelerator key combination bring focus to the element. All other current mainstream browsers recognize this attribute for the select element.

Example

<a href="http://www.megacorp.com/toc.html" accesskey="t">Table of Contents</a>
<h2 class="subsection" accesskey="2" tabindex="0">Part Two</h2>

Value

Single character of the document set.

Default

None.

Object Model Reference

[window.]document.links[i].accessKey
[window.]document.anchors[i].accessKey
[window.]document.formName.elementName.accessKey
[window.]document.forms[i].elements[j].accessKey
[window.]document.getElementById(elementID).accessKey

class:IE 3 NN 4 Moz 0.9 Saf 1 Op 7 HTML 4: Optional

 

class=" className1[ ...classNameN] "

An identifier generally used to associate an element with a style sheet rule defined for a class selector. See Online Section III. Use the class attribute only with visible (renderable) elements.

Example

<a class="chapTitle" name="chapter3" id="chapter3">Chapter 3</a>

Value

Case-sensitive identifier. Multiple classes can be assigned by separating the class names with spaces within the quoted attribute value.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).className

contenteditable:IE 5.5 NN n/a Moz n/a Saf 1.3/2 Op 9 HTML n/a: Optional

 

contenteditable=" featureSwitch "

Boolean switch that enables or disables the user’s ability to edit the element’s content directly on the web page. For more information about scriptable editing in IE for Windows (also implemented in recent versions of Safari and Opera), visit http://msdn.microsoft.com/workshop/author/editing/editing_entry.asp. For Mozilla, see the document.designMode property description in Chapter 2.

Example

<p id="userArea" contenteditable="true">Enter your text here.</p>

Value

true | false | inherit

Default

inherit

Object Model Reference

[window.]document.getElementById(elementID).contentEditable

dir:IE 5 NN n/a Moz 0.9 Saf 1 Op 7 HTML 4: Optional

 

dir=" direction "

Character rendering is either left-to-right or right-to-left. This attribute is usually set in concert with the lang attribute; it must be used to specify a character-rendering direction that overrides the current direction.

Example

<a lang="ar" dir="rtl">Some Unicode Arabic text characters here</a>

Value

ltr | rtl

Default

ltr

disabled:IE 4/5.5 NN n/a Moz 0.9 Saf 1 Op 7 HTML 4: Optional

 

disabled=" featureSwitch "

Boolean switch that enables or disables the user’s ability to activate or otherwise access an element. This attribute is limited to interactive form control elements in HTML 4. IE 5.5 and later (Win32 only) also applies this attribute to most other renderable elements. Disabled elements are usually “greyed out” to distinguish themselves from other elements.

Example

<input type="submit" name="sender" disabled="true">

Value

true | false

Default

false

Object Model Reference

[window.]document.getElementById(elementID).disabled

hidefocus:IE 5.5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

hidefocus=" featureSwitch "

Boolean switch that enables or disables the browser’s ability to display a dotted focus rectangle around an element that has focus. The element continues to be able to receive focus if it is focusable by default or has the tabindex attribute set. Focus is necessary for some keyboard-only accessibility situations, but when this attribute is switched on, there is no visual clue about the focus state. Requires IE 5.5 or later (Win32 only).

Example

<input type="image" src="sendme.jpg" hidefocus="true">

Value

true | false

Default

false

Object Model Reference

[window.]document.getElementById(elementID).hideFocus

id:IE 4 NN 4 Moz 0.9 Saf 1 Op 7 HTML 4: Optional

 

id=" elementIdentifier "

A unique identifier that distinguishes this element from all the rest in the document. Can be used to associate a single element with a style rule naming this attribute value as an ID selector. An element can have an ID assigned for uniqueness as well as a class for inclusion within a group. See Online Section III.

Most browsers allow id attributes for nonrenderable elements, but if your code requires validation, be aware that the W3C HTML 4 and XHTML DTDs do not. Because all W3C DOM element objects have an id property, it is natural to assign an id attribute to non-renderable elements if scripts must reference those elements. Or, your scripts may use other ways (e.g., the array returned by document.getElementsByTagName( )) to reference such elements.

Assign identifiers to id attributes in order to duplicate values previously only assigned to name attributes in elements that feature the name attribute. Current browser form controls still require name attributes for name/value pairs to be submitted with the form, and a elements acting as anchors still need name attributes. Be sure to assign an identifier to the id attribute of any element you intend to reference by script.

Example

<h2 id="sect3Head">Section Three</h2>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).id

lang:IE 4 NN 3 Moz 0.9 Saf 1 Op 9 HTML 4: Optional

 

lang=" languageCode "

The language being used for the element’s attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices.

Example

<span lang="de">Deutsche Bundesbahn</span>

Value

Case-insensitive language code.

Default

Browser default.

Object Model Reference

[window.]document.getElementById(elementID).lang

repeat, repeat-max, repeat-min, repeat-start, repeat-template:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

(See text)

Web Forms 2.0 (http://www.whatwg.org) lets you turn any HTML element into a repetition block, that is, one or more elements, which, as a group, require an unpredictable number of instances in a document. For example, an order form set up as a table element with a row containing fields for quantity and product number could begin with a two text entry controls (one would be an input of type number, while the other of type text with a pattern that matches the product numbering system for the company; as entries are made, an AJAX call in the background fetches the cost for display in another cell in the table row). If the user wishes to add to the order, the form needs a second row containing the same controls, but named differently so that the browser submits distinct data for each row. While DHTML scripts are capable of such actions with tables, the Web Forms 2.0 repetition block mechanism handles addition, deletion, and movement of repeated elements without scripting.

To make a table row (or other HTML container) a repetition block, assign the repeat attribute, as follows:

<tr id="item" repeat="template">
    <td><input type="number" name="row[item].quantity" value="1"></td>
    <td><input type="text" name="row[item].product" value=""></td>
    ...
</tr>

Notice that the names for each control have what looks like JavaScript array notation, with the ID of the repetition block (item in this case) inserted as the array index. When the form is submitted, the array notation is replaced in the control’s name with an integer beginning with 0 for the first item (e.g., row0.quantity and row0.product for the first row).

Repetition blocks are controlled by input or button elements of type add, move-down, move-up, and remove. The template attribute of these controls point to the ID of the repetition block’s outer container (the one with the repeat="template" attribute).

If you wish to begin layout of the form with a starting number of rows, you only need to compose the HTML for one row, and set the repeat-start attribute to the number of rows to appear initially. Similarly, you may provide upper and lower limits to the number of repetitions to be added or removed by setting the repeat-max and repeat-min attributes, respectively.

Example

<form action="..." method="POST">
<p>
<table>
<tr><th>Quantity</th><th>Item Number</th></tr>
<tbody>
    <tr id="item" repeat="template" repeat-start="2" repeat-min="1">
        <td><input type="number" name="row[item].quantity" value="1"></td>
        <td><input type="text" name="row[item].product" value=""></td>
        <td><input type="remove" /></td>
    </tr>
</tbody>
</table>
<button type="add" template="item">Add Item</button>
<p>
<input type="submit" />
</p>
</form>

Value

For repeat, the constant template or an integer for hard-coded items; for repeat-max, repeat-min, and repeat-start, an integer; for repeat-template, the ID of the element elsewhere in the document acting as the template.

Default

Maximum integer value (repeat-max); 0 (repeat-min); 0 (repeat-start in Opera, although the standard suggests 1).

style:IE 4 NN 4 Moz 0.9 Saf 1 Op 7 HTML 4: Optional

 

style=" styleSheetProperties "

This attribute lets you set one or more style sheet rule property assignments for the current element. You may use the CSS or (for Navigator 4 only) JavaScript syntax for assigning style attributes. Use the style attribute only with visible (renderable) elements.

Example

<span style="color: green; font-size: 18px">Big, green, and bold</span>

Value

An entire CSS-syntax style sheet rule is enclosed in quotes. Multiple style attribute settings are separated by semicolons. Style sheet attributes are detailed in Chapter 4.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).style

tabindex:IE 4 NN n/a Moz 0.9 Saf 1 Op 7 HTML 4: Optional

 

tabindex=" integer "

A number that indicates the sequence of this element within the tabbing order of all focusable elements in the document. Tabbing order follows a strict set of rules. Elements that have values other than zero assigned to their tabindex attributes are first in line when a user starts tabbing in a page. Focus starts with the element with the lowest tabindex value and proceeds in order to the highest value, regardless of physical location on the page or in the document. If two elements have the same tabindex values, the element that comes earlier in the document receives focus first. Next come all elements that either don’t support the tabindex attribute or have the value set to zero. These elements receive focus in the order in which they appear in the document. Note that reloading the current page does not necessarily restart the tabbing sequence from the “top.” Therefore, controlling tabbing sequence is most helpful when the logic of your focusable elements is something other than the source code order of those elements (e.g., directing tabbing to fields down table columns rather than across rows).

HTML 4 and many browsers limit the tabindex attribute to the following elements: a, area, button, input, object, select, textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, span, table, and td. IE 5 adds every other renderable element. A negative value in IE and Mozilla 1.8 or later removes an element from tabbing order entirely.

Example

<a href="chapter3.html" tabindex="3">Chapter 3</a>

Value

Any integer from 0 through 32,767. In IE and Mozilla 1.8 or later, setting tabindex to a negative value causes the element to be skipped in tabbing order altogether.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).tabIndex

title:IE 3 NN n/a Moz 0.9 Saf 1 Op 7 HTML 4: Optional

 

title=" advisoryText "

An advisory description of the element. For HTML elements that produce visible content on the page, modern browsers render the content of the title attribute as a tooltip when the cursor rests on the element for a moment. For example, the table-related col element does not display content, so its title attribute is merely advisory. To generate tooltips in tables, assign title attributes to elements such as table, tr, th, or td.

The font and color properties of the tooltip are governed by the browser, and are not modifiable under script control. In IE/Windows, the tooltip is the standard small, light-yellow rectangle; in IE/Mac, the tooltip displays as a cartoon bubble in the manner of the Mac OS bubble help system. Mozilla tooltips are the same small rectangle on all OS versions. If no attribute is specified, the tooltip does not display.

You can assign any descriptive text you like to this attribute. Not everyone will see it, however, so do not put mission-critical information here. Browsers designed to meet web accessibility criteria might use this attribute’s information to read information about a link or nontext elements to vision-impaired web surfers. Therefore, don’t ignore this potentially helpful aid to describing an element’s purpose on the page.

Although the compatibility listing for this attribute dates the attribute back to Internet Explorer 3 and HTML 3.2, it is newly ascribed to many elements starting with IE 4 and HTML 4.0.

Example

<span title="United States of America">U.S.A.</span>

Value

Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).title

unselectable:IE 5.5 NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

unselectable=" featureSwitch "

Boolean switch that enables or disables the user’s ability to select any portion of the element.

Example

<p unselectable="on">...</p>

Value

on | off

Default

off

xml:lang:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML X1.0: Optional

 

xml:lang=" languageCode "

This is the XML version of the HTML-only lang attribute, as specified in the W3C XML recommendation. Use this only in an XHTML-conforming document and in browsers that understand XML namespaces. XML processors other than current browsers can make content and display decisions based on values assigned to this attribute (e.g., display the element only if the browser and operating system support the language script style). Browser documents should continue to use the lang attribute, even when it duplicates the xml:lang attribute setting.

Example

<span lang="de" xml:lang="de">Deutsche Bundesbahn</span>

Value

Case-insensitive language code.

Shared Event Handler Attributes

Handler	IE/Windows	NN	Mozilla	IE/Mac	Safari	Opera	HTML
onactivate	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onbeforeactivate	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onbeforecopy	5	n/a	n/a	n/a	1.3/2	n/a	n/a
onbeforecut	5	n/a	n/a	n/a	1.3/2	n/a	n/a
onbeforedeactivate	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onbeforeeditfocus	5	n/a	n/a	n/a	n/a	n/a	n/a
onbeforepaste	5	n/a	n/a	n/a	1.3/2	n/a	n/a
onblur	3/4	2	0.9	3/4	1	4	4
onclick	3/4	2	0.9	3/4	1	4	4
oncontextmenu	5	n/a	n/a	n/a	1.2	n/a	n/a
oncontrolselect	5.5	n/a	n/a	n/a	n/a	n/a	n/a
oncopy	5	n/a	n/a	n/a	n/a	n/a	n/a
oncut	5	n/a	n/a	n/a	n/a	n/a	n/a
ondblclick	4	4	0.9	4	1	7	4
ondeactivate	5.5	n/a	n/a	n/a	n/a	n/a	n/a
ondrag	5	n/a	n/a	n/a	1.3/2	n/a	n/a
ondragend	5	n/a	n/a	n/a	1.3/2	n/a	n/a
ondragenter	5	n/a	n/a	n/a	1.3/2	n/a	n/a
ondragleave	5	n/a	n/a	n/a	1.3/2	n/a	n/a
ondragover	5	n/a	n/a	n/a	1.3/2	n/a	n/a
ondragstart	5	n/a	n/a	n/a	1.3/2	n/a	n/a
ondrop	5	n/a	n/a	n/a	1.3/2	n/a	n/a
onfilterchange	4	n/a	n/a	n/a	n/a	n/a	n/a
onfocus	3/4	2	0.9	3/4	1	4	4
onfocusin	6	n/a	n/a	n/a	n/a	n/a	n/a
onfocusout	6	n/a	n/a	n/a	n/a	n/a	n/a
onhelp	4	n/a	n/a	5	n/a	n/a	n/a
onkeydown	4	4	0.9	4	1	5	4
onkeypress	4	4	0.9	4	1	5	4
onkeyup	4	4	0.9	4	1	5	4
onlosecapture	5	n/a	n/a	n/a	n/a	n/a	n/a
onmousedown	4	4	0.9	4	1	5	4
onmouseenter	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onmouseleave	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onmousemove	4	4	0.9	4	1	5	4
onmouseout	3/4	2	0.9	3/4	1	4	4
onmouseover	3/4	2	0.9	3/4	1	4	4
onmouseup	4	4	0.9	4	1	5	4
onmousewheel	6	n/a	n/a	n/a	1.3/2	n/a	n/a
onmove	5.5	n/a	n/a	n/a	1	n/a	n/a
onmoveend	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onmovestart	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onpaste	5	n/a	n/a	n/a	n/a	n/a	n/a
onpropertychange	5	n/a	n/a	n/a	n/a	n/a	n/a
onreadystatechange	4	n/a	n/a	4	n/a	n/a	n/a
onresize	4	n/a	n/a	4	1.2	n/a	n/a
onresizeend	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onresizestart	5.5	n/a	n/a	n/a	n/a	n/a	n/a
onselectstart	4	n/a	n/a	4	1.3/2	n/a	n/a

The evolution of shared event handler attributes over the course of scriptable browser history is not straightforward. While all renderable elements have the common mouse and keyboard event handler attributes starting with IE 4, Mozilla 0.9, and HTML 4, the earlier browsers implemented only some of these event attributes and only for interactive elements. Elements that have always responded to mouse clicks (e.g., form button controls, links, and image maps) supported onclick events. Links and image maps also generally support mouseover and mouseout events going way back. Microsoft brings a large repertoire of event handler attributes to Windows-only versions of Internet Explorer, and Apple has adopted many of them in Safari 1.3/2 to be used primarily in Dashboard widgets. For more details on each event type and other types not listed here, see Chapter 3.

Alphabetical Tag Reference

<a>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<a>...</a>

The a element is the rare element that can be an anchor and/or a link, depending on the presence of the name and/or href attributes. As an anchor, the element defines a named location in a document to which any URL can reference by appending a hashmark and the anchor name to the document’s URI (for example, http://www.example.com/contents#a-c). Names are identifiers assigned to the name attribute (or in newer browsers, the id attribute). Content defined solely as an anchor is not (by default) visually differentiated from surrounding body content.

By assigning a URI to the href attribute, the element becomes the source of a hypertext link. Activating the link generally navigates to the URI assigned to the href attribute (or it may load other media into a helper application or plugin without changing the page). Unless modified by style sheets, links typically have a distinctive appearance in the browser, such as an underline beneath text (or border around an object) and a color other than the current content color. Attributes can define separate colors for three states: an unvisited link, a link being activated by the user, and a previously visited link (the linked document is currently in the browser cache). Such color control is deprecated in favor of CSS pseudo-classes (:link, :active, :visited, and a new state, :hover). An a element can be both an anchor and a link if, in the least, both the name (or id) and href attributes have values assigned to them.

Example

<a name="anchor3" id="anchor3">Just an anchor named "anchor3."</a>
<a href="#anchor3">A link to navigate to "anchor3" in the same document.</a>
<a name="anchor3" id="anchor3" href="http://www.example.com/index.html">
Go from here (anchor 3) to home page.</a>

Object Model Reference

[window.]document.links[i]
[window.]document.anchors[i]
[window.]document.getElementById(elementID)

Element-Specific Attributes

charset	coords	datafld	datasrc	href
hreflang	methods	name	rel	rev
shape	target	type	urn

Element-Specific Event Handler Attributes

None. Anchor-only a elements have no event handlers in Navigator through Version 4.

charset:IE n/a NN n/a Moz 0.9 Saf all Op 7 HTML 4: Optional

 

charset=" characterSet "

Character encoding of the content at the other end of the link.

Example

<a charset="csISO5427Cyrillic" href="moscow.html">Visit Moscow</a>

Value

Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).

Default

Determined by browser.

coords:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

coords=" coord1, ... coordN "

Although defined for the a element, the coords attribute applies to the area element for client-side image maps. The area element “inherits” many attributes and behaviors of the a element. See the area element.

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name in lieu of an href attribute for a link. The data source column must contain a valid URI (relative or absolute). A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

Example

<a datasrc="DBSRC3" datafld="newsURL">Late-Breaking News</a>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.links[i].dataFld
[window.]document.getElementById(elementID).dataFld

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source to be inserted into the a element text is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

Example

<a datasrc="DBSRC3" datafld="newsURL">Late-Breaking News</a>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.links[i].dataSrc
[window.]document.getElementById(elementID).dataSrc

href:IE all NN all Moz all Saf all Op 7 HTML all: Required for links

 

href=" URI "

The URI of the destination of a link. In browsers, when the URI is an HTML document, the document is loaded into the current (default) or other window target (as defined by the target attribute). For some other file types, the browser may load the destination content into a plugin or save the destination file on the client machine. In the absence of the href attribute, the element does not distinguish itself in a browser as a clickable link and may instead be only an anchor (if the name or id attribute is set).

Example

<a href="part1/chap3.html">Chapter 3</a>

Value

Any valid URI, including complete and relative URLs, anchors on the same page (anchor names prefaced with the # symbol), and the nonstandards-based javascript: pseudo-URL in scriptable browsers to trigger a script statement rather than navigate to a destination. Note that a link to a javascript: pseudo-URL will be inactive if scripting is disabled in a visitor’s browser. Moreover, search engine spiders won’t follow such links.

Default

None.

Object Model Reference

[window.]document.links[i].href
[window.]document.getElementById(elementID).href

Other link object properties allow for the extraction of components of the URL, such as protocol and hostname. See the a element in Chapter 2.

hreflang:IE 6 NN n/a Moz 09 Saf all Op n/a HTML 4: Optional

 

hreflang=" languageCode "

The language code of the content at the destination of a link. Requires that the href attribute also be set. This attribute is primarily an advisory attribute to help a browser prepare itself for a new language set if the browser is so enabled.

Example

<a hreflang="HI" href="hindi/Chap3.html>Chapter 3 (in Hindi)</a>

Value

Case-insensitive language code.

Default

Browser default.

methods:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

methods=" http-method "

An advisory attribute about the functionality of the destination of a link. A browser could use this information to display special colors or images for the element content based on what the destination will do for the user.

Example

<a href="http://www.example.com/cgi-bin/search?chap3" methods="get">
Chapter 3</a>

Value

Comma-delimited list of one or more HTTP methods.

Default

None.

Object Model Reference

[window.]document.links[i].Methods
[window.]document.getElementById(elementID).Methods

name:IE all NN all Moz all Saf all Op 7 HTML all: Required for anchors

 

name=" elementIdentifier "

The traditional way to signify an anchor position within a document. Other link elements can refer to the anchor by setting their href attributes to a URL ending in a pound sign (#) followed by the identifier. Omitting the name (and id) attribute for the a element prevents the element from being used as an anchor position. This attribute is interchangeable with the id attribute in recent browsers. The attribute is deprecated in XHTML 1.0, so you are encouraged to use both attributes (with the same identifier) to keep all browser generations happy. If the name and href attribute are set in the element, the element is considered both an anchor and a link.

Example

<a id="sect3" name="sect3">Section III</a>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.links[i].name
[window.]document.anchors[i].name
[window.]document.getElementById(elementID).name

rel:IE 3 NN n/a Moz 0.9 Saf all Op n/a HTML 4: Optional

 

rel=" linkTypes "

Defines the relationship between the current element and the destination of the link. Also known as a forward link, not to be confused in any way with the destination document whose address is defined by the href attribute. The HTML 4 recommendation defines several link types; it is up to the browser to determine how to employ the value. This attribute has meaning primarily for the link element, although there is significant room for future application for tasks such as assigning an a element (acting as a link) to a button in a static navigation bar pointing to the next or previous document in a series. The element must include an href attribute for the rel attribute to be applied.

Example

<a rel="next chapter" href="chapter3.html">Chapter 3</a>

Value

Case-insensitive, space-delimited list of HTML 4 standard link types applicable to the element. Sanctioned link types are:

alternate	appendix	bookmark	chapter
contents	copyright	glossary	help
index	next	prev	section
start	stylesheet	subsection

In addition, IE 3 defined a fixed set of four values: same | next | parent | previous, but only next and previous continue to be supported in IE.

Default

None.

Object Model Reference

[window.]document.links[i].rel
[window.]document.getElementById(elementID).rel

rev:IE 3 NN n/a Moz 0.9 Saf all Op n/a HTML 4: Optional

 

rev=" linkTypes "

A reverse link relationship. Like the rel attribute, the rev attribute’s capabilities are defined by the browser, particularly with regard to how the browser interprets and renders the various link types available in the HTML 4 specification. Given two documents (A and B) containing links that point to each other, the rev value of B is designed to express the same relationship between the two documents as denoted by the rel attribute in A. There is not yet much application of either the rel or rev attributes of the a element in mainstream browsers.

Example

<a rev="previous" href="chapter2.html">Chapter 2</a>

Value

Case-insensitive, space-delimited list of standard link types applicable to the element. See the rel attribute for sanctioned and supported link types.

Default

None.

Object Model Reference

[window.]document.links[i].rev
[window.]document.getElementById(elementID).rev

shape:IE n/a NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

shape=" shape "

Defines the shape of a server-side image map area whose coordinates are specified with the coords attribute. See the area element.

target:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

target=" windowOrFrameName "

If the destination document is to be loaded into a window or frame other than the current window or frame, you can specify where the destination document should load by assigning a window or frame name to the target attribute. Target frame names must be assigned to frames and windows as identifiers. Assign names to frames via the name and id attributes of the frame element; assign names to new windows via the second parameter of the window.open( ) scripting method. If you omit this attribute, the destination document replaces the document containing the link. An identifier other than one belonging to an existing frame or window opens a new window for the destination document. This attribute is applicable only when a value is assigned to the href attribute of the element.

A link element can have only one destination document and one target. If you want a link to change the content of multiple frames, you can use an a element’s onclick event handler to fire a script that loads multiple documents. Set the location.href property of each frame to a desired URL.

Strict DTDs for HTML 4 and XHTML do not support the target attribute of any element because frames and windows are outside the scope of pure document markup. In fact, framesetting documents will not validate in the strict environment—thus the purpose of the separate frameset DTDs for HTML 4 and XHTML. If your documents must validate with these strict DTDs, and you wish to support targets, use scripts to set target properties of links, image maps, and forms after the page has loaded.

Example

<a target="display" href="chap3.html#sec2">Section 3.2</a>
<a target="_top" href="index.html">Start Over</a>

Value

Case-sensitive identifier when the frame or window name has been assigned via the target element’s name and id attributes. Several reserved target names act as constants:

_blank

Browser creates a new window for the destination document.

_content

For Mozilla-based browsers only, when links appear in a browser sidebar and the destination is to be displayed in the primary content frame, regardless of its actual name.

_parent

Destination document replaces the current frame’s framesetting document (if one exists; otherwise, it is treated as _self).

_self

Destination document replaces the current document in its window or frame.

_top

Destination document is to occupy the entire browser window, replacing any and all framesets that may be loaded (also treated as _self if there are no framesets defined in the window).

Default

_self

Object Model Reference

[window.]document.links[i].target
[window.]document.getElementById(elementID).target

type:IE 6 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

type=" MIMEType "

An advisory about the content type of the destination document or resource. A browser might use this information to assist in preparing support for a resource requiring a multimedia player or plugin.

Example

<a type="video/mpeg" href="ski4.mpeg">View Devil's Ghost slope</a>

Value

Case-insensitive MIME type. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.

Default

None.

urn:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

urn=" urn "

A Uniform Resource Name version of the destination document specified in the href attribute. This attribute is intended to offer support in the future for the URN format of URI, an evolving recommendation under discussion at the IETF (see RFC 2141). Although supported in IE 4 and later, this attribute does not take the place of the href attribute.

Example

<a urn="urn:foo:bar3" href="chapter3.html">Chapter 3</a>

Value

A valid URN in the form of "urn: NamespaceID : NamespaceSpecificString ".

Default

None.

Object Model Reference

[window.]document.links[i].urn
[window.]document.getElementById(elementID).urn

<abbr>:IE n/a NN n/a Moz 0.9 Saf all Op 7 HTML 4: HTML End Tag: Required

 

<abbr>...</abbr>

The abbr element provides an encapsulation and enumeration mechanism for abbreviations that appear in the body text. For example, consider a web page that includes your company’s address. At one point in the document, the abbreviation IA is used for Iowa. A spelling checker, language translation program, or speech synthesizer might choke on this abbreviation; a search engine would not include the word “Iowa” in its relevancy rating calculation. But by turning the IA text into an abbr element (and assigning a title attribute to it), you can provide a full-text equivalent that a search engine (if so equipped) can count; a text-to-speech program would read aloud the full state name instead of some guttural gibberish. Like many elements introduced in HTML 4.0, this one is intended to assist browser technologies that may not yet be implemented but could find their way into products of the future.

Mozilla and Opera render the abbr element with a dotted underline. The context menu in Mozilla for such an element contains a Properties choice, which leads to a displayed list of attributes and their values for the visitor.

A related element, acronym, offers the same services for words that are acronyms. Both elements are part of a larger group of what the HTML 4.0 recommendation calls phrase elements.

Example

Ottumwa, <abbr title="Iowa">IA</abbr> 55334<br>
<abbr lang="de" title="und so weiter">usw.</abbr>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<acronym>:IE 4 NN n/a Moz 0.9 Saf all Op 7 HTML 4: HTML End Tag: Required

 

<acronym>...</acronym>

The acronym element provides an encapsulation and enumeration mechanism for acronyms that appear in the body text. For example, consider a web page that includes a discussion of international trade issues. At one point in the document, the acronym GATT is used for General Agreement on Tariffs and Trade. A spelling checker, language translation program, or speech synthesizer might choke on this acronym; a search engine would not include the word “tariffs” in its relevancy rating calculation. But by turning the GATT text into an acronym element (and assigning a title attribute to it), you can provide a full-text equivalent that a search engine (if so equipped) can count; a text-to-speech program would read aloud the full meaning of the acronym. Like many elements introduced in HTML 4.0, this one is intended to assist browser technologies that may not yet be implemented but could find their way into products of the future.

Mozilla and Opera render the acronym element with a dotted underline. The context menu in Mozilla for such an element contains a Properties choice, which leads to a displayed list of attributes and their values for the visitor.

A related element, abbr, offers the same services for words that are abbreviations. Both elements are part of a larger group of what the HTML 4 recommendation calls phrase elements.

Example

<acronym title="General Agreement on Tariffs and Trade">GATT</acronym>
<acronym lang="it" title="Stati Uniti">s.u.</acronym>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<address>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<address>...</address>

Prior to HTML 4, the address element was often regarded as a display formatting tag appropriate for displaying a page author’s contact information on the page. Mainstream browsers display address elements in an italic font. But the increased focus on separating content from presentation in HTML 4 adds some extra meaning to this element. Search engines and future HTML (or XML) parsers may apply special significance to the content of this element, perhaps in cataloging author information separate from the hidden information located in meta elements. If you want to use this structural meaning of the element while keeping the rendering in line with the rest of your body text, you need to assign style sheet rules to override the browser’s default formatting tendencies for this element. Any standard body elements, such as links, can be contained inside an address element.

Example

<address>
<p>Send comments to:<a href="mailto:[e-mail]">[e-mail]</a>
</p>
</address>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<applet>:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<applet>...</applet>

You can embed an executable chunk of Java code in an HTML document in the form of an applet. An applet occupies a rectangular area of the page, even if it is only one-pixel square. An applet may require that some initial values be set from the HTML document. One or more param elements can be used to pass parameters to the applet before the applet starts running (provided the applet is written to accept these parameters). param elements go between the start and end tags of an applet element.

Applets are compiled by their authors into class files (filename suffix .class). An applet class file must be in the same directory as, or a subdirectory of, the HTML document that loads the applet. Key attributes of the applet element direct the browser to load a particular class file from the necessary subdirectory.

All user interface design for the applet is programmed into the applet in the Java language. One of the roles of attributes in the applet element is to define the size and other geographical properties of the applet for its rendering on the page. Recent browsers allow JavaScript scripts to communicate with the applet, as well as allowing applets to access document elements.

Note that HTML 4 deprecates the applet element in favor of the more generic object element. Support for embedding applets via the object element is improving, but is not universal. Browser support for the applet element will continue for some time to come, however.

Example

<applet code="simpleClock.class" name="myClock" width="400" height="50">
<param name="bgColor" value="black">
<param name="fgColor" value="yellow">
</applet>

Object Model Reference

[window.]document.applets[i]
[window.]document.appletName
[window.]document.getElementById(elementID)

Element-Specific Attributes

align	alt	archive	code	codebase
datafld	datasrc	height	hspace	mayscript
name	object	src	vspace	width

Element-Specific Event Handler Attributes

Handler	IE	Others	HTML
onafterupdate	4	n/a	n/a
onbeforeupdate	4	n/a	n/a
ondataavailable	4	n/a	n/a
ondatasetchanged	4	n/a	n/a
ondatasetcomplete	4	n/a	n/a
onerrorupdate	4	n/a	n/a
onrowenter	4	n/a	n/a
onrowexit	4	n/a	n/a

align:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" alignmentConstant "

The align attribute determines how the rectangle of the applet aligns within the context of surrounding content. See the "Alignment Constants" earlier in this chapter for description of the possibilities defined in various browsers for this attribute.

Example

<applet code="simpleClock.class" name="myClock" align="absmiddle"
width="400" height="50"></applet>

Value

Case-insensitive constant value.

Default

bottom

Object Model Reference

[window.]document.applets[i].align
[window.]document.appletName.align
[window.]document.getElementById(elementID).align

alt:IE 3 NN 3 Moz all Saf all Op 7 HTML 3.2: Optional

 

alt=" textMessage "

If a browser does not have the facilities to load and run Java applets or if the browser has Java support turned off in its preferences, the text assigned to the alt attribute is supposed to display in the document where the applet element’s tag appears. Typically, this text provides advice on what the page visitor is missing by not being able to load the Java applet. Unlike the noscript or noframes elements, there is no corresponding element for an absent Java applet capability. In practice, browsers don’t necessarily display this message for applets that fail to load for a variety of reasons.

Example

<applet code="simpleClock.class" name="myClock" align="absmiddle"
alt="A Java clock applet." width="400" height="50"></applet>

Value

Any quoted string of characters.

Default

None.

archive:IE 7 NN 3 Moz all Saf all Op 7 HTML 4: Optional

 

archive=" archiveFileURL "

An author can package multiple Java class files into a single uncompressed .zip archive file and let the browser load the entire set of classes at one time. This can offer a performance improvement over loading just the main class file (specified by the code attribute) and then letting the class loader fetch each additional class file as needed. The archive attribute value points to the .zip archive file.

In addition to specifying the archive attribute, be sure to include a code attribute that names the main class to load. The URL must also be relative to the codebase location.

The HTML specification allows multiple URLs to be specified (in a space-delimited list) for additional class or other resource files. This design anticipates the use of the same attribute with the object element, which the W3C has deemed the successor to the applet element.

Example

<applet code="ScriptableClock.class" archive="myClock.zip" width="400" height="50">
</applet>

Value

Case-sensitive URI.

Default

None.

Object Model Reference

[window.]document.applets[i].archive
[window.]document.appletName.archive
[window.]document.getElementById(elementID).archive

code:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Required

 

code=" fileName.class "

The name of the main class file that starts and runs the applet. If the codebase attribute is not specified, the code attribute must include a path from the directory that stores the HTML document loading the applet. You might get away with omitting the .class filename extension, but don’t take any chances: be complete with the class name. Most servers are case-sensitive, so also match case of the actual class filename.

Example

<applet code="applets/ScriptableClock.class" width="400" height="50">
</applet>

Value

Case-sensitive .class filename or complete path relative to the HTML document.

Default

None.

Object Model Reference

[window.]document.applets[i].code
[window.]document.appletName.code
[window.]document.getElementById(elementID).code

codebase:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Optional

 

codebase=" path "

Path to the directory holding the class file designated in either the code or archive attribute. The codebase attribute does not name the class file, just the path. You can make this attribute a complete URL to the directory, but don’t try to access a codebase outside of the domain of the current document: security restrictions may prevent the class from loading. A full path and filename can be set together in the code or object attribute, eliminating the need for the codebase attribute setting.

Example

<applet code="ScriptableClock.class" codebase="applets/" width="400" height="50">
</applet>

Value

Case-sensitive pathname, usually relative to the directory storing the current HTML document.

Default

None.

Object Model Reference

[window.]document.applets[i].codeBase
[window.]document.appletName.codeBase
[window.]document.getElementById(elementID).codeBase

datafld, datasrc

See the param element for IE data binding to Java applets.

height, width:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Required

 

width=" pixels " height=" pixels "

The size that a Java applet occupies in a document is governed by the height and width attribute settings. Some browser versions might allow you to get away without assigning these attributes, letting the applet’s own user interface design determine the height and width of its visible rectangle. As with images, however, it is more efficient for the browser’s rendering engine when you explicitly specify the object’s dimensions. Make a habit of supplying these values for all applets, as you should for all images or other visible external objects.

Example

<applet code="ScriptableClock.class" width="400" height="50"></applet>

Value

Positive integer pixel values. You cannot entirely hide an applet by setting values to zero, but you can reduce its height and width to one pixel in each dimension. If you want to hide an applet, do so with DHTML by setting its positioning display attribute to none.

Default

None.

Object Model Reference

[window.]document.applets[i].height
[window.]document.appletName.height
[window.]document.getElementById(elementID).height
[window.]document.applets[i].width
[window.]document.appletName.width
[window.]document.getElementById(elementID).width

hspace, vspace:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Optional

 

hspace=" pixels " vspace=" pixels "

You can put some empty space (“air”) between an applet and any surrounding content by assigning pixel values to the hspace and vspace attributes. The vspace attribute governs space above and below the applet; the hspace attribute governs space to the left and right of the applet. For browsers that are style sheet savvy, you are perhaps better served by using the padding and/or margin CSS properties to gain control down to individual sides, if you so desire.

Example

<applet code="ScriptableClock.class" width="400" height="50" hspace="3" vspace="4">
</applet>

Value

Positive integer pixel values (optionally quoted).

Default

0

Object Model Reference

[window.]document.applets[i].hspace
[window.]document.appletName.hspace
[window.]document.getElementById(elementID).hspace
[window.]document.applets[i].vspace
[window.]document.appletName.vspace
[window.]document.getElementById(elementID).vspace

id:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

id=" elementIdentifier "

A unique identifier that distinguishes this element from others in the document. Can be used to associate a single element with a style rule naming this attribute value as an ID selector. An element can have an ID assigned for uniqueness as well as a class for inclusion within a group. See Online Section III.

If you assign an id attribute and not a name attribute, the value of the id attribute can be used as the applet’s name in script reference forms that use the element name (document.appletName).

Example

<applet id="clocker" code="ScriptableClock.class" width="400" height="50">
</applet>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.applets[i].id
[window.]document.appletName.id
[window.]document.getElementById(elementID).id

mayscript:IE 4 NN 3 Moz 1.7.5 Saf all Op n/a HTML n/a: Optional

 

mayscript

Navigator 3 introduced a technology called LiveConnect, which allowed scripts to communicate with Java applets and vice versa (not yet implemented in Mozilla-based browsers). For security reasons, an applet’s communications facilities with scripts must be explicitly switched on by the page author. By adding the mayscript attribute to the applet’s tag, an applet that is written to take advantage of the document objects and scripts can address those items. In other words, the HTML is granting the applet the ability to reach scripts in the document. This attribute is a simple switch: when the attribute name is present, it is turned on.

One more step is required for an applet to communicate with JavaScript. The applet code must import a special Netscape class called JSObject.class. This class file and its companion exception class are built into the Java support in the Windows version of Internet Explorer 4 and later. Although the execution is not perfect in IE, applets can perform basic communication with scripts. Some Mozilla-based browser user installations require the installation of a Java runtime module/plugin to operate correctly.

Example

<applet code="ScriptableClock.class" width="400" height="50" mayscript>
</applet>

Value

No value assigned to the attribute. The presence of the attribute name sets turns on applet-to-script communication.

Default

Off.

name:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Optional

 

name=" elementIdentifier "

If you are scripting an applet, it is usually more convenient to create a reference to the applet by using a unique name you assign to the applet. Then, if you edit the page and move or delete multiple applets on the page, you do not have to worry about adjusting index values to array-style references. In IE 4 and later or W3C DOM-compatible browsers, you have the option of omitting the name attribute and using the id attribute value in script references to the applet object.

Example

<applet name="clock2" code="ScriptableClock.class" width="400" height="50">
</applet>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.applets[i].name
[window.]document.appletName.name
[window.]document.getElementById(elementID).name

object:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

object=" filename "

Reference to the name of the file (relative to the codebase URI) that preserves the applet’s state between sessions. When supported properly, this attribute replaces the code attribute, and the data file points to the applet’s startup class file.

Example

<applet name="clock2" object="clockData.dat" width="400" height="50">
</applet>

Value

Case-sensitive filename.

Default

None.

Object Model Reference

[window.]document.applets[i].object
[window.]document.appletName.object
[window.]document.getElementById(elementID).object

src:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

src=" URL "

Internet Explorer defines this attribute as the URL for an “associated file.” This may be the same as the archive attribute defined in HTML and Navigator specifications. The src attribute is not a substitute for the code and/or codebase attributes.

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.applets[i].src
[window.]document.appletName.src
[window.]document.getElementById(elementID).aex

vspace

See hspace.

width

See height.

<area>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Forbidden

 

<area>

A map element defines a client-side image map that is ultimately associated with an image or other object that occupies space on the page. The only job of the map element is to assign a name and a tag context for one or more area element definitions. Each area element defines how the page should respond to user interaction with a specific geographical region of the image or other object.

A client-side image map area can act like an a element link in that an area can link to a URL and assign another frame or window as the target for loading a new document. In fact, in the original scripting document object model, an area element is referenced as a link. It is not uncommon to use client-side area maps in a navigation bar occupying a slender frame of a frameset. This allows an artist to be creative with a menu design, while giving the page author the power to turn any segment of a larger image into a special-purpose link.

Example

<map name="nav">
<area coords="20,30,120,70" href="contents.html" target="display">
<area coords="20,80,145,190" href="contact.html" target="display">
</map>

Object Model Reference

[window.]document.links[i]
[window.]document.getElementById(elementID)

Element-Specific Attributes

alt	coords	href	nohref	shape
target

Element-Specific Event Handler Attributes

None.

alt:IE 3 NN n/a Moz all Saf all Op 7 HTML 3.2: Required

 

alt=" textMessage "

Nongraphical browsers can use the alt attribute setting to display a brief description of the meaning of the (invisible) image’s hotspots. Keep in mind that recent handheld computers usually have nongraphical browsers (or allow graphics to be turned off for improved performance). Don’t ignore the graphically impaired.

Example

<area coords="20,30,120,70" href="contents.html" target="display"
alt="Table of Contents">

Value

Any quoted string of characters.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).alt

coords:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

coords=" coord1, ... coordN "

Although the formal W3C definition for the coords attribute of an area element states that the attribute is optional, that doesn’t mean that you can omit this attribute and expect an area to behave as it should. The coords attribute lets you define the outline of the area to be associated with a particular link or scripted action. Some third-party authoring tools can assist in determining the coordinate points for a hot area. You can also load the image into a graphics program that displays the cursor position in real time and then transfer those values to the coords attribute values.

Coordinate values are entered as a comma-delimited list. If two areas overlap, the area that is defined earlier in the HTML code takes precedence.

Example

<area coords="20,30,120,70" href="contents.html" target="display">

Value

Each coordinate is a length value, but the number of coordinates and their order depend on the shape specified by the shape attribute, which may optionally be associated with the element. For shape="rect", there are four coordinates (left, top, right, bottom); for shape="circle", there are three coordinates (center-x, center-y, radius); for shape="poly", there are two coordinate values for each point that defines the shape of the polygon (x1, y1, x2, y2, x3, y3,...xN, yN).

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).coords

href:IE all NN all Moz all Saf all Op 7 HTML 3.2: Required

 

href=" URI "

The URI of the destination of a link associated with the area. In a browser, when the URI is an HTML document, the document is loaded into the current (default) or other window target (as defined by the target attribute). For some other file types, the browser may load the destination content into a plugin or save the destination file on the client machine. Because some older browsers treat area elements as a elements, the href attribute must be defined in the area element for scripts in the old DOM to access various properties about the URL and for event handlers (such as onmouseover) to work.

Example

<area coords="20,30,120,70" href="contents.html" target="display">

Value

Any valid URI, including complete and relative URLs, anchors on the same page (anchor names prefaced with the # symbol), and the javascript: pseudo-URL in scriptable browsers to trigger a script statement rather than navigate to a destination.

Default

None.

Object Model Reference

[window.]document.links[i].href
[window.]document.getElementById(elementID).href

Other link object properties allow for the extraction of components of the URL, such as protocol and hostname. See the link object in Chapter 2.

nohref:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

nohref

Tells the browser that the area defined by the coordinates has no link associated with it (as not including any href attribute does). When you include this attribute, scriptable browsers no longer treat the element as a link. When an area element lacks an href attribute, the element no longer responds to user events. In IE 4 or later and W3C DOM browsers, you can turn this attribute on and off from a script by setting the corresponding noHref property to true or false.

Example

<area coords="20,30,120,70" nohref>

Value

The presence of this attribute sets its value to true. Extend for XHTML compliance by using nohref="nohref".

Default

Off.

Object Model Reference

[window.]document.getElementById(elementID).noHref

shape:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

shape=" shapeName "

Defines the shape of the client-side area map whose coordinates are specified with the coords attribute. The shape attribute tells the browser how many coordinates to expect.

Example

<area shape="poly" coords="20,20,20,70,65,45" href="contents.html"
target="display">

Value

Case-insensitive shape constant. Each implementation defines its own set of shape names and equivalents, but there are common denominators across browsers (circle, rect, poly, and polygon).

Shape name	IE	Others	HTML
circ	·	—	·
circle	·	·	·
poly	·	·	·
polygon	·	·	—
rect	·	·	·
rectangle	·	—	—

Default

rect

Object Model Reference

[window.]document.getElementById(elementID).shape

target:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

target=" windowOrFrameName "

If the destination document is to be loaded into a window or frame other than the current window or frame, you can specify where the destination document should load by assigning a window or frame name to the target attribute. Target frame names must be assigned to frames and windows as identifiers. Assign names to frames via the name and id attributes of the frame element; assign names to new windows via the second parameter of the window.open( ) scripting method. If you omit this attribute, the destination document replaces the document containing the link. This attribute is applicable only when a value is assigned to the href attribute of the element.

An area element can have only one destination document and one target. If you want a link to change the content of multiple frames, you can use an area element’s onclick event handler (check Chapter 2 for supported browser versions) to fire a script that loads multiple documents. Set the location.href property of each frame to the desired URL.

Strict DTDs for HTML 4 and XHTML do not support the target attribute of any element because frames and windows are outside the scope of pure document markup. In fact, framesetting documents will not validate in the strict environment—thus the purpose of the separate frameset DTDs for HTML 4 and XHTML. If your documents must validate with these strict DTDs, and you wish to support targets, use scripts to set target properties of links, image maps, and forms after the page has loaded.

Example

<area coords="20,30,120,70" href="contents.html" target="display">
<area coords="140,30,180,70" href="index.html" target="_top">

Value

Case-sensitive identifier when the frame or window name has been assigned via the target element’s name and id attributes. Several reserved target names act as constants:

_blank

Browser creates a new window for the destination document.

_content

For Mozilla-based browsers only, when links appear in a browser sidebar and the destination is to be deisplayed in the primary content frame, regardless of its actual name.

_parent

Destination document replaces the current frame’s framesetting document (if one exists; otherwise, it is treated as _self).

_self

Destination document replaces the current document in its window or frame.

_top

Destination document is to occupy the entire browser window, replacing any and all framesets that may be loaded (also treated as _self if there are no framesets defined in the window).

Default

_self

Object Model Reference

[window.]document.links[i].target
[window.]document.getElementById(elementID).target

<b>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<b>...</b>

The b element—one of several font style elements in HTML 4—renders its content in a boldface version of the font face governing the next outermost HTML container. You can nest multiple font style elements to create combined styles, such as bold italic (<b><i>bold-italic text</i></b>).

It is up to the browser to fatten boldface display by calculating the character weight or by perhaps loading a bold version of the currently specified font. If you are striving for font perfection, it is best to use style sheets (and perhaps downloadable fonts if supported by your target browsers) to specify a true bold font family, rather than risk the browser’s extrapolation of a boldface from a system font. The font-weight CSS style property provides quite granular control over the degree of bold applied to text if the font face supports such fine-tuning.

You can take advantage of the containerness of this element by assigning style sheet rules to some or all b elements in a page. For example, you may wish all b elements to be in a red color. By assigning the style rule b {color:red}, you can do it to all elements with only a tiny bit of code.

Although this element is not deprecated in HTML 4 or XHTML 1.0, it is losing favor to style sheets.

Example

<p>This product is <b>new</b> and <b>improved</b>!</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<base>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Forbidden

 

<base>

A base element is defined inside a document’s head element to instruct the browser about the URL path to the current document. This path is used as the basis for all relative URLs used to specify various src and href attributes in the document. The base element’s URL should be a complete URL, including the document name (though browsers tend to support URLs to directories, too). The browser calculates the base URL path to the directory holding the document. If you specify <base href="http://www.example.com/products/index.html">, the href attribute of a link on that page to widgets/framitz801.html resolves to the full URL of http://www.example.com/products/widgets/framitz801.html. Similarly, a relative URL can walk up the hierarchy with the dot syntax. For example, from the base element defined earlier, an img element in the index.html page might be set for src="../images/logo.jpg". That reference resolves to http://www.example.com/images/logo.jpg.

By and large, today’s browsers automatically calculate the base URL of the currently loaded document, thus allowing use of relative URLs without specifying a base element. This is especially helpful when you are developing pages locally and don’t want to change the base element settings when you deploy the pages. The HTML 4 specification states that a document lacking a base element should by default use the current document’s URL as the base URL.

You can also use the base element to define a default target for any link-type element in the document. Therefore, if all links are supposed to load documents into another frame, you can specify this target frame once in the base tag and not worry about target attributes elsewhere in the document. If you wish to override the default for a single link, you may do so by specifying the target attribute for that element (but see the note in the target attribute).

The only attribute this element has in common with other elements is the id attribute.

Example

<head>
<base href="http://www.example.com/index.html" target="_top">
</head>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

href

target

Element-Specific Event Handler Attributes

None.

href:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

href=" URL "

The href attribute is a URL of a document whose server path is to be used as the base URL for all relative references in the document. This is typically the URL of the current document, but it can be set to another path if it makes sense to your document organization and directory structure.

Example

<base href="http://www.example.com/products/index.html">

Value

This should be a full and absolute URL to a document.

Default

Current document pathname.

Object Model Reference

[window.]document.getElementsByTagName("base")[0].href
[window.]document.getElementById(elementID).href

target:IE all NN all Moz all Saf all Op 7 HTML 4: Optional

 

target=" windowOrFrameName "

If all or most links and area maps on a page load documents into a separate window or frame, you can set the target attribute of the base element to take care of targeting for all of those elements. You can set the target attribute without setting the href attribute if you want to set only the base target reference.

Strict DTDs for HTML 4 and XHTML do not support the target attribute of any element because frames and windows are outside the scope of pure document markup. In fact, framesetting documents will not validate in the strict environment—thus the purpose of the separate frameset DTDs for HTML 4 and XHTML. If your documents must validate with these strict DTDs, and you wish to support targets, use scripts to set target properties of links, image maps, and forms after the page has loaded.

Example

<base target="rightFrame">

Value

Case-sensitive identifier when the frame or window name has been assigned via the target element’s name attribute. Several reserved target names act as constants:

_blank

Browser creates a new window for the destination document.

_content

For Mozilla-based browsers only, when links appear in a browser sidebar and the destination is to be deisplayed in the primary content frame, regardless of its actual name.

_parent

Destination document replaces the current frame’s framesetting document (if one exists; otherwise, it is treated as _self).

_self

Destination document replaces the current document in its window or frame.

_top

Destination document is to occupy the entire browser window, replacing any and all framesets that may be loaded (also treated as _self if there are no framesets defined in the window).

Default

_self

Object Model Reference

[window.]document.getElementsByTagName("base")[0].target
[window.]document.getElementById(elementID).target

<basefont>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Forbidden

 

<basefont>

A basefont element advises the browser of some font information to be used as the basis for text rendering of the current page below the basefont element. You can apply this element in either the head or body portion of the document (although Microsoft recommends in the body only for IE 4 and later), and you can insert basefont elements as often as is needed to set the base font for a portion of the document. Be aware that basefont element settings do not necessarily apply to content in tables. If you want table content to resemble a custom basefont setting, you likely have to set the font styles to table elements separately.

The basefont element overrides the default font settings in the browser’s user preferences settings. Like most font-related elements, the basefont element is deprecated in HTML 4 in favor of style sheets, and is removed from the HTML 4 and XHTML strict DTDs.

Example

<basefont face="Times, serif" size="4">

Element-Specific Attributes

color

face

name

size

Element-Specific Event Handler Attributes

None.

color:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

color=" colorTripletOrName "

Sets the font color of all text below the basefont element. Deprecated in HTML 4 in favor of the color CSS property.

Example

<basefont color="Olive">

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

Browser default.

Object Model Reference

[window.]document.getElementsByTagName("basefont")[0].color

face:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

face=" fontFaceName1[, ... fontFaceNameN] "

You can assign a hierarchy of font faces to use for the default font of a section headed by a basefont element. The browser looks for the first font face in the comma-delimited list of font face names until it either finds a match in the client system or runs out of choices, at which point the browser default font face is used. Font face names must match the system font face names exactly. If you use this attribute (instead of the preferred style sheet property), you can always suggest a generic font face (serif, sans-serif) as the final choice. Deprecated in HTML 4 in favor of the font-family CSS property.

In IE 3, this attribute was called the name attribute.

Example

<basefont face="Bookman, Times Roman, serif">

Value

One or more font face names, including the recognized generic faces: serif | sans-serif | cursive | fantasy | monospace.

Default

Browser default.

Object Model Reference

[window.]document.getElementsByTagName("basefont")[0].face

name:IE |3| NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

name=" fontFaceName "

This was IE 3’s version of what is today the face attribute. It accepts a single font face as a value. The name attribute is no longer used.

Value

A single font face name.

Default

Browser default.

size:IE all NN n/a Moz all Saf all Op 7 HTML 3.2: Optional

 

size=" integerOrRelativeSize "

Font sizes referenced by the size attribute are on a relative size scale that is not tied to any one point size across operating system platforms. The default browser font size is 3. The range of acceptable values for the size attribute are integers from 1 to 7 inclusive. The exact point size varies with the operating system and browser design.

Users can often adjust the default font size in preferences settings. The size attribute overrides that setting. Moreover, size values can be relative to whatever font size is set in the preferences. By preceding an attribute value with a + or − sign, the browser’s default size can be adjusted upward or downward, but always within the range of 1 through 7.

Example

<basefont size="4">
<basefont size="+3">

Value

Either an integer or relative value, consisting of a + or − symbol and an integer value.

Default

3

Object Model Reference

[window.]document.getElementsByTagName("basefont")[0].size

<bdo>:IE 5 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<bdo>...</bdo>

The name of the bdo element stands for bidirectional override. The lang and dir attributes of most elements are designed to take care of most situations involving the mixture of writing systems that compose text in opposite directions. The bdo element is designed to assist in instances when the normal bidirectional algorithms must be explicitly overridden, due to various conversions during text processing.

Example

<bdo dir="ltr">someMixedScriptTextHere</bdo>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<bgsound>:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: HTML End Tag: Optional

 

<bgsound>

This Internet Explorer-only attribute lets you define a sound file that is to play in the background while the user visits the page. The element is allowed only inside the head element. With scripting, you can control the volume and how many times the sound track plays even after the sound file loads. Although an end tag is optional, there is no need for it because all specifications for the sound are maintained by attributes in the start tag. Only the id attribute is shared with other elements.

If you are going to use this tag, I strongly recommend making the background sound a user-selectable choice that is turned off by default. In office environments, it can be startling (if not embarrassing) to have background music or sounds unexpectedly emanate from a computer. Also be aware that there is likely to be some delay in the start of the music due to download time.

Example

<bgsound src="tunes/mazeppa.mid">

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

balance

loop

src

volume

Element-Specific Event Handler Attributes

None.

balance:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

balance=" signedInteger "

A value that directs how the audio is divided between the left and right speakers. Once this attribute value is set in the element, its value cannot be changed by script control.

Example

<bgsound src="tunes/mazeppa.mid" balance="+2500">

Value

A signed integer between −10,000 and +10,000. A value of 0 is equally balanced on both sides. A negative value gives a relative boost to the left side; a positive value boosts the right side.

Default

0

Object Model Reference

[window.]document.getElementsByTagName("bgsound")[0].balance

loop:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

loop=" integer"

Defines the number of times the sound plays. If the attribute is absent or is present with any value other than −1, the sound plays at least once. Assigning a value of −1 means that the sound plays until the page is unloaded. Contrary to Microsoft’s Internet Explorer SDK information, there does not appear to be a way to precache the sound without having it start playing.

Example

<bgsound src="tunes/mazeppa.mid" loop="3">

Value

No value assignment necessary for a single play. A value of 0 still causes a single play. Values above zero play the sound the specified number of times. Assign −1 to have the sound play indefinitely.

Default

−1

Object Model Reference

[window.] document.getElementsByTagName("bgsound")[0].loop

src:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

src=" URL "

A URL that points to the sound file to be played. The type of sound file that can be played is limited only by the audio facilities of the browser. Common audio formats, including MIDI, are supported in Internet Explorer without further plugin installation.

Example

<bgsound src="tunes/beethoven.mid">

Value

Any valid URL, including complete and relative URLs. The file must be in a MIME type supported by Internet Explorer or a plugin.

Default

None.

Object Model Reference

[window.] document.getElementsByTagName("bgsound")[0].src

volume:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

volume=" signedInteger "

An integer that defines how loud the background sound plays relative to the maximum sound output level as adjusted by user preferences in the client computer. Maximum volume—a setting of zero—is only as loud as the user has set in the Sound control panel. Attribute adjustments are negative values as low as −10,000 (although most users lose the sound at a value much higher than −10,000).

Example

<bgsound src="tunes/beethoven.mid" volume="−500">

Value

A signed integer value between −10,000 and 0.

Default

0

Object Model Reference

[window.] document.getElementsByTagName("bgsound")[0].volume

<big>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<big>...</big>

The big element—one of several font style elements in HTML 4—renders its content in the next font size (in HTML’s 1 through 7 scale) larger than the previous body font size. If you nest big elements, the effects on the more nested elements are cumulative, with each nested level rendered one size larger than the next outer element. Default font size is dependent upon the browser, operating system, and user preferences settings. For more precise font size rendering, use style sheet rules.

Example

<p>This product is <big>new</big> and <big>improved</big>!</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<blink>:IE n/a NN all Moz 1.01 Saf n/a Op 7 HTML n/a: HTML End Tag: Required

 

<blink>...</blink>

The blink element is Marc Andreessen’s contribution to horrifying web pages. All content of the element flashes on and off uncontrollably in a distracting manner. The more content you place inside the element, the more difficult it is to read between the flashes. Please don’t use this tag. I beg you.

Example

<blink>I dare you to read this...and not look at it.</blink>

<blockquote>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<blockquote>...</blockquote>

The blockquote element is intended to set off a long quote inside a document. Traditionally, the blockquote element has been rendered as an indented block, with wider left and right margins (about 40 pixels each), plus some extra whitespace above and below the block. Browsers will likely continue this type of rendering, although you are encouraged to use style sheets to create such displays (with or without the blockquote element). For inline quotations, see the q element.

Example

<blockquote>Four score and seven years ago...
shall not perish from the earth</blockquote>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

cite

Element-Specific Event Handler Attributes

None.

cite:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

cite=" URL "

A URL pointing to an online source document from which the quotation is taken. This is not in any way a mechanism for copying or extracting content from another document. Presumably, this HTML 4 recommendation is to encourage future browsers and search engines to utilize a reference to online source material for the benefit of readers and surfers. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream browsers provide no other functionality for this attribute.

Value

Any valid URL to a document on the World Wide Web, including absolute or relative URLs.

Default

None.

Element-Specific Event Handler Attributes

None.

<body>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<body>...</body>

After all of the prefatory material in the head portion of an HTML file, the body element contains the genuine content of the page that the user sees in the browser window (or may hear from browsers that know how to speak to users). Before style sheets, the body element was the place where page authors could specify document-wide color and background schemes. A great many favorite attributes covering these properties are deprecated in HTML 4, in favor of style sheet rules that may be applied to the body element. Support for all these attributes, however, will remain in mainstream browsers for years to come.

The body element is also where window object event handler attributes are placed. For example, a window object as defined in most document object models has an onload event handler that fires when a document has finished loading into the current window or frame. Assigning that event handler as an element attribute is done in the body element.

Although it may appear from a variety of implications that the body element is the document object, this is not true. The document object has additional properties (such as the document.title) that are defined outside of the body element in an HTML document. In a W3C-DOM-aware browser, the document node tree puts more distance between the root document node and the body element: the document node is the parent of the html element; the html element is the parent of both the head and body elements.

Example

<body background="watermark.jpg" onload="init( );">
...
</body>

Object Model Reference

[window.]document.body

Element-Specific Attributes

alink	background	bgcolor	bgproperties	bottommargin
leftmargin	link	marginheight	marginwidth	nowrap
rightmargin	scroll	text	topmargin	vlink

Element-Specific Event Handler Attributes

Handler	IE	NN	Mozilla	Safari	Opera	HTML
onafterprint	5	n/a	n/a	n/a	n/a	n/a
onbeforeprint	5	n/a	n/a	n/a	n/a	n/a
onload	3	2	m18	1	7	4
onresize	4	4	m18	1	7	n/a
onscroll	4	n/a	1.0.1	1	n/a	n/a
onselect	4	n/a	n/a	n/a	n/a	n/a
onunload	3	2	m18	1	7	4

alink:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

alink=" colorTripletOrName "

Establishes the color of a hypertext link when it is activated (being clicked on) by the user. This is one of three states for a link: unvisited, active, and visited. The color is applied to the link text or border around an image or object embedded within an a element. This attribute is deprecated in favor of the CSS :active pseudo-class style rule for an a element, as described in Chapter 4.

Example

<body alink="#FF0000">...</body>

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

#FF0000 (typically).

Object Model Reference

[window.]document.alinkColor
[window.]document.body.aLink

background:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

background=" URL "

Specifies an image file that is used as a backdrop to the text and other content of the page. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available document space in the browser window or frame. Smaller images usually download faster but are obviously repeated more often in the background. Animated GIFs are also allowable but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle or occupy space free of other content.

This attribute is deprecated in HTML 4 in favor of the background CSS property.

Example

<body background="watermark.jpg">...</body>

Value

Any valid URL to an image file, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.body.background

bgcolor:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the entire document. If you combine a bgcolor and background, any transparent areas of the background image let the background color show through. This attribute is deprecated in HTML 4 in favor of the background-color CSS property.

Example

<body bgcolor="tan">...</body>

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.bgColor
[window.]document.body.bgColor

bgproperties:IE 3 NN n/a Moz n/a Saf all Op n/a HTML n/a: Optional

 

bgproperties=" property "

An Internet Explorer attribute that lets you define whether the background image (set with the background attribute or style sheet) remains in a fixed position or scrolls as a user scrolls the page. This can provide both intriguing and odd effects for the user. When the background image is set to remain in a fixed position, scrolled content flows past the background image very much like film credits roll past a background image on the screen.

Example

<body background="watermark.jpg" bgproperties="fixed">...</body>

Value

If set to "fixed", the image does not scroll. Omit the attribute or set it to an empty string ("") to let the image scroll with the content.

Default

None.

Object Model Reference

[window.]document.body.bgProperties

bottommargin:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bottommargin=" integer "

Establishes the amount of blank space between the very end of the content and the bottom of a scrollable page. The setting has no visual effect if the length of the content or size of the window does not cause the window to scroll. The default value is for the end of the content to be flush with the end of the document, but in the Macintosh version of Internet Explorer, there is about a 10-pixel margin visible even when the attribute is set to zero. Larger sizes are reflected properly. This attribute offers somewhat of a shortcut to setting the margin-bottom style sheet property for the body element.

Example

<body bottommargin="20">...</body>

Value

A string value of the number of pixels of clear space at the bottom of the document. A value of an empty string is the same as zero.

Default

0

Object Model Reference

[window.]document.body.bottomMargin

leftmargin:IE 3 NN n/a Moz n/a Saf all Op 7 HTML n/a: Optional

 

leftmargin=" integer "

Establishes the amount of blank space between the left edge of the content area of a window and the left edge of the content. This attribute offers somewhat of a shortcut to setting the margin-left style sheet property for the body element. As the outermost parent container in the renderable element hierarchy, this attribute setting fixes the left margin context for all nested elements in the document.

Example

<body leftmargin="25">...</body>

Value

A string value of the number of pixels of clear space at the left margin of the document. A value of an empty string is the same as zero.

Default

10 (IE/Windows); 8 (Others).

Object Model Reference

[window.]document.body.leftMargin

link:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

link=" colorTripletOrName "

Establishes the color of a hypertext link that has not been visited (i.e., the URL of the link is not in the browser’s cache). This is one of three states for a link: unvisited, active, and visited. The color is applied to the link text or border around an image or object embedded within an a element. This attribute is deprecated in favor of the :link pseudo-class style rule for an a element, as described in Chapter 4).

Example

<body link="#00FF00">...</body>

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

#0000FF

Object Model Reference

[window.]document.linkColor
[window.]document.body.link

marginheight, marginwidth:IE n/a NN 4 Moz all Saf all Op 7 HTML n/a: Optional

 

marginheight=" integer "marginwidth=" integer "

Shortcut attributes to set the body’s margins in lieu of CSS style sheets. Setting marginheight to a pixel value establishes a margin setting above and below the body content; marginwidth sets margins to the left and right of the body.

Example

<body marginheight="20" marginwidth="10">...</body>

Value

A string value of the number of pixels of clear space at each of the two sides affected by each attribute. A value of an empty string is the same as zero.

Default

0

nowrap:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

nowrap

Controls whether wide content should wrap within the body width.

Example

<body nowrap>...</body>

Value

The presence of the attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.body.noWrap

rightmargin:IE 4 NN n/a Moz n/a Saf all Op 7 HTML n/a: Optional

 

rightmargin=" integer "

Establishes the amount of blank space between the right edge of the content area of a window and the right edge of the content. This attribute offers somewhat of a shortcut to setting the margin-right style sheet property for the body element. As the outermost parent container in the renderable element hierarchy, this attribute setting fixes the right margin context for all nested elements in the document. Be aware that IE on the Mac does not let content come as close to the right edge of the window as the Windows version.

Example

<body rightmargin="25">... </body>

Value

A string value of the number of pixels of clear space at the right margin of the document. A value of an empty string is the same as zero.

Default

10 (Windows); 0 (Macintosh).

Object Model Reference

[window.]document.body.rightMargin

scroll:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

scroll=" featureSwitch "

Controls the presence of scrollbars when the content space exceeds the size of the current window. Without scrollbars, if you want your users to move around the page, you have to provide some scripted method of adjusting the scroll of the window. Be aware that Internet Explorer for the Mac always shows scrollbars when the document is too large for the window, even when the scroll attribute is set to no. For more modern control over scrollbars, use the overflow CSS property (plus IE-specific overflowX and overflowY properties).

Example

<body scroll="no">...</body>

Value

Constant values yes or no (case-insensitive).

Default

yes

Object Model Reference

[window.]document.body.scroll

text:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

text=" colorTripletOrName "

Establishes the color of body content in the document. Colors of individual elements within the document can override the document-wide setting. Because the default background color of browsers varies widely with browser brand, version, and operating system, it is advisable to set the bgcolor attribute (or equivalent style sheet rule) in concert with the document’s text color. This attribute is deprecated in favor of the color style sheet property.

Example

<body bgcolor="#FFFFFF" text="#c0c0c0">...</body>

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

#000000 (black).

Object Model Reference

[window.]document.fgColor
[window.]document.body.text

topmargin:IE 3 NN n/a Moz n/a Saf all Op 7 HTML n/a: Optional

 

topmargin=" integer "

Establishes the amount of blank space between the top edge of the content area of a window and the top edge of the content. This attribute offers somewhat of a shortcut to setting the margin-top style sheet property for the body element. As the outermost parent container in the renderable element hierarchy, this attribute setting fixes the top margin context for all nested elements in the document. Setting the topmargin attribute to zero or an empty string ("") pushes the content to the very top of the document content region.

Example

<body topmargin="0">... </body>

Value

A string value of the number of pixels of clear space at the top of the document. A value of an empty string is the same as zero.

Default

15 (IE/Windows); 8 (others).

Object Model Reference

[window.]document.body.topMargin

vlink:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

vlink=" colorTripletOrName "

Establishes the color of a hypertext link after it has been visited by a user (and the destination page is still in the browser’s cache). This is one of three states for a link: unvisited, active, and visited. The color is applied to the link text or border around an image or object embedded within an a element. This attribute is deprecated in favor of the :visited pseudo-class style rule for an a element, as described in Chapter 4).

Example

<body vlink="teal">...</body>

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.vlinkColor
[window.]document.body.vLink

<br>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Forbidden

 

<br>

The br element forces a visible line break (carriage return and line feed) wherever its tag appears in the document. Browsers tend to honor the br element as a genuine line break, whereas paragraphs defined by the p element are given more vertical space between elements on the page. If the text containing the br element is wrapped around a floating image or other object, you can direct the next line (via the clear attribute or style sheet equivalent) to start below the object, rather than on the next line of the wrapped text.

Example

<p>I think that I shall never see<br>A poem lovely as a tree.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

clear

Element-Specific Event Handler Attributes

None.

clear:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

clear=" constant "

The clear attribute tells the browser how to treat the next line of text following a br element if the current text is wrapping around a floating image or other object. The value you use depends on the side of the page to which one or more inline images are pegged and how you want the next line of text to be placed in relation to those images.

This attribute is deprecated in HTML 4 in favor of the clear style sheet property in CSS2.

Example

<br clear="left">

Value

Four string constants: all | left | none | right. HTML 4.0 includes what should be the default value: none. This value is listed in IE 3 documentation, but not for IE 4. You can set the property to none, and the browser either responds to the value or ignores it (yielding the same results).

Default

none

Object Model Reference

[window.]document.getElementById(elementID).clear

<button>:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<button>...</button>

The button element is patterned after the input element (of types button, submit, and reset) but carries some extra powers, particularly when used as a submit-type button. Content for the button’s label goes between the element’s start and end tags, rather than being assigned as an attribute. Other elements can be used to generate the label content, including an img element if so desired (although client-side image maps of such images are strongly discouraged by the W3C). Although you can assign a style sheet to a button element, you can also wrap the label content inside an element (such as a span) and assign or override style rules just for that content.

When a button element is assigned a type of submit, the browser submits the button’s name and value attributes to the server as a name/value pair, like other form elements. No special form handling is conveyed by a button when other types are specified.

In theory, a button element should be embedded within a form element. In practice, browsers have no problem rendering a free-standing button element. This might be acceptable when no related form elements (such as text boxes) need to be referenced by scripts associated with the button. Some scripting shortcuts (reading the form property of the event object’s srcElement or target properties) simplify the scripted interactivity between form elements.

The W3C implemented this input element variant to offer browser makers a chance to create a different, richer-looking button. In practice, browser makers keep them the same (Mozilla), distinguish them slightly (IE 7), or display radically different elements (Safari). For Web Forms 2.0 (first implemented in Opera 9), the button element gains a number of attributes that accrue to all form control elements in that environment capable of submitting a form, but a button element’s name/value pair is not submitted with the form.

Example

<button type="button" oneClick="doSomething( );">Click Here</button>
<button type="submit" id="sender" value="infoOnly">Request Info</button>
<button type="reset"><img src="clearIt.gif" height="20" width="18"></button>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

action	autofocus	datasrc	disabled	enctype
form	method	name	replace	target
template	type	value

Element-Specific Event Handler Attributes

Handler	IE	Others	HTML
onafterupdate	4	n/a	n/a
onbeforeupdate	4	n/a	n/a
onrowenter	4	n/a	n/a
onrowexit	4	n/a	n/a

action, enctype, method, replace, target

For these Web Forms 2.0 extensions to a button element whose type attribute is set to submit, see the descriptions under the input element.

autofocus:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

autofocus="autofocus"

Web Forms 2.0 extension that brings focus to the element after the page loads. Should be assigned to only one form control element per page.

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the label of a button. The data source column must be either plain text or HTML (see dataformatas). A datasrc attribute must also be set for the button element. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<button type="button" datasrc="DBSRC3" datafld="label" onClick="getTopStory( );">
Latest News</button>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataFld

dataformatas:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

dataformatas=" dataType "

Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. This attribute setting depends entirely on how the data source is constructed.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<button type="button" datasrc="DBSRC3"dataformatas="HTML" datafld="label"
onClick="getTopStory( );"> Latest News</button>

Value

IE recognizes two possible settings: text | html.

Default

text

Object Model Reference

[window.]document.getElementById(elementID).dataFormatAs

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<button type="button" datasrc="DBSRC3" datafld="label"
onClick="getTopStory( );"> Latest News</button>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc

form:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

form=" formID [formID] ... "

Web Forms 2.0 extension that lets you associate a single form control element with one or more forms that do not enclose the controls. Because button elements are not confined to be descendants of form elements, the button elements may be located away from the form element. The form attribute connects the button element with one or more form elements on the page.

Example

<button type="submit" form="orderForm">Submit Order</button>

Value

ID of one or more form elements on the page. Multiple references are space-delimited.

Default

None.

name:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

name=" elementIdentifier "

For a button element, the name attribute can play two roles, depending on the type attribute setting. For all type attribute settings, the name attribute lets you assign an identifier that can be used in scripted references to the element (the id attribute is the preferred way to reference the element). For a button type of submit, the name attribute is sent as part of the name/value pair to the server at submit time.

Example

<button type="submit" name="sender" value="infoOnly">Request Info</button>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).name

template:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

template=" elementID "

Web Forms 2.0 extension that lets you associate a button element with a repetition block—an HTML container that is repeated on the page. Such a repetition block allows the add-type button to add a copy of the block to the page, such as a new row in a table. This attribute ties together the button and block to be added, removed, or moved, depending on the setting of the type attribute.

Example

<button type="remove" template="orderFormRow">Delete</button>

Value

ID of an element on the page that has been set up as a repetition block.

Default

None.

type:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

type=" buttonType "

Defines the internal style of button for the browser. A button style is intended to be used to initiate scripted action via an event handler. A “reset” style behaves the same way as an input element whose type attribute is set to reset, returning all elements to their default values. A “submit” style behaves the same way as an input element whose type attribute is set to submit. A button element whose type attribute is set to either reset or submit must be associated with a form for its implied action to be of any value to the page.

Example

<button type="reset"><img src="clearIt.gif" height="20" width="18"></button>

Value

Case-insensitive constant value from the following list of three standard HTML types: button | reset | submit. Web Forms 2.0 adds four additional choices for use with repetition blocks: add | move-down | move-up | remove.

Default

button

Object Model Reference

[window.]document.getElementById(elementID).type

value:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

value=" text "

Preassigns a value to a button element that is submitted to the server as part of the name/value pair when the element is a member of a form.

Example

<button name="connections" id="connections" value="ISDN">ISDN</button>

Value

Any text string.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).value

<canvas>:IE n/a NN n/a Moz 1.8 Saf 2 Op 9 HTML n/a: HTML End Tag: Required

 

<canvas></canvas>

A canvas element defines a rectangular space in a document in which scripts may draw a variety of straight and curved lines for the display of items such as graphs and charts without resorting to fixed images. Regions may be filled with colors or gradients. The HTML element is essentially a placeholder for space in the document and therefore has few attributes associated with it. For more details on the drawing facilities available to the canvas element, see the canvas object in Chapter 2.

Safari does not require an end tag, but others encourage an end tag so that “fallback content” (i.e., text or an image that appears if the browser does not support the element) can be included with the document. Unfortunately, however, Safari 2 renders such fallback content along with the canvas space.

The canvas element derived from Apple’s work on Safari, but is also being formalized in a document created by the Web Hypertext Application Technology Working Group (WHATWG) known as the Web Applications 1.0 specification. More details are available at http://www.whatwg.org.

Example

<canvas id="myCanvas" height="300" width="300"></canvas>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

height

width

Element-Specific Event Handler Attributes

None.

height, width:IE n/a NN n/a Moz 1.8 Saf 2 Op 9 HTML all: Optiona

 

height=" length "
width=" length "

Specify the dimensions, in pixels, of the rectangular space reserved for drawing by scripts.

Example

<canvas id="pieChart" height="400" width="400"></canvas>

Value

Positive integer values.

Default

Height: 150; width: 300

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width

<caption>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<caption>...</caption>

A caption element may be placed only inside a table element (and immediately after the <table> start tag) to denote the text to be used as a caption for the table. A caption applies to the entire table, whereas a table heading (th element) applies to a single column or row of the table. Only one caption element is recognized within a table element.

A table caption is usually a brief description of the table. A longer description may be written for the summary attribute of a table element for browsers that use text-to-speech technology. The primary distinguishing attribute of the caption element is align. Although deprecated in HTML 4, it lets you define where the caption appears in relation to the actual table.

Example

<table ...>
<caption class="tableCaptions">
   Table 3-2. Sample Inverse Framistan Values
</caption>
...
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

valign

Element-Specific Event Handler Attributes

None.

align:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" where "

Determines how the caption is rendered in physical relation to the table. Not all versions of all browsers support the full range of possibilities for this attribute. Only top and bottom are universal among supporting browsers. IE and Opera place captions designated left and right above the table, rather than immediately to the left and right of it.

Browsers typically render a caption above or below a table in the running body font (unless modified by tag or style sheet) and centered horizontally on the table. If the caption is wider than the table, text is wrapped to the next line, maintaining center justification.

The align attribute is deprecated in HTML 4.0 in favor of the text-align and vertical-align style sheet properties.

Example

<caption align="top">Table II. Stock List</caption>

Value

Acceptable string values for this attribute vary with browser version. Select the one(s) from the following table that work for your deployment.

Value	IE 4+	NN 4	Mozilla	Safari	Opera	HTML 4
bottom	·	·	·	·	·	·
center	·	—	·	·	·	—
left	·	—	·	—	·	·
right	·	—	·	—	·	·
top	·	·	·	·	·	·

For implementation details, see the discussion of text alignment within a containing box in the "Alignment Constants" at the beginning of this chapter.

Default

top (in IE, center if valign attribute is also set).

Object Model Reference

[window.]document.getElementById(elementID).align

valign:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

valign=" where "

The valign attribute was Internet Explorer’s early attribute for placing a table caption above or below the table. Although this attribute is now a part of the align attribute, IE’s special way of handling left, center, and right values of the align attribute give valign something to do. For example, you can use valign to set the caption below the table, and use align="right" to right-align the caption at the bottom. This combination is not possible with the HTML 4 attribute.

Example

<caption align="right" valign="bottom">Table 3-2. Fiber Content.</caption>

Value

Two possible case-insensitive values: bottom | top.

Default

top

Object Model Reference

[window.]document.getElementById(elementID).valign

<center>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<center>...</center>

The center element was introduced by Netscape and became widely used before the W3C-sanctioned div element came into being. It is clear, even from the HTML 3.2 documentation, that the HTML working group was never fond of this element. Momentum, however, carried the day, and this element found its way into the HTML 3.2 specification. The element is deprecated in HTML 4 in favor of the div element with a style sheet rule of text-align:center. In lieu of style sheets (but still deprecated in HTML 4), you can substitute a div element with align="center".

Content of a center element is aligned along an axis that runs down the middle of the next outermost containing element—usually the body or html element.

Example

<center>Don't do this.</center>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<cite>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<cite>...</cite>

The cite element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A cite element is one that contains a citation or reference to some other source material. This is not an active link but simply notation indicating what the element content is. Search engines and other HTML document parsers may use this information for other purposes (assembling a bibliography of a document, for example).

Browsers have free rein to determine how (or whether) to distinguish cite element content from the rest of the body element. Mainstream browsers elect to italicize the text. Override the default with a style sheet as you see fit.

Example

<p>Trouthe is the hyest thing that many may kepe.<br>
(Chaucer, <cite>The Franklin's Tale</cite>)</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<code>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<code>...</code>

The code element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A code element is one that is used predominantly to display one or more inline characters representing computer code (program statements, variable names, keywords, and the like).

Browsers have free rein to determine how (or whether) to distinguish code element content from the rest of the body element. Mainstream browsers elect to render code element content in a monospace font, usually in a slightly smaller font size than the default body font (although it is not reduced in IE 4 for the Macintosh). Override the default with a style sheet as you see fit.

Whitespace (including carriage returns) is treated the same way in code element content as it is in the browser’s body element content. Line breaks must be manually inserted with br elements. See also the pre element for displaying preformatted text that observes all whitespace entered in the source code.

Example

<p>Initialize a variable in JavaScript with the <code>var</code> keyword.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<col>:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Forbidden

 

<col>

The col element provides shortcuts to assigning widths and other characteristics (styles) to one or more subsets of columns within a table or within a table’s column group. With this information appearing early in the table element, a browser equipped to do so starts rendering the table before all source code for the table has loaded (the time at which it would otherwise perform all of its geographical calculations).

You can use the col element in combination with the colgroup element or by itself. The structure depends on how you need to assign widths and styles to individual columns or contiguous columns. A col element can apply to multiple contiguous columns. By assigning an integer value to the span attribute, you direct the browser to apply the col element’s width or style settings to said number of contiguous columns. The span attribute is similar to the colgroup element’s colspan attribute. In concert with the colgroup element, the col element allows you to create a kind of subset of related columns within a colgroup set.

No matter how you address the column structure of your table, the total number of columns defined in all col and colgroup elements should equal the physical number of columns you intend for the table. The following three skeletal examples specify HTML 4 tables with six columns:

<table>
<col span="6">
...
</table>

<table>
<col>
<col span="4">
<col>
...
</table>

<table>
<colgroup>
<col span="2"></colgroup>
<colgroup span="4">
...
</table>

HTML 4 specifications for the col element exceed the implementation in most current browsers. For example, HTML 4 provides for alignment within a column to be around any character, such as the decimal point of a money amount. This kind of feature adds to the rationale behind the col element. For example, you can have a table whose first three columns are formatted one way, and fourth column is assigned a special style with its own alignment characteristics:

<html>
<head>
<style type="text/css">
  .colHdrs {color:black}
  .normColumn {color:green}
  .priceColumn {color:red}
</style>
</head>
<body>
<table>
<colgroup class="normColumn" span="3"></colgroup>
<col class="priceColumn" align="char" char=".">
<thead class="colHdrs">
<tr><th>Stock No.<th>In Stock<th>Description<th>Price</tr>
<tbody>
<tr><td>8832<td>Yes<td>Brass Frobnitz<td>$255.98</tr>
<tr><td>8835<td>No<td>Frobnitz (black)<td>$98</tr>
...
</table>
</body>
</html>

Because attributes of the col and colgroup elements apply to the entire column, in the preceding example the style sheet rule for the thead overrides the color settings for the two column styles for the rows enclosed by the thead element. The preceding example works in IE 4 and later for Windows, except for the alignment of the final column, which is ignored.

Support indicated here for non-IE browsers is based on the browsers’ DOM implementations. The DOMs report to scripts that the col element and its attributes exist (reflected as properties). But as of Mozilla 1.8, Safari 2, and Opera 9, the element does not perform its intended tasks.

Example

<col class="dateCols" width="15" align="right">

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align	ch	char	charoff	choff
span	valign	width

Element-Specific Event Handler Attributes

None.

align:IE 3 NN n/a Moz n/a Saf n/a Op 8 HTML 4: Optional

 

align=" alignConstant "

Establishes the horizontal alignment characteristics of content within column(s) covered by the col element. The HTML 4 specification defines some values for the align attribute that are not yet reflected in the CSS specification. For example, there is no CSS equivalent for the alignment by character.

Example

<col class="dateCols" width="15" align="right">

Value

HTML 4 and IE/Opera have two sets of supported attribute values:

Value	IE & Opera	HTML 4
center	·	·
char	—	·
justify	—	·
left	·	·
right	·	·

The values center, left, and right are self-explanatory (and may be replicated through the CSS text-align property). The value justify is intended to space content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves.

It is important to bear in mind that the align attribute applies to every row of every column spanned by a col element, including any th element you specify for the table. If you want a different alignment for the column header, override the setting with a separate align attribute or text-align style sheet property for the thead or individual th elements.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

char:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

char=" character "

The char attribute defines the text character used as an alignment point for text within a column. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute.

Example

<col class="priceColumn" align="char" char=".">

Value

Any single text character.

Default

None.

charoff:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

charoff=" length "

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute.

Example

<col class="priceColumn" align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

span:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

span=" columnCount"

Defines the number of adjacent columns for which the col element’s attribute and style settings apply. If this attribute is missing, the col element governs a single column. You can combine multiple col elements of different span sizes as needed for your column subgrouping.

Example

<col span="3">

Value

Integer value greater than zero.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).span

valign:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

valign=" alignmentConstant "

Determines the vertical alignment of content within cells of the column(s) covered by the col element. You can override the vertical alignment for a particular cell anywhere in the column.

Example

<col valign="middle">

Value

Four constant values are recognized by both IE 4 and later for Windows and HTML 4: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell’s contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attributes of all cells in the same row (or all col elements) to baseline. This assures that the character baseline of the first (or only) line of a cell’s text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign

width:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

width=" multiLength "

Defines the maximum width for the column(s) covered by the col element. In practice, the browser won’t render a column narrower than the widest contiguous stretch of characters not containing whitespace (e.g., the longest word). The precise measure of such a column width, of course, depends on the font characteristics of the content, as well.

Example

<col width="100">

Value

Internet Explorer accepts length values for the width in the form of pixel measures (without the “px” unit) or percentage of available horizontal space allocated to the entire table (width="25%").

The HTML 4 specification introduces an additional length measurement scheme to supplement the regular length measure. Called a proportional length (also MultiLength), this format features a special notation and geometry. It is best suited for situations in which a col element is to be sized based on the available width of the table space after all fixed length and percentage lengths are calculated. Using the proportional length notation (a number followed by an asterisk), you can direct the browser to divide any remaining space according to proportion. For example, if there is enough horizontal space on the page for 100 pixels after all other column width calculations are performed, three col elements might specify width attributes of 1*, 3*, and 1*. This adds up to a total of five proportional segments. The 100 available pixels are handed out to the proportional columns based on their proportion to the whole of the remaining space: 20, 60, and 20 pixels, respectively.

Default

Determined by browser calculation.

<colgroup>:IE 3 NN n/a Moz all Saf n/a Op 7 HTML 4: HTML End Tag: Optional

 

<colgroup>...</colgroup>

The colgroup element provides shortcuts to assigning widths and other characteristics (styles) to one or more subsets of columns within a table. With this information appearing early in the table element source code, a browser equipped to do so starts rendering the table before all source code for the table has loaded (at which time it would otherwise perform all of its geographical calculations).

You can use the colgroup element in combination with the col element or by itself. You may also define a colgroup that has col elements nested within to assist in defining subsets of columns that share some attribute or style settings. The need for the element’s end tag is determined by the presence of standalone col elements following the colgroup element. For example, if you specify column groupings entirely with colgroup elements, end tags are not necessary under HTML:

<table>
<colgroup span="2" width="30">
<colgroup span="3" width="40">
<thead>

If you have a freestanding col element following the colgroup element, you must clearly end the colgroup element before the standalone col element:

<table>
<colgroup class="leftCols">
<col width="30">
<col width="20">
</colgroup>
<col class="priceCol" width="25">
<thead>
...

The structure depends on how you need to assign widths and styles to individual columns or contiguous columns. To create a column grouping that consists of multiple adjacent columns, use the span attribute. This is entirely different from the colspan attribute of a td element, which has the visual impact of joining adjacent cells together as one. The span attribute helps define the number of columns to be treated structurally as a group (for assigning attribute and style sheet settings across multiple columns, regardless of the column content).

No matter how you address the column structure of your table, the total number of columns defined in all col and colgroup elements should equal the physical number of columns you intend for the table. The following three skeletal examples specify HTML 4 tables with six columns:

<table>
<colgroup span="6">
...
</table>

<table>
<col>
<colgroup span="4">
<col>
...
</table>

<table>
<colgroup>
    <col span="2">
</colgroup>
<colgroup span="4">
...
</table>

HTML 4 specifications for the colgroup element exceed the implementation in most current browsers. For example, HTML 4 provides for alignment within a column to be around any character, such as the decimal point of a money amount. This kind of feature adds to the rationale behind the col element (see the col element for an example).

Syntactically, there is little difference between a colgroup and col element. A colgroup element, however, lends a structural integrity to a group of columns that is rendered differently when the containing table element specifies rules="groups"; the browser draws rule lines (standard table borders in IE) only between colgroup elements, and not col elements.

Support indicated here for non-IE browsers is based on the browser’s DOM implementation. The DOM reports to scripts that the colgroup element and its attributes exist (reflected as properties). But as of Mozilla 1.8 and Opera 9, the element does not perform its intended tasks.

Example

<colgroup class="dateCols" width="15" align="right">

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align	char	charoff	span	valign
width

Element-Specific Event Handler Attributes

None.

align:IE 3 NN n/a Moz n/a Saf n/a Op 8 HTML 4: Optional

 

align=" alignConstant "

Establishes the horizontal alignment characteristics of content within column(s) covered by the colgroup element. The HTML 4 specification defines settings for the align attribute that are not yet reflected in the CSS specification. For example, there is no CSS equivalent for the alignment by character.

Example

<colgroup class="dateCols" width="15" align="right" span="3">

Value

HTML 4 and IE have two sets of attribute values.

Value	IE and Opera	HTML 4
center	·	·
char	—	·
justify	—	·
left	·	·
right	·	·

The values center, left, and right are self-explanatory. The value justify is intended to space content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves. In the HTML 4 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column.

It is important to bear in mind that the align attribute applies to every row of a column, including any th element you specify for the table. If you want a different alignment for the column header, override the setting with a separate align attribute or text-align style sheet property for the thead or individual th elements.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

char:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

char=" character "

The char attribute defines the text character used as an alignment point for text within a column. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute.

Example

<colgroup class="priceCols" align="char" char="." span="2">

Value

Any single text character.

Default

None.

charoff:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

charoff=" length "

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute.

Example

<colgroup class="priceColumn" align="char" char="." charoff="80%" span="2">

Value

Any length value in pixels or percentage of cell space.

Default

None.

span:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

span=" columnCount"

Defines the number of adjacent columns for which the colgroup element’s attribute and style settings apply. If this attribute is missing, the colgroup element governs a single column. You can combine multiple colgroup elements of different span sizes as needed for your column subgrouping.

Example

<colgroup span="3">

Value

Integer value greater than zero.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).span

valign:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

valign=" alignmentConstant "

Determines the vertical alignment of content within cells of the column(s) covered by the colgroup element. You can override the vertical alignment for a particular cell anywhere in the column.

Example

<colgroup valign="middle">

Value

Four constant values are recognized by both IE 4 and HTML 4: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell’s contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attributes of all cells in the same row (or all colgroup elements) to baseline. This assures that the character baseline of the first (or only) line of a cell’s text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign

width:IE 3 NN n/a Moz all Saf n/a Op 7 HTML 4: Optional

 

width=" multiLength "

Defines the maximum width for the column(s) covered by the colgroup element. In practice, the browser won’t render a column narrower than the widest contiguous stretch of characters not containing whitespace (e.g., the longest word). The precise measure of such a column width, of course, depends on the font characteristics of the content, as well.

Example

<colgroup width="100">

Value

Length values for the width are in the form of pixel measures (without the “px” unit) or percentage of available horizontal space allocated to the entire table (width="25%").

An alternate variation of the proportional length value is described in the HTML 4.0 specification. For a colgroup element, you can specify width="0*" to instruct the browser to render all columns according to the minimum width necessary to display the content of the cells in the column. For a browser to make this calculation, it must load all table contents, thus eliminating the possibility of incremental rendering of a long table. For more information about proportional lengths, see the width attribute of the col element.

Default

Determined by browser calculation.

<comment>:IE all NN n/a Moz all Saf all Op 7 HTML n/a: HTML End Tag: Required

 

<comment>...</comment>

The comment element is an artifact of early Internet Explorer browsers. It was intended as a plain-language tag alternate to the <!--comment--> comment element. IE does not render content inside the comment element, but all other browsers do. Do not use this element. Further details are omitted here to reduce the incentive to use the element.

<datalist>:IE all NN all Moz all Saf all Op 9 HTML all: End Tag: Required

 

<option>...</option>

The datalist element is a Web Forms 2.0 element that provides semantic context for predefined items associated with all input elements having text entry fields. Individual items are specified by option elements nested within the datalist element.

The datalist element must have an identifier assigned to its id attribute. A form control element that is associated with the list must then have a list attribute, whose value is the ID of the datalist element. Users are not required to make a choice from the data list options (the text entry field is fully editable by default), but the listed options can speed data entry for familiar or (if the browser is so equipped) recent entries.

Example

<label>Enter your operating system:<input type="text" name="os" list="oses" />
</label>
<datalist id="oses">
   <option value="">
   <option value="Windows Vista">
   <option value="Windows XP">
   <option value="Windows 98">
   <option value="Mac OS X">
   <option value="Linux">
</datalist>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None

Element-Specific Event Handler Attributes

None.

<dd>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<dd>...</dd>

The dd element is a part of the dl, dt, dd triumvirate of elements used to create a definition list in a document. The entire list is bracketed by the dl element’s tags. Each definition term is denoted by a leading dt element tag, and the definition for the term is denoted by a leading dd element tag. A schematic of a definition list sequence for three items looks as follows:

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
    <dt>Term 3</dt>
    <dd>Definition 3</dd>
</dl>

A dt element is an inline element, whereas a dd element can contain block-level content, including bordered text, images, and other objects. End tags are optional for both dt and dd elements because the next start tag automatically signals the end of the preceding element. The entire list, however, must close with an end tag for the encapsulating dl element.

Although the HTML specification forces no particular way of rendering a definition list, mainstream browsers are in agreement in left-aligning a dt element and indenting any dd element that follows it. No special font formatting or visual elements are added by the browser, but you are free (if not encouraged) to assign styles as you like. If you want to stack multiple terms and/or definitions, you can place multiple dt and/or dd elements right after each other in the source code.

Because HTML is being geared toward context-sensitive tagging, avoid using definition lists strictly as a formatting trick (to get some indented text). Use style sheets and adjustable margin settings to accomplish formatting tasks.

In Navigator 4, any styles assigned to dt and dd elements by way of the class, id, or style attribute do not work. If you wish to assign the same style attributes to both the dt and dd elements, assign the style to the dl element; otherwise, wrap each dt and dd element with a span element whose styles the nested dt and dd elements inherit. This workaround is observed by other browsers, although it is not necessary for IE-only documents that will never render in NN 4.

Example

<dl>
    <dt>Z-scale</dt>
    <dd>A railroad modeling scale of 1:220. The smallest mass-produced
    commercial model scale.</dd>
</dl>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<del>:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<del>...</del>

The del element and its companion, ins, define a format that shows which segments of a document’s content have been marked up for deletion (or insertion) during the authoring process. This is far from a workflow management scheme, but in the hands of a supporting WYSIWYG HTML authoring tool, these elements can assist in controlling generational changes of a document in process.

Text contained by this element is rendered as a strikethrough style (whereas ins elements are underlined). The HTML 4 specification includes two potentially useful attributes for preserving hidden information about the date and time of the alteration and some descriptive text about the change.

Example

<p>Four score and
<del cite="Fixed the math">eight</del><ins>seven</ins> years ago...</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

cite

datetime

Element-Specific Event Handler Attributes

None.

cite:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

cite=" text "

A description of the reason for the change or other notation to be associated with the element, but normally hidden from view. In Mozilla, the context menu for such an element contains a Properties choice, which leads to a displayed list of attributes and their values for the visitor. Or, your DHTML scripts can access the information through the element object’s cite property, and add value to the presentation.

Example

<del cite="Fixed the math --A.L.">eight</del>

Value

Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).cite

datetime:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

datetime=" datetimeString "

The date and time the deletion was made. This information is most likely to be inserted into a document with an HTML authoring tool designed to track content insertions and deletions. Data from this attribute can be recalled later as an audit trail to changes of the document. There can be only one datetime attribute value associated with a given del element. In Mozilla, the context menu for such an element contains a Properties choice, which leads to a displayed list of attributes and their values for the visitor. Or, your DHTML scripts can access the information through the element object’s dateTime property, and add value to the presentation.

Example

<del datetime="2001-09-11T08:56:00-04:00">SomeDeleteTextHere</del>

Value

The datetime attribute requires a value in a special date-time format that conveys information about the date and time in such a way that the exact moment can be deduced from any time zone around the world. Syntax for the format is as follows: yyyy-MM-dd T hh:mm:ssTZD.

yyyy

Four-digit year

MM

Two-digit month (01 through 12)

dd

Two-digit date (01 through 31)

T

Uppercase “T” to separate date from time

hh

Two-digit hour in 24-hour time (00 through 23)

mm

Two-digit minute (00 through 59)

ss

Two-digit second (00 through 59)

TZD

Time Zone Designator

There are two formats for the Time Zone Designator. The first is simply the uppercase letter “Z”, which stands for UTC (Coordinated Universal Time—also called “Zulu”). The other format indicates the offset from UTC that the time shown in hh:mm:ss represents. This time offset consists of a plus or minus symbol and another pair of hh:mm values. For time zones west of Greenwich Mean Time (which, for all practical purposes is the same as UTC), the operator is a negative sign because the main hh:mm:ss time is earlier than UTC; for time zones east of GMT, the offset is a positive value. For example, Pacific Standard Time is eight hours earlier than UTC: when it is 6:00 P.M. in the PST zone, it is 2:00 A.M. the next morning at UTC. Thus, the following examples all represent the exact same moment in time (Time Zone Designator shown in boldface for clarification only):

2003-01-30T02:00:00Z	UTC
2003-01-29T21:00:00−05:00	Eastern Standard Time
2003-01-29T18:00:00−08:00	Pacific Standard Time
2003-01-30T13:00:00+11:00	Sydney, Australia

For more details about this way of representing time, see the ISO-8601 standard.

Default

None.

<dfn>:IE 3 NN n/a Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<dfn>...</dfn>

The dfn element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A dfn element signifies the first usage of a term in a document (its defining instance). A common technique in documents is to italicize an important vocabulary term the first time it is used in a document. This is generally the place in the document where the term is defined so that it may be used in subsequent sentences with its meaning understood. By default, mainstream browsers italicize all text within a dfn element. You can, of course, easily define your own style for dfn elements with a style sheet rule.

Example

<p>Concerto composers usually provide a space for soloists to show off
technical skills while reminding the audience of various themes used
throughout the movement. This part of the concerto is called the <dfn>
cadenza</dfn>.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<dir>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<dir>...</dir>

The original idea of the dir element was to allow browsers to generate multicolumn lists of items. Virtually every browser, however, treats the dir element the same as a ul element, to present an unordered single column list of items (usually preceded by a bullet). The dir element is deprecated in HTML 4 and does not validate against strict HTML 4 or XHTML DTDs. You should be using the ul element, in any case, because you are assured backward compatibility and forward compatibility should this element ever disappear from the browser landscape entirely. Everything said here also applies to the deprecated menu element.

Example

Common DB Connector Types:
<dir>
    <li>DB-9</li>
    <li>DB-12</li>
    <li>DB-25</li>
</dir>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

compact

Element-Specific Event Handler Attributes

None.

compact:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML 3.2: Optional

 

compact

A Boolean attribute originally designed to let browsers render the list in a more compact style than normal (smaller line spacing between items). In practice, mainstream browsers do not adjust their rendering in response to this attribute.

Example

<dir compact>...</dir>

Value

The presence of this attribute makes its value true.

Default

false

<div>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<div>...</div>

The div element gives structure and context to any block-level content in a document. Unlike some other structural elements that have very specific connotations attached to them (the p element, for instance), the author is free to give meaning to each particular div element by virtue of the element’s attribute settings and nested content. Each div element becomes a generic block-level container for all content within the required start and end tags.

It is most convenient to use the div element as a wrapper for multielement content that is to be governed by a single style sheet rule. For example, if a block of content includes three paragraphs, rather than assign a special font style to each of the p elements, you can wrap all three p elements with a single div element whose style sheet defines the requested font style. Such a style sheet could be defined as an inline style attribute of the div element or assigned via the class or id attribute, depending on the structure of the rest of the document.

div elements are block-level elements. If you need an arbitrary container for inline content, use the span element, instead.

Example

<div class="sections" id="section3">...</div>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

datafld

dataformatas

datasrc

nowrap

Element-Specific Event Handler Attributes

None.

align:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" alignmentConstant "

See details for horizontal alignment within a block element in the "Alignment Constants" at the beginning of this chapter.

Example

<div align="center">Part IV</div>

Value

Constant value. Navigator 4, Internet Explorer 4 or later (Windows), and current browsers recognize all four constants specified in loose HTML 4: center | left | right | justify. IE 4 for the Macintosh does not recognize the justify setting.

Default

left or right, depending on direction of current language.

Object Model Reference

[window.]document.getElementById(elementID).align

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the HTML content of a div element. The data source column must be HTML (see dataformatas). datasrc and dataformatas attributes must also be set for the div element. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<div datasrc="DBSRC3" datafld="sec3" dataformatas="HTML"></div>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataFld

dataformatas:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

dataformatas=" dataType "

Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. A div element should receive data only in HTML format. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<div datasrc="DBSRC3" datafld="sec3" dataformatas="HTML"></div>

Value

IE recognizes two possible settings: text | html

Default

text

Object Model Reference

[window.]document.getElementById(elementID).dataFormatAs

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<div datasrc="DBSRC3" datafld="sec3" dataformatas="HTML"></div>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc

nowrap:IE 4 NN n/a Moz n/a Saf n/a Op 7 HTML n/a: Optional

 

nowrap

The nowrap attribute overrides the normal block model for a div element. When the attribute is turned on, text streams to the right unless broken by other interlaced elements. Indiscriminate use may lead to excessively wide pages that force users to scroll horizontally over long distances.

Example

<div id="bigBlock" nowrap>...</div>

Value

The presence of the attribute sets its value to true.

Default

false

<dl>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<dl>...</dl>

The dl element is a part of the dl, dt, dd triumvirate of elements used to create a definition list in a document. The entire list is bracketed by the dl element’s tags. Each definition term is denoted by a leading dt element tag, and the definition for the term is denoted by a leading dd element tag. A schematic of a definition list sequence for three items looks like the following:

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
    <dt>Term 3</dt>
    <dd>Definition 3</dd>
</dl>

The entire list must close with an end tag for the encapsulating dl element. Note that the dl element is the container of the entire list, which means that inheritable style sheet rules assigned to the dl element apply to the nested dt and dd elements. Unwanted inheritances can be overridden in the dt and dd elements.

Although the HTML specification forces no particular way of rendering a definition list, mainstream browsers are in agreement in left-aligning a dt element and indenting any dd element that follows it. No special font formatting or visual elements are added by the browser, but you are free (if not encouraged) to assign styles as you like. If you want to stack multiple terms and/or definitions, you can place multiple dt and/or dd elements right after each other in the source code.

Because HTML is being geared toward context-sensitive tagging, avoid using definition lists strictly as a formatting trick (to get some indented text). Use style sheets and adjustable margin settings to accomplish formatting.

Example

<dl>
    <dt>Z-scale</dt>
    <dd>A railroad modeling scale of 1:220. The smallest mass-produced
    commercial model scale.</dd>
</dl>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

compact

Element-Specific Event Handler Attributes

None.

compact:IE 3 NN 3 Moz n/a Saf n/a Op n/a HTML 3.2: Optional

 

compact

When set to true (by virtue of its presence in the dl element tag), the compact Boolean attribute instructs the browser to render a related dt and dd pair on the same line if space allows. The criterion for determining this space (as worked out in both Navigator and Internet Explorer) is related to the amount of indentation normally assigned to a dd element (indentation size differs slightly with operating system). With compact turned on, if the dt element is narrower than the indentation space, the dd element is raised from the line below and displayed on the same line as its dt element. Because the width of characters in proportional fonts varies so widely, there is no hard-and-fast rule about the number of characters of a dt element that lets the dd element come on the same line. But this compact styling is intended for dt elements consisting of only a few characters. This attribute is deprecated in HTML 4, and does not validate in strict HTML 4 or XHTML.

Example

<dl compact>ListItems</dl>

Value

Presence of the attribute name enables the feature.

Default

Off.

Object Model Reference

[window.]document.getElementById(elementID).compact

<!DOCTYPE>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Forbidden

 

<!DOCTYPE...>

The DOCTYPE element is not an HTML element, but rather a comment in the Standard Generalized Markup Language (SGML) format (as are so-called HTML comments in the <!-- ... --> style). This element must be the first element in a document, except as noted below for XHTML documents, and must always precede the <html> tag element. It advises the browser as to the document type definition (DTD) that the HTML source code is designed to follow. All browsers have a default document type that defines which elements and element attributes the browser supports (and that the browser has the internal programming to support—buggy or otherwise). Specifying a document type for a more modern DTD does not empower an older browser to support elements and attributes for which it is not coded. Conversely, specifying a constricted DTD does not prevent a browser from recognizing and supporting backward-compatible or proprietary elements and attributes.

A DOCTYPE element contains several unlabeled attribute values that specify such details as the name for the outermost document tag (html for our purposes), the organization responsible for the DTD, the address of the actual DTD file (called a system identifier), a plain-language name for the definition (including version number, if necessary), and the like. For example, the following DOCTYPE refers to an HTML 4.01 DTD that includes all deprecated elements and attributes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html401/loose.dtd">

The next example points to the XHTML 1.1 DTD, which does not include deprecated items nor frames:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Additionally, if you specify an XHTML DTD, you should include one of the following SGML-processing instruction tags prior to the DOCTYPE declaration:

<?xml version="1.0"?>
<?xml version="1.0" encoding="UTF-8"?>

The latter version includes a setting for character set encoding, which may alternatively be set in a <meta> tag. The W3C HTML and XHTML validators encourage documents to declare their character-encoding type in one way or the other.

For the most part, web authors include a DOCTYPE element to facilitate validation of the HTML source code prior to publication on the Web. But some modern browsers behave slightly differently based on the details of the DOCTYPE comment at the start of the document. Both IE 6 or later, Mozilla, and some other browsers operate in one of two “modes,” depending on the details of the DOCTYPE attribute values. One mode points to backward compatibility with implementations that came before, and diverge from, the W3C standards; the other mode causes the browser to behave more in keeping with W3C recommendations. The differences between the two modes lay primarily in fine layout details that are more carefully defined in modern-day CSS and DOM specifications. For simple layouts, you probably won’t notice the difference in modes. But if your pages rely upon style sheets or backgrounds for tables, form control alignment (especially in tables), precise font sizing or spacing, and pixel-perfect CSS positioning with respect to the document edges and positioned element sizes, you need to pay attention to the DOCTYPE details in your documents.

It is difficult to guide you through every compatibility detail, but a couple of broad recommendations should keep you on track. First, if you are pleased with the layouts of your current pages or templates, you will probably be best served by continuing to use DOCTYPE settings that keep you in backward-compatible mode (the Mozilla engineers call it “quirks” mode; Microsoft has no particular name for the mode). But if you are generating new content, especially for the newer browsers, you should gravitate toward the “strict” (Mozilla) or “standards-compatible” (IE) mode settings.

The number of DOCTYPE attribute values in common use today is mind boggling, and the rules that govern which attributes force each browser into a particular mode are not 100% in sync across browsers. But here are a few of the more common DOCTYPE tags that force modern browsers into backward-compatible mode, regardless of browser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

A couple of points worth noting. First, all of the above examples declare HTML DTDs no later than HTML 4.01, and none are XHTML. Second, none of the above examples includes a system identifier URI to a reference .dtd file. Also, if you omit the DOCTYPE element entirely, the browser applies the equivalent of the old internal DTDs.

Note: IE 6 has a flaw that causes it to revert to quirks mode if you specify an XHTML DOCTYPE and precede the document with the <? xml ... ?> declaration. The problem is fixed in IE 7.

Now here are common DOCTYPE tags that force modern browsers into the modern, standards-based mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
        "http://www.w3.org/TR/REC-html40/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

All HTML 4.x/strict and XHTML DTDs switch on standards-compatible mode, with or without the URLs. Including the URL with HTML 4.x transitional and frameset DTDs invokes the standards-compatible mode.

To learn more about the impact of the DTD choice on DOM and CSS features in the latest browsers, see Chapter 2 (client- and offset- properties, the body object, the document.compatMode property) and Chapter 3 (height and width attributes). Appendix E shows which HTML 4 elements and attributes are supported by each of the most popular HTML 4.01 and XHTML 1.0 DTDs for validation purposes.

Object Model Reference

[window.]document.firstChild

Element-Specific Attributes

Attributes are unlabeled.

Element-Specific Event Handler Attributes

None.

<dt>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<dt>...</dt>

The dt element is a part of the dl, dt, dd triumvirate of elements used to create a definition list in a document. The entire list is bracketed by the dl element’s tags. Each definition term is denoted by a leading dt element tag, and the definition for the term is denoted by a leading dd element tag. A schematic of a definition list sequence for three items looks like the following:

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
    <dt>Term 3</dt>
    <dd>Definition 3</dd>
</dl>

A dt element is an inline element, whereas a dd element can contain block-level content, including bordered text, images, and other objects. End tags are optional in HTML for both dt and dd elements because the next start tag automatically signals the end of the preceding element. The entire list, however, must close with an end tag for the encapsulating dl element.

Although the HTML specification forces no particular way of rendering a definition list, mainstream browsers are in agreement in left-aligning a dt element and indenting any dd element that follows it. No special font formatting or visual elements are added by the browser, but you are free (if not encouraged) to assign styles as you like. If you want to stack multiple terms and/or definitions, you can place multiple dt and/or dd elements right after each other in the source code.

Because HTML is being geared toward context-sensitive tagging, avoid using definition lists strictly as a formatting trick (to get some indented text). Use style sheets and adjustable margin settings to accomplish formatting.

In Navigator 4, any styles assigned to dt and dd elements by way of the class, id, or style attribute do not work. If you wish to assign the same style attributes to both the dt and dd elements, assign the style to the dl element; otherwise, wrap each dt and dd element with a span element whose styles the nested dt and dd elements inherit. This workaround is observed by other browsers, although it is not necessary for documents that will never render in NN 4.

Example

<dl>
    <dt>Z-scale</dt>
    <dd>A railroad modeling scale of 1:220. The smallest mass-produced
    commercial model scale.</dd>
</dl>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<em>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<em>...</em>

The em element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. An em element is one that is to be rendered differently from running body text to designate emphasis.

Browsers have free rein to determine how (or whether) to distinguish em element content from the rest of the body element. Both Navigator and Internet Explorer elect to italicize the text. Override the default with a style sheet as you see fit.

Example

<p>The night was dark, and the river's churning waters were <em>very</em>
cold.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<embed>:IE 3 NN 2 Moz all Saf all Op 7 HTML n/a: HTML End Tag: Optional/Required

 

<embed>...</embed>

An embed element allows you to load media and file types other than those natively rendered by the browser. Typically, such external data requires a plugin or helper application to properly load the data and display its file. Notice that this element has been supported by both Navigator and Internet Explorer since Versions 2 and 3, respectively, but the element never became a part of the HTML standard vocabulary. The HTML 4 specification recommends the object element as the one to load the kind of external data covered by the embed element in the browsers. Navigator 4 and later and Internet Explorer 4 and later also support the object element, and you should gravitate toward that element for embedded elements if your visitor browser base can support it.

Despite the goal of standardizing on the object element, not all browsers support it on all operating systems. Mozilla, for instance, prefers the embed element, while IE prefers the object element. To accommodate these disparities, you can specify both elements such that the current browser uses the element it understands. For example, the following code loads a Flash animation into all browsers that have the Flash plugin installed:

<object width="425" height="350">
    <param name="movie" value="http://www.example.com/vid/2bq"></param>
    <embed src="http://www.example.com/vid/2bq" type="application/x-shockwave-flash"
    width="425" height="350"></embed>
</object>

Bear in mind that for data types that launch plugins, the control panel displayed for the data varies widely among browsers, operating systems, and the plugins the user has installed for that particular data type. It is risky business trying to carefully design a layout combining a plugin’s control panel and surrounding text or other elements.

The list of attributes for the embed element is a long one, but pay special attention to the browser compatibility rating for each attribute. Because the plugin technologies for IE/Windows, IE/Mac, and Navigator are not identical, neither are the attribute sets. Even so, it is possible to assign an embed element in one document that works on both browser brands when the embedded element does not rely on an attribute setting not supported in one of the browsers. Some plugins, however, may require or accept attribute name/value pairs that are not listed for this element. At least in the case of Navigator and Mozilla, all attributes (including those normally ignored by the browser) and their values are passed to the plugin. Therefore, you must also check with the documentation for a plugin to determine what, if any, extra attributes may be supported or required. The object element gets around this object-specific attribute problem by letting you add any number of param elements tailored to the object, as was shown.

Example

<embed name="jukebox" src="jazz.aif" height="100" width="200"></embed>

Object Model Reference

[window.]document.embeds[elementName]
[window.]document.getElementById(elementID)

Element-Specific Attributes

align	alt	height	hidden	name
pluginspage	pluginurl	src	type	units
width

Element-Specific Event Handler Attributes

None.

align:IE 4 NN n/a Moz all Saf all Op 7 HTML n/a: Optional

 

align=" where "

If the embedded object (or player control panel) occupies space on the page, the align attribute determines how the object is rendered in physical relation to the element’s next outermost container. If some additional text is specified between the start and end tags of the embed element, the align attribute also affects how that text is rendered relative to the object’s rectangular space.

Most of the rules for alignment-constant values cited at the beginning of this chapter apply to the embed element. Precise layout becomes difficult because the HTML page author usually isn’t in control of the plugin control panel that is displayed on the page. Dimensions for the element that work fine for one control panel are totally inappropriate for another.

Typically, align attributes are deprecated in HTML 4 in favor of the align style sheet property. But if you are using the embed element for backward compatibility, stick with the align attribute.

Example

<embed src="jazz.aif" align="left" height="100" width="200"></embed>

Value

Each browser defines a different set of values for this attribute. Select the one(s) from the following table that work for your deployment:

Value	IE	Others
absbottom	·	—
absmiddle	·	—
baseline	·	—
bottom	·	·
left	·	·
middle	·	·
right	·	·
texttop	·	—
top	·	·

Default

bottom

Object Model Reference

[window.]document.embeds[elementName].align
[window.]document.getElementById(elementID).align

alt:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

alt=" textMessage "

If Internet Explorer does not have the facilities to load and run the external media, the text assigned to the alt attribute is supposed to display in the document where the embed element’s tag appears. Typically, this text provides advice on what the page visitor is missing by not being able to load the data (although IE also presents a dialog about how to get plugin information from an online source).

Use the alt attribute with care. If the external data is not a critical part of your page’s content, you may just want the rest of the page to load without calling attention to the missing media controller in lesscapable browsers. The alternate message may be more disturbing to the user than a missing media player.

The equivalent powers are available in Navigator with the noembed element.

Example

<embed src="jazz.aif" alt="Sound media player" height="10" width="20"></embed>

Value

Any quoted string of characters.

Default

None.

height, width:IE 3 NN 2 Moz all Saf all Op 7 HTML n/a: Required

 

height=" length " width=" length "

The size that an embedded object (or its plugin control panel) occupies in a document is governed by the height and width attribute settings. Some browser versions might allow you to get away without assigning these attributes, letting the plugin’s own user interface design determine the height and width of its visible rectangle. It is best to specify the exact dimensions of a plugin’s control panel whenever possible. (Control panels vary with each browser and even between different plugins for the same browser.) In some cases, the control panel does not display if you fail to supply enough height on the page for the control panel. If you assign values that are larger than the actual control panel, the browser reserves that empty space on the page, which could interfere with your intended page design.

Example

<embed src="jazz.aif" height="150" width="250"></embed>

Value

Positive integer values (optionally quoted) or percentage values (quoted). You cannot entirely hide an embedded object’s control panel by setting values to zero (one pixel always shows and occupies space), but you can reduce its height and width to one pixel in each dimension. If you want to hide a plugin, do so with DHTML by setting its positioning display attribute to none.

Default

None.

Object Model Reference

[window.]document.embeds[i].height
[window.]document.getElementById(elementID).height
[window.]document.embeds[i].width
[window.]document.getElementById(elementID).width

hidden:IE 4 NN n/a Moz 0.9 Saf n/a Op 7 HTML n/a: Optional

 

hidden="true" | "false"

The hidden attribute is a switch that lets you set whether the embedded data’s plugin control panel appears on the screen. When you set the hidden attribute, the height and width attributes are overridden.

Example

<embed src="soothing.aif" hidden="true"></embed>

Value

true | false

Default

false

Object Model Reference

[window.]document.embeds[i].hidden
[window.]document.getElementById(elementID).hidden

name:IE 3 NN 2 Moz all Saf all Op 7 HTML n/a: Optional

 

name=" elementIdentifier "

If you are scripting a plugin (especially in Navigator via LiveConnect), it is usually more convenient to create a reference to the embedded element by using a unique name you assign to the item. Thus, if you edit the page and move or delete multiple embed elements on the page, you do not have to worry about adjusting index values to array-style references (document.embeds[embedName]). For W3C DOM browsers, however, use the id attribute and document.getElementById( ).

Example

<embed name="jukebox" id="jukebox" src="jazz.aif" height="15" width="25"></embed>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.embeds[i].name
[window.]document.getElementById(elementID).name

pluginspage:IE 4 NN 4 Moz all Saf all Op 7 HTML n/a: Optional

 

pluginspage=" URL "

If the MIME type of the data file assigned to the embed element’s src attribute is not supported by an existing plugin or helper application in the browser, the pluginspage attribute is intended to provide a URL for downloading and installing the necessary plugin. Mozilla, however, tries to use its own plugin registry as a resource.

Example

<embed name="jukebox" src="jazz.aif" height="150" width="250"
pluginspage="http://www.example.com/plugin/install/index.html">
</embed>

Value

Any valid URL.

Default

None.

pluginurl:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

pluginurl=" URL "

Navigator 4 (only) introduced the power (a feature called Smart Update) to allow somewhat automatic installation of browser components. If a user does not have the necessary plugin installed for your embed element’s data type, the pluginurl can point to a Java Archive (JAR) file that contains the plugin and digitally signed objects to satisfy security issues surrounding automatic installation (via Netscape’s Java Installation Manager). A JAR file is both digitally signed and compressed (very much along the lines of a .zip file), and is created with the help of Netscape’s JAR Packager tool.

You can include both the pluginspage and pluginurl attributes in an embed element’s tag to handle the appropriate browser version. Navigator 2 and 3 respond to the pluginspage attribute, whereas Navigator 4 gives precedence to the pluginurl attribute when it is present.

Example

<embed name="jukebox" src="jazz.aif" height="150" width="250"
pluginurl="http://www.example.com/plugin/install.jar">
</embed>

Value

Any valid URL to a JAR file.

Default

None.

src:IE 3 NN 2 Moz all Saf all Op 7 HTML n/a: Optional

 

src=" URL "

The src attribute is a URL to a file containing data that is played through the plugin. For most uses of the embed element, this attribute is required, but there are some circumstances in which it may not be necessary (see the type attribute). Browsers used to rely on the filename extension to determine which plugin to load (based on browser preferences settings for plugins and helper applications), but now commonly make decisions based on the content type.

Example

<embed name="babyClip" src="Ugachaka.avi" height="150" width="250"></embed>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.embeds[i].src
[window.]document.getElementById(elementID).src

type:IE n/a NN 2 Moz all Saf all Op 7 HTML n/a: Optional

 

type=" MIMEtype "

Early Navigator versions anticipated the potential of a plugin not requiring any outside data file. Instead, such a plugin would more closely resemble an applet. If such a plugin is to be put into your document, you still use the embed element but specify just the MIME type instead of the data file URL (in the src attribute). This assumes, of course, that the MIME type is of such a special nature that only one possible plugin would be mapped to that MIME type in the browser settings. Today, however, browsers rely on the type attribute to dtermine which plugins to be used with the external media. Specify both the src and type attribute in an embed element tag.

Example

<embed src="hooha.fbz" type="application/x-frobnitz" height="150" width="250">
</embed>

Value

Any valid MIME type name as a quoted string, including the type and subtype portions delimited by a forward slash. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.

Default

None.

units:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

units=" measurementUnitType "

The units attribute is supposed to dictate the kind of measurement units used for the element’s height and width attribute values. Internet Explorer appears to treat the measurements in pixels, regardless of this attribute’s setting.

Example

<embed src="jazz.aif" height="150" width="250" units="en"></embed>

Value

Internet Explorer values are px or em.

Default

px

Object Model Reference

[window.]document.embeds[i].units
[window.]document.getElementById(elementID).units

width

See height.

<fieldset>:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<fieldset>...</fieldset>

A fieldset element is a structural container for form elements (as distinguished from the functional containment of the form element). In fact, you can define multiple fieldset elements within a single form element to supply context to logical groupings of form elements. For example, one fieldset element might contain text input fields for name and address info; another fieldset might be dedicated to credit card information.

Supporting browsers boost the attractiveness of this element by automatically drawing a rule around the form elements within each fieldset container. You can also attach a label that gets embedded within the rule by defining a legend element immediately after the start tag of a fieldset element. By default, the box extends the full width of the next outermost container geography—usually the document body or html element. If you’d rather have the box cinch up around the visible form elements, you have to set the width style sheet property for the element.

Example

<form method="POST" action="...">
<fieldset>
<legend>Credit Card Information</legend>
...inputElementsHere...
</fieldset>
</form>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

form

Element-Specific Event Handler Attributes

None.

align:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

align=" where "

The align attribute appears only in Internet Explorer, and its implementation is far from consistent across operating systems. In theory, the attribute should control the alignment of input elements it contains. This is true in the Macintosh version of IE, but in the Windows version (especially in IE 6), the settings have minor effect on the fieldset element rule. It is best to let the default setting take precedence, and override with style sheets.

Example

<fieldset align="right">...</fieldset>

Value

Allowed values are left | center | right.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

form:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

form=" formID [formID] ... "

Web Forms 2.0 extension that lets you associate a fieldset element with one or more forms that do not enclose the fieldset element.

Value

ID of one or more form elements on the page. Multiple references are space-delimited.

Default

None.

<font>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<font>...</font>

A font element is a container whose contents are rendered with the font characteristics defined by the element’s attributes. This element is deprecated in HTML 4 in favor of font attributes available in style sheets that are applied directly to other elements or the arbitrary span container for inline font changes. This element will be supported for a long time to come to allow backward compatibility with web pages designed for older browsers, however.

For nested tables in Navigator 4, style sheet inheritance frequently breaks down. Inserting font wrappers around content inside a td element can fortify your control over the design. Going forward, use font elements only as a last resort if a browser version balks at obeying CSS font rules.

The font element evolved over its lifetime, adding new attributes along the way to work in the more mature browsers. Navigator included some proprietary attributes for Version 4 (only) that are better served by style sheets for cross-browser compatibility.

Example

<font face="Times, serif" size="4">

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

color

face

point-size

size

weight

Element-Specific Event Handler Attributes

None.

color:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Optional

 

color=" colorTripletOrName "

Sets the font color of all text contained by the font element. This attribute is deprecated in HTML 4 in favor of style sheets.

Example

<font color="Olive">...</font>

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

Browser default.

Object Model Reference

[window.]document.getElementById(elementID).color

face:IE 3 NN 3 Moz all Saf all Op 7 HTML 4: Optional

 

face=" fontFamilyName1[, ... fontFamilyNameN] "

You can assign a hierarchy of font families to use for a segment of text contained by a font element. The browser looks for the first font family in the comma-delimited list of font family names until it either finds a match on the client system or runs out of choices, at which point the browser default font family is used. Font family names must match the system font family names exactly. If you use this attribute (instead of the preferred font-family style sheet property), you can always suggest a generic font face (serif, sans-serif) as the final choice.

Example

<font face="Bookman, Times Roman, serif">...</font>

Value

One or more font family names, including the recognized generic faces: serif | sans-serif | cursive | fantasy | monospace.

Default

Browser default.

Object Model Reference

[window.]document.getElementById(elementID).face

point-size:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

point-size=" pointSize "

The point-size attribute is Navigator 4’s nonCSS equivalent of setting the font size by specific point size (rather than by relative font size directed by the size attribute). If you assign a value to the point-size attribute and set the font-size style attribute, the style attribute takes precedence. If you are aiming for cross-browser deployment, I suggest using style sheets exclusively for precise point or pixel sizes.

Example

<font point-size="14">...</font>

Value

A positive integer, representing the desired point size.

Default

Browser default.

size:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

size=" integerOrRelativeSize "

Font sizes referenced by the size attribute are the relative size scale that is not tied to any one point size across operating system platforms. The default browser font size is 3. The range of acceptable values for the size attribute are integers from 1 to 7 inclusive. The exact point size varies with the operating system and browser design.

Users can often adjust the default font size in preferences settings. The size attribute overrides that setting. Moreover, size values can be relative to whatever font size is set in the preferences. By preceding an attribute value with a + or − sign, the browser’s default size can be adjusted upward or downward, but always within the range of 1 through 7.

Example

<font size="4">...</font>
<font size="+3">...</font>

Value

Either an integer (quoted or not quoted) or a quoted relative value consisting of a + or − symbol and an integer value.

Default

3

Object Model Reference

[window.]document.getElementById(elementID).size

weight:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

weight=" boldnessValue "

The weight attribute is Navigator 4’s nonCSS equivalent of setting the font weight with a regular attribute rather than by style sheet rule. The attribute is unreliable, so the font-weight CSS style property is a better choice.

Value

Integer value between 100 and 900 in increments of 100. A value of 900 is the maximum boldness setting.

Default

Unknown.

<form>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<form>...</form>

Despite the importance of HTML forms in communication between web page visitors and the server, a form element at its heart is nothing more than a container of controls. Most, but not all, form controls are created in the document as input elements. Even if user interaction with input elements is not intended for submission to a server (perhaps some client-side scripting requires interaction with the user), such input elements are contained by a form element—and must be nested inside a form element to render at all in Navigator 4 or earlier.

A document may contain any number of form elements, but a client may submit the settings of controls from only one form at a time. Therefore, the only time it makes sense to divide a series of form controls into multiple form elements is when the control groups can be submitted independently of each other. If you need to logically or structurally group controls while maintaining a single form, use the fieldset element to create the necessary subgroupings of controls.

When a form is submitted to the server, all controls that have name attributes assigned to them pass both their names and values—in name/value pairs—to the server for further processing (or possibly as an email attachment or message with the help of a browser’s e-mail module). A Common Gateway Interface (CGI) program running on the server can accept and dissect the name/value pairs for further processing (adding a record to a server database or initiating a keyword search, for example). The server program is invoked via URL to the program assigned to the action attribute.

Inside browsers, the submission process consists of a few well-defined steps. The process begins with the browser assembling a form data set out of the name/value pairs of form controls. The name comes from the value assigned to the name attribute. A control’s value depends on the type of control. For example, a text input element’s value is the content appearing in the text box at submission time; for a radio button within a radio group (all of whose name attributes are assigned the same value), the value assigned to the value attribute of the selected radio button is inserted into the name/value pair for the radio group.

The W3C recommendations prefer that form controls use their id attributes in name/value pairs. As of the newest browsers now available, however, only the name attribute is recognized as an identifier for the submitted name/value pair.

The second step of submission encodes the text of each name/value pair. A + symbol is substituted for each space character. Reserved characters (as defined by RFC 1738) are escaped, and all other nonalphanumeric characters are converted to hexadecimal representations (in the form % HH, where HH is the hex code for the ASCII value of the character). Name and value components of each name/value pair are separated by an = symbol, and each name/value pair is delimited with an ampersand (&).

In the final step, the method attribute setting determines how the escaped form data set is transmitted to the server. With a method of get, the form data set is appended to the URL stated in the action attribute, separated by a ? symbol. With a method of post and a default enctype, the data set is transmitted as a kind of (non-email) message to the server. Data submitted via the GET method is limited in character length, while the POST method offers unlimited data length and no echoed display in the browser’s Address box.

Form submission can be canceled in modern browsers with the help of scripts that perform validation checking or other functions triggered by the onsubmit event. This event fires prior to the form being submitted. If the event handler evaluates to return false or the default event is canceled (e.g., evt.preventDefault( )), the form is not submitted, and the user may continue to edit the form elements.

The Web Forms 2.0 standard (first implemented in Opera 9) offers internal validation mechanisms that put more “intelligence” into the form controls (e.g., a text entry field can have a regular expression pattern assigned to it as an attribute). See the input element in this chapter and the ValidityState object in Chapter 2 for additional details.

Example

<form name="orders" method="POST" action="http://www.example.com/cgi-bin/order">
...
</form>

Object Model Reference

[window.]document.forms[i]
[window.]document.forms[formName]
[window.]document.formName
[window.]document.getElementById(elementID)

Element-Specific Attributes

accept	accept-charset	acceptcharset	action	autocomplete
data	enctype	method	name	replace
target

Element-Specific Event Handler Attributes

Handler	IE	NN	Others	HTML
onreset	4	3	all	4
onsubmit	3	2	all	4

accept:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML 4: Optional

 

accept=" MIMETypeList "

Intended for use with input elements of type file, the accept attribute lets you specify one or more MIME types for allowable files to be uploaded to the server when the form is submitted. The predicted implementation of this attribute would filter the file types listed in file dialogs used to select files for uploading. In a way, this attribute provides client-side validation of a file type so that files not conforming to the permitted MIME type are not even sent to the server.

Example

<form accept="text/html, image/gif" ...>...</form>

Value

Case-insensitive MIME type (content type) value. For multiple items, a comma-delimited list is allowed. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.

Default

None.

accept-charset, acceptcharset:IE 5 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

accept-charset=" MIMETypeList "

A server advisory (for servers that are equipped to interpret the information) about which character sets it must receive from a client form. The hyphenated version is from the HTML 4 specification, but IE 5 and later also implement an alternate attribute whose name has no hyphen.

Example

<form accept-charset="it, es" ...>...</form>

Value

Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets). Multiple character sets may be delimited by commas. The reserved value, unknown, is supposed to represent the character set that the server used to generate the form for the client.

Default

unknown

action:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

action=" URL "

Specifies the URL to be accessed when the form is being submitted. When the form is submitted to a server for further processing, the URL may be to a CGI program or to an HTML page that includes server-side scripts. (Those scripts execute on the server before the HTML page is downloaded to the client.) As a result of the submission, the server returns an HTML page for display in the client. If the returned display is to be delivered to a different frame or window, the target attribute must be specified accordingly.

Implementations of submitting a form by email (specifying a mailto: URL for the action attribute) across all browsers are very uneven—you may be missing form submissions from many users. If CGI processing of forms is beyond your expertise, search for third-party FormMail services that forward forms to you via email.

If you omit the action attribute and the form is submitted, the current page reloads itself, returning all form elements to their default values.

Example

<form method="POST" action="http://www.example.com/orders/order.html">

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.forms[i].action
[window.]document.forms[formName].action
[window.]document.formName.action
[window.]document.getElementById(elementID).action

autocomplete:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

autocomplete=" featureSwitch "

If an IE user has automatic form completion preference enabled, the autocomplete attribute governs the feature for the entire form. IE preserves (in an encrypted fashion) previous text and password entries, and presents a repeat visitor with one or more choices to complete the field entry. If the field is for data commonly stored in a user’s vCard, you can specify vcard-name attributes for text and password type input elements to let the browser pre-fill or assist the entry of a particular named field that matches one of the preferences entries. For more details on how AutoComplete works in HTML forms, visit http://msdn.microsoft.com/workshop/author/forms/autocomplete_ovr.asp.

Example

<form method="POST" action="register.pl" autocomplete="on">

Value

Constants: on | off.

Default

off

Object Model Reference

[window.]document.forms[i].autoComplete
[window.]document.forms[formName].autoComplete
[window.]document.formName.autoComplete
[window.]document.getElementById(elementID).autoComplete

data:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

data=" URI "

Web Forms 2.0 extension that allows a form to retrieve initial values for controls from an external XML file. The specification provides some details of the structure and namespaces to be used for the file. Visit http://www.whatwg.org for further information.

Example

<form name="registration" method="POST" action="register.pl" data="form/reg_default.
xml">

Value

Uniform Resource Identifier.

Default

None.

enctype:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

enctype=" MIMEType "

Sets a MIME type for the data being submitted to the server with the form. For typical form submissions (where the method attribute is set to POST), the default value is the proper content type. If you include a file input element, specify "multipart/form-data" as the enctype attribute.

Example

<form method="POST" enctype="text/plain" action="mailto:[e-mail]">
...
</form>

Value

MIME type (content type) value. For multiple items, a comma-delimited list is allowed.

Default

application/x-www-form-urlencoded

Object Model Reference

[window.]document.forms[i].encoding
[window.]document.forms[formName].encoding
[window.]document.formName.encoding
[window.]document.getElementById(elementID).encoding

method:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

method="GET" | "POST"

Forms may be submitted via two possible HTTP methods: GET and POST. These methods determine whether the form element data is sent to the server appended to the action attribute URL (GET) or as a transaction message body (POST). In practice, when the action and method attributes are not assigned in a form element, the form performs an unconditional reload of the same document, restoring form controls to their default values.

Example

<form method="POST" action="http://www.example.com/orders/order.html">
...
</form>

Value

Constant values of GET or POST. Browsers respond to upper- or lowercase values. Web Forms 2.0 adds the following values: put | delete.

Default

GET

Object Model Reference

[window.]document.forms[i].method
[window.]document.forms[formName].method
[window.]document.formName.method
[window.]document.getElementById(elementID).method

name:IE 3 NN 2 Moz all Saf all Op 7 HTML 4.01: Optional

 

name=" elementIdentifier "

Assigns an identifier to the entire form element. This value is particularly useful in writing scripts for older browsers that reference the form or its nested controls. Newer browsers support the preferred id attribute for this purpose, but the name attribute is still needed for form submission.

Example

<form name="orders" id="orders" method="POST"
action="http://www.example.com/cgi-bin/order">
...
</form>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.forms[i].name
[window.]document.forms[formName].name
[window.]document.formName.name
[window.]document.getElementById(elementID).name

replace:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

replace=" type "

Web Forms 2.0 extension that associates instructions to a form with how to process the data returned from the server after the form is submitted. The choice is whether the response replaces the original document in the browser (the default) or the browser should apply returned values to the form, rather than retrieve initial form data (if a URL is assigned to the data attribute of the form element).

Example

<form name="registration" method="POST" action="register.pl"
data="form/reg_default.xml" replace="values">

Value

One of two constant values: document | values.

Default

document

target:IE all NN all Moz all Saf all Op 7 HTML 4.01: Optional

 

target=" windowOrFrameName "

If the HTML document returned from the server after it processes the form submission is to be loaded into a window or frame other than the current window or frame, you can specify where the returned document should load by assigning a window or frame name to the target attribute. Target frame names must be assigned to frames and windows as identifiers. Assign names to frames via the name attribute of the frame element; assign names to new windows via the second parameter of the window.open( ) scripting method. If you omit this attribute, the returned document replaces the document containing the form element. An identifier other than one belonging to an existing frame or window opens a new window for the returned document.

If the form is located in a subwindow, and you want the target to be the main window, you must first use a script to assign an identifier to the name property of the main window. Use that name as the value of the form’s target attribute.

Strict DTDs for HTML 4 and XHTML do not support the target attribute of any element because frames and windows are outside the scope of pure document markup. In fact, framesetting documents will not validate in the strict environment—thus the purpose of the separate frameset DTDs for HTML 4 and XHTML. If your documents must validate with these strict DTDs, and you wish to support targets, use scripts to set target properties of links, image maps, and forms after the page has loaded.

A form element can have only one returned document and one target. If you want a form submission to change the content of multiple frames, you can include a script in the returned document whose onload event handler loads or dynamically writes a document into a different frame. (Set the location.href property of each frame to a desired URL.)

Example

<form method="POST" action="http://www.example.com/cgi-bin/order" target="new">
...
</form>

Value

Case-sensitive identifier when the frame or window name has been assigned via the target element’s name attribute. Four reserved target names act as constants:

_blank

Browser creates a new window for the destination document

_parent

Destination document replaces the current frame’s framesetting document (if one exists; otherwise, it is treated as _self)

_self

Destination document replaces the current document in its window or frame

_top

Destination document is to occupy the entire browser window, replacing any and all framesets that may be loaded (also treated as _self if there are no framesets defined in the window)

Default

_self

Object Model Reference

[window.]document.forms[i].target
[window.]document.forms[formName].target
[window.]document.formName.target
[window.]document.getElementById(elementID).target

<frame>:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: HTML End Tag: Forbidden

 

<frame>

The frame element defines properties of an individual window space that is some fractional portion of the entire browser window. A frame element must be defined within the context of a frameset element. It is the frameset that defines the row and column arrangement of a related group of frames.

A browser treats a frame as a separate browser window within the browser application’s window. As such, each frame window can load its own content, independent of other frames. Although no attributes of the frame element are required, assigning a value to the name attribute is highly recommended if you have forms or links whose returned or destination document is to be displayed in a different frame. Scripting among multiple frames also benefits greatly from names assigned to frames because it makes references to those frames (and their contents) more easily understandable to someone reading the script code. Note that among recent W3C DTDs, the frame element validates only in the HTML 4.01 Transitional DTD and the Frameset DTDs for both HTML 4.01 and XHTML 1.0. See Appendix E.

Example

<frameset cols="150,*">
    <frame name="navbar" src="nav.html">
    <frame name="main" src="page1.html">
</frameset>

Object Model Reference

[window.]frameName
[window.]frames[i]
[window.]document.getElementById(elementID)

Element-Specific Attributes

allowtransparency	bordercolor	datafld	datasrc
frameborder	height	longdesc	marginheight
marginwidth	name	noresize	scrolling
security	src	width

Element-Specific Event Handler Attributes

None.

allowtransparency:IE 5.5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

allowtransparency=" featureSwitch "

More applicable to the iframe element, the allowtransparency attribute, when engaged, turns the frame’s background transparent. See the iframe element.

bordercolor:IE 4 NN 3 Moz all Saf n/a Op n/a HTML n/a: Optional

 

bordercolor=" colorTripletOrName "

If your frameset displays borders (as set with the border attribute of the frameset element), but you want a subset of the frames in the frameset to be rendered with a border color different from the rest, you can assign a color to the bordercolor attribute of an individual frame element. Mixing border colors in a frameset exposes your HTML to the risk of different rendering techniques of each browser and operating system. Not only do the precise pixel composition of borders vary, but each browser and operating system may resolve conflicts between colored borders differently. If you assign a color to only some frames of a frameset, be sure to test the look on as many browser versions and operating systems as possible to evaluate the visual effect of your color choices. IE 6 and IE 7 can render unpredictably if you try to color the border of a single frame.

Example

<frame name="navbar" src="nav.html" bordercolor="salmon">

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).borderColor

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name in lieu of an src attribute for a frame element. The data source column must contain a valid URI (relative or absolute). A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

Example

<frame datasrc="DBSRC3" datafld="newsURL">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataFld

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

Example

<frame datasrc="DBSRC3" datafld="newsURL">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc

frameborder:IE 3 NN 3 Moz all Saf all Op 8 HTML 4: Optional

 

frameborder=" borderSwitch "

Controls whether an individual frame within a frameset displays a border. The setting is supposed to override the frameborder attribute setting of the containing frameset element. Controlling individual frame borders appears to be a problem for most browsers in most operating system versions. Turning off the border of one frame may have no effect if all adjacent frames have their borders on. Feel free to experiment with the effects of turning some borders on and some borders off, but be sure to test the final effect on all browsers and operating systems used by your audience. You can rely more comfortably on the frameborder attribute of the entire frameset.

Example

<frame name="navbar" src="nav.html" frameborder="0">

Value

On-off values for this attribute vary with the source. HTML 4 specifies the values of 1 (on) and 0 (off). Navigator 3 and 4 use yes and no. Internet Explorer 4 and later and other supporting browsers accept both sets of values.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).frameBorder

height, width:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

height=" length " width=" length "

Microsoft HTML documentation for IE says that the height and width attributes control the size of a frame. In practice in IE, these attributes have no direct control over the appearance of the frames within a frameset. Instead, the cols and rows attributes of the containing frameset govern the initial geometry of a frame. Do not use these attributes.

longdesc:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

longdesc=" URL "

Specifies a URL of a document that contains a longer description of the element than what the content of the title attribute reveals. One application of this attribute in future browsers is to retrieve an annotated description of the element for users who cannot read the browser screen. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream browsers provide no other functionality for this attribute.

Example

<frame longdesc="navDesc.html" title="Navigation Bar" src="navbar.html">

Value

Any valid URI, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).longDesc

marginheight, marginwidth: IE 3 NN n/a Moz all Saf all Op 7 HTML 4: Optional

marginheight=" pixelCount " marginwidth=" pixelCount "

The number of pixels between the inner edge of a frame and the content rendered inside the frame. The marginheight attribute controls space along the top and (when scrolled) the bottom edges of a frame; the marginwidth attribute controls space on the left and right edges of a frame. The HTML 4 specification leaves default behavior up to browsers.

Without any prompting, browsers automatically insert a margin of 14 (IE/Windows) or 8 (others) pixels inside a frame. But if you attempt to override the default behavior, be aware that setting any one of these two attributes causes the value of the other to go to zero. Therefore, unless you want the content to be absolutely flush with various frame edges, you need to assign values to both attributes.

Example

<frame src="navbar.html" marginheight="20" marginwidth="14">

Value

Any positive integer value or zero.

Default

14 (IE/Windows) or 8 (others).

Object Model Reference

[window.]document.getElementById(elementID).marginHeight
[window.]document.getElementById(elementID).marginWidth

name:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: Optional

 

name=" elementIdentifier "

When links and forms must load their destination or returned documents into frames other than the one holding the link or form, those elements have target attributes indicating which frame receives the new content. To direct such content to a frame, the frame must have a value assigned to its name attribute. That same value is assigned to the target attribute of the a or form element. Client-side scripting also uses the frame’s name in building references to other frames or content in other frames. It is good practice to assign a unique identifying name to all frames.

The name attribute is deprecated in XHTML. To validate under the Frameset XHTML DTD, assign the same identifier to the element’s name and id attributes.

Example

<frame name="navbar" id="navbar" src="nav.html">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]frameName.name
[window.]frames[i].name
[window.]document.getElementById(elementID).name

noresize:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: Optional

 

noresize

Frame borders can be resized by the user dragging the border perpendicular to the axis of the border edge. When present, the noresize attribute instructs the browser to prevent the frame’s edges from being manually resized by the user. All border edges of the affected frame element become locked, meaning that all edges that extend to other frames in the frameset remain locked as well.

Example

<frame src="navbar.html" noresize>

Value

The presence of the attribute in HTML makes the frame nonresizable.

Default

Frames are resizable by default.

Object Model Reference

[window.]document.getElementById(elementID).noResize

scrolling:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: Optional

 

scrolling="auto" | "no" | "yes"

By default, browsers add vertical and/or horizontal scrollbars when the content loaded into a frame exceeds the visible content region of the frame. Scrollbars can affect the layout of some content because they occupy space normally devoted to content (that is, the frame does not expand to accommodate scrollbars). Also, due to differences in default font sizes in browsers and operating system versions, a given collection of text content may display differently in different clients. If you want to prevent scrollbars from appearing in the frame, set the scrolling attribute to no; if you want scrollbars to be in the frame at all times, set the attribute to yes. In the latter case, if the content does not require scrolling, the scrollbars are disabled. In some older versions of Navigator, the automatic scrollbars remain visible, even if content not requiring them is subsequently loaded into a frame. In Navigator 4 and other mainstream browsers, the automatic scrollbars appear only when needed.

Setting the scrolling attribute to no should be used only after you have tested on all browsers and platforms that mission-critical content is always visible in the frame. If the frame is set to not scroll and has the noresize attribute set, some users might not be able to see all the content of the frame.

Example

<frame src="navbar.html" scrolling="no">

Value

Constant values: auto | no | yes.

Default

auto

Object Model Reference

[window.]document.getElementById(elementID).scrolling

security:IE 6 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

security="restricted"

When activated, this attribute raises the security level of the frame to the Restricted level of the Windows Security preferences settings. Such a frame’s content may not execute scripts.

Example

<frame src="navbar.html" security="restricted">

Value

Constant value: restricted.

Default

None.

src:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: Optional

 

src=" URL "

Defines the URL of the content to be loaded into the frame element. The URL can be an absolute URL or one relative to the URL of the document containing the frameset specifications. You may also use the javascript: pseudo-URL to have the returned value of a script appear in the frame. For example, if you want a frame to be blank when the frameset loads, you can define a function in the frameset document that returns a blank HTML page. The src attribute for each soon-to-be-blank frame invokes the function from the vantage point of the child frame:

<html>
<script language="JavaScript">
function blank(  ) {
    return "<html></html>"
}
</script>
<frameset cols="50%,50%">
    <frame name="leftFrame" src="javascript:parent.blank(  )">
    <frame name="rightFrame" src="javascript:parent.blank(  )">
</frameset>
</html>

Another type of blank page is available from some browsers and versions via the about:blank URL, which draws from an internal blank page.

Example

<frame src="navbar.html">

Value

A complete or relative URL or a javascript: pseudo-URL.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).src

width

See height.

<frameset>:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<frameset>...</frameset>

Defines the layout of a multiple-frame presentation in a browser’s application window. The primary duty of the frameset element is to specify the geographical layout—in a row and column array—of rectangular frames. Attributes defined in a frameset element apply to all frame elements nested within (unless overridden by a similar attribute for a specific frame). A frameset element’s tag takes the place in an HTML document that is normally devoted to the body element.

You may nest a frameset element within a frameset element. This tactic allows you to subdivide a frame from the outer frameset element into two or more frames. For example, if you define one frameset element with three rows and two columns, you get a total of six frames:

<frameset rows="33%, 33%, 34%" cols="50%, 50%">
    <frame name="r1c1" id="r1c1"...>
    <frame name="r1c2" id="r1c2"...>
    <frame name="r2c1" id="r2c1"...>
    <frame name="r2c2" id="r2c2"...>
    <frame name="r3c1" id="r3c1"...>
    <frame name="r3c2" id="r3c2"...>
</frameset>

Figure 1-1 shows the resulting frame organization.

Figure 1-1. A three-row, two-column frameset

On the other hand, if you nest a frameset where a frame definition goes, that frame is divided into whatever frame organization is defined by that nested frameset. Consider the following nested frameset:

<frameset rows="33%, 33%, 34%">
    <frame name="r1" id="r1"...>
    <frameset cols="50%, 50%">
        <frame name="r2c1" id="r2c1"...>
        <frame name="r2c2" id="r2c2"...>
    </frameset>
    <frame name="r3" id="r3"...>
</frameset>

This produces the frame organization shown in Figure 1-2.

Figure 1-2. A nested frameset

You may nest frameset elements as deeply as your page design requires. Be aware that frames can devour memory resources of browsers on some operating systems. Not all users appreciate frames that display borders, even when such a structure may make logical sense for your page design.

The outermost frameset document is the one whose title attribute governs the display in the browser window title bar. Documents loaded into individual frames have no control over title bar display, although for reasons of scripting and potential application in future browsers, the title attribute of framed documents should be set anyway.

If you wish to offer an option for a user to remove a frameset, you can supply a link or button that invokes a script. The script should set the top.location.href property to the URL of the single most important document of the pages loaded into frames (the primary content).

Strict DTDs for HTML 4 and XHTML explicitly exclude support for frameset and frame elements (and target attributes of other elements that point to frames). These document type definitions treat frames as outside the scope of pure document markup. You can validate a framesetting document with the HTML 4 transitional and frameset DTDs or the XHTML frameset DTD.

Example

<frameset cols="150,*">
    <frame name="navbar" id="navbar" src="nav.html">
    <frame name="main" id="main" src="page1.html">
</frameset>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

border

bordercolor

cols

frameborder

framespacing

rows

Element-Specific Event Handler Attributes

Handler	IE	NN	Others	HTML
onload	3	2	all	4
onunload	3	2	all	4

border:IE 4 NN 3 Moz all Saf all Op 7 HTML n/a: Optional

 

border=" pixelCount "

Frames display 3-D borders by default. The default thickness of that border varies with browser and operating system. You can adjust this thickness by assigning a different value to the border attribute of the frameset. Only the outermost frameset element of a system of nested framesets responds to the border attribute setting. Note that this attribute controls inter-frame borders, and not a border around the frameset.

Navigator and Mozilla are consistent across Windows and Macintosh platforms by displaying a default border that is the same thickness as when the border attribute is set to 5. For IE, the default value is 6 in Windows and 1 on the Mac (although the actual rendering is far more than one pixel wide). Any single setting you make for the border attribute therefore does not look the same on all browsers. Moreover, at smaller settings, some browsers react strangely. IE 6 won’t display a border in Windows when the value is 4 or less; Mozilla loses its 3-D effect when the value is 2 or less.

This hodge-podge deployment of frame borders may make you shy away from using them altogether (set the border attribute to 0). In some cases, however, borders provide reassuring visual contexts for frame content that requires a scrollbar. Having a scrollbar appear floating in a browser window might be disconcerting to some viewers.

That the HTML 4 specification does not include a border attribute might lead one to believe it prefers the use of style sheet borders instead of borders tied only to frames. At most, however, a border-related CSS style property affects only a border around the entire frameset, and has no impact on borders between frames.

Example

<frameset cols="150,*" border="0">...</frameset>

Value

An integer value. A setting of zero eliminates the border entirely. Although the value is supposed to represent the precise pixel thickness of borders in the frameset, this is not entirely true for all operating systems or browsers.

Default

See description.

Object Model Reference

[window.]document.getElementById(elementID).border

bordercolor:IE 4 NN 3 Moz all Saf n/a Op n/a HTML n/a: Optional

 

bordercolor=" colorTripletOrName "

Establishes the rendering color for all visible borders in a frameset. A bordercolor setting in an outermost frameset element may be overridden by a bordercolor attribute of a nested frameset element (for the nested frameset’s frames only) or an individual frame element. Browsers resolve conflicts of colors assigned to adjacent frames differently. Test your color combinations carefully if you mix border colors.

Example

<frameset cols="150,*" bordercolor="salmon">...</frameset>

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

Browser default, usually a shade of gray with black or blue highlighting for the 3-D effect.

Object Model Reference

[window.]document.getElementById(elementID).borderColor

cols:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: Optional

 

cols=" columnLengthsList "

Defines the sizes or proportions of the column arrangement of frames in a frameset. If you intend to use the frameset element to create frames in multiple columns, you must assign a list of values to the cols attribute, with one value per column.

Column size is defined in one of three ways:

• An absolute pixel size

• A percentage of the width available for the entire frameset

• A wildcard (*) to represent all available remaining space after other pixels and percentages have been accounted for

Use an absolute pixel size when you want the width of a frame to be the same no matter how the user has sized the overall browser window. This is especially useful when the frame is to display an object of fixed width, such as an image. Use a percentage when you want the frame width to be a certain proportion of the frameset’s width, no matter how the user has adjusted the size of the overall browser window. If you use all percentage values for the cols attribute, they should add up to 100%. If the values don’t add up to 100%, the browser makes the columns fit anyway. Finally, use the asterisk wildcard value to let the browser calculate the width of one frame when all other frames in the frameset have fixed or percentage values assigned to them. Separate the values within the attribute value string with commas.

You can mix and match all three types of values in the attribute string. For example, consider a three-column frameset. If you want the leftmost column to be exactly 150 pixels wide, but the middle column must be 50% of the total frameset width, set the value as follows:

<frameset cols="150,50%,*">

The precise width of the two rightmost frames is different with each browser window’s width adjustment. The rightmost frame width in this example is roughly equal to one half the width of the frameset minus the 150 pixels reserved for the leftmost frame.

You may define an invisible column to the right. Use percentage values for visible columns, and make sure they total 100%. Then assign the asterisk value for the final column.

To create a regular grid of frames, assign values to both the cols and rows attributes in the frameset element’s tag. For an irregular array, you must nest frameset elements, as shown in the description of the frameset element, earlier in this section.

Example

<frameset cols="25%,50%,25%">...</frameset>

Value

Comma-separated list of pixel, percentage, or wildcard (*) values. Internet Explorer 4 for the Macintosh exhibits incorrect behavior with some combinations that include a wildcard value.

Default

100%

Object Model Reference

[window.]document.getElementById(elementID).cols

frameborder:IE 3 NN 3 Moz all Saf all Op n/a HTML n/a: Optional

 

frameborder=" borderSwitch "

Controls whether all frames within the frameset display a border (acting as dividers between frame edges). The frameborder attribute of frame elements can override the frameset element’s setting for this attribute, but some frame organizations don’t lend themselves well to eliminating frames from subgroups of frames. Override the frameset element’s attribute with caution, and test on all browsers and operating system platforms.

Example

<frameset cols="25%,50%,25%" frameborder="no">...</frameset>

Value

On-off values for this attribute vary with the browser. Navigator uses yes and no. Internet Explorer 4 and later accepts both yes | no and 1 | 0. For cross-browser compatibility, use the yes/no pairing.

Default

yes

Object Model Reference

[window.]document.getElementById(elementID).frameBorder

framespacing:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

framespacing=" pixelLength "

The Internet Explorer framespacing attribute is an older version of the border attribute. The older attribute is supported in current IE versions for backward compatibility. The behavior of the framespacing attribute is more uniform across operating system versions of IE: a setting of 10 pixels generates a border between frames that is essentially identical in both Windows and Mac versions. For an IE-only deployment, the framespacing attribute is a more accurate way to create borders that look the same across operating system versions.

Example

<frameset cols="25%,50%,25%" framespacing="7">...</frameset>

Value

A positive integer. Unlike the border attribute, however, a setting of zero does not remove the border. Use the frameborder attribute to hide borders entirely.

Default

2

Object Model Reference

[window.]document.getElementById(elementID).frameSpacing

rows:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: Optional

 

rows=" rowLengthsList "

Defines the sizes or proportions of the row arrangement of frames in a frameset. If it is the intent to use the frameset element to create frames with multiple rows, you must assign a list of values to the rows attribute, with one value per row.

Row size is defined in one of three ways:

• An absolute pixel size

• A percentage of the height available for the entire frameset in the browser window

• A wildcard (*) to represent all available remaining space in the browser window after other pixels and percentages have been accounted for

  Use an absolute pixel size when you want the height of a frame row to be the same no matter how the user has sized the overall browser window. This is especially useful when the frame is to display an object of fixed height, such as an image. Use a percentage when you want the frame height to be a certain proportion of the frameset’s height, no matter how the user has adjusted the size of the overall browser window. If you use all percentage values for the rows attribute, they should add up to 100%. If the values don’t add up to 100%, the browser makes the rows fit anyway. Finally, use the asterisk wildcard value to let the browser calculate the height of one row when all other rows in the frameset have fixed or percentage values assigned to them. Separate the values within the attribute value string with commas.

  You can mix and match all three types of values in the attribute string. For example, consider a three-row frameset. If you want the bottom row to be exactly 80 pixels high to accommodate a navigation bar, but the middle row must be 50% of the total frameset height, set the value as follows:

  <frameset rows="*,50%,80">

  The precise height of the two topmost frames is different with each browser window’s height adjustment. The topmost frame height in this example is roughly equal to one half the height of the frameset minus the 80 pixels reserved for the bottom row.

  You may define an invisible row at the bottom. Use percentage values for visible rows, and make sure they total 100%. Then assign the asterisk value for the final row.

  To create a regular grid of frames, assign values to both the cols and rows attributes in the frameset element’s tag. For an irregular array, you must nest frameset elements, as shown in the description of the frameset element, earlier in this section.

Example

<frameset rows="25%,50%,25%">...</frameset>

Value

Comma-separated list of pixel, percentage, or wildcard (*) values. Internet Explorer 4 for the Macintosh exhibits incorrect behavior with some combinations that include a wildcard value.

Default

100%

Object Model Reference

[window.]document.getElementById(elementID).rows

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<h1>...</h1>, <h2>...</h2>, <h3>...</h3> <h4>...</h4>, <h5>...</h5>, <h6>...</h6>

HTML defines a series of six heading levels with associated numbers that are intended to signify the relative importance of the section below the heading. The h1 element represents the most important, whereas h6 represents the least important. HTML document parsers can examine a page’s tags to create a table of contents based on the headings. This means that for proper document structure, these heading levels should be used in sequence, without skipping levels for aesthetic purposes.

It is up to the browsers to determine the default font, weight, and other characteristics of each level. Each heading element is rendered on its own line, with no line break or paragraph elements necessary to begin the content of the section titled with the heading. Figure 1-3 shows examples of how Internet Explorer 7 and Firefox 1.5 render all six heading levels in Windows. By and large, this pattern applies to other browser versions and operating systems.

Figure 1-3. Heading levels in Internet Explorer 7 and Firefox 1.5

You can always override the browser’s rendering style for any heading level or individual heading with style sheet rules.

Example

<h1>The Solar System</h1>
<p>Floating gracefully within the Milky Way galaxy is our Solar System. ...</p>
<h2>The Sun</h2>
<p>At a distance of 93,000,000 miles from Earth, the Sun...</p>
<h3>The Planets</h3>
<p>Nine recognized planets revolve around the Sun. ...</p>
<h4>Mercury</h4>
...

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

Element-Specific Event Handler Attributes

None.

align:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" where "

Determines how the element’s text is aligned inside the element’s block. Mainstream browsers support alignment values for center, left, and right alignment. Transitional HTML 4 (but not XHTML) adds the possibility of a fully justified alignment for multilined content, as well.

The align attribute is deprecated in HTML 4 in favor of the text-align style sheet property.

Example

<h1 align="center">Article I</h1>

Value

The following table shows values for the align attribute. Values may be treated as case-insensitive values.

Value	IE 4+	Others	HTML4
center	·	·	·
justify	—	—	·
left	·	·	·
right	·	·	·

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

<head>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<head>...</head>

The head element contains document information that is generally not rendered as part of the document in the browser window. At most, a browser displays the title element’s content in the browser window’s titlebar.

The content of the head element consists entirely of other elements that are intended to assist the browser in working with document data. Another classification of data, handled in one or more meta elements, can also assist search engines and document parsers to learn more about the document based on abstract information supplied by the author. The table below shows the elements that may be nested inside a head element according to three different specifications.

Although the HTML 4 or XHTML standards do not explicitly support the id attribute, browsers permit the attribute as part of their support for W3C DOM common properties of all elements.

Element	IE 4+	NN 4 and Mozilla	HTML 4 and XHTML
base	·	·	·
basefont	·	·	—
bgsound	·	—	—
isindex	—	·	·
link	·	·	·
meta	·	·	·
nextid	·	—	—
object	—	—	·
script	·	·	·
style	·	·	·
title	·	·	·

Example

<head>
<meta name="Author" content="Danny Goodman">
<style type="text/css">
    h1 {color:cornflowerblue}
</style>
</head>

Object Model Reference

[window.]document.getElementsByTagName("head")[0]
[window.]document.getElementById(elementID)

Element-Specific Attributes

profile

Element-Specific Event Handler Attributes

None.

profile:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

profile=" URLList "

A meta data profile is a separate file that defines one or more metadata property behaviors. The W3C leaves the precise application of this attribute to the whims of the browsers makers. Current browsers do nothing special as a result of assigning this attribute.

Example

<head profile="http://www.example.com/profiles/common">
    <meta name="Author" content="Jane Smith">
    <meta name="keywords" content="benefits,insurance,">
    ...
</head>

Value

Any valid URL or browser profile constant.

Default

Browser default.

Object Model Reference

[window.]document.firstChild.firstChild.profile
[window.]document.getElementsByTagName("head")[0].profile
[window.]document.getElementById(elementID).profile

<hr>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Forbidden

 

<hr>

The hr element draws a horizontal rule according to visual rules built into the browser with a variety of attribute controls. As a block element, the hr element starts and ends its rule on its own line, as if the element were surrounded by br elements. This element is not a content container, and many of the attributes that have been in use for a long time are deprecated in HTML 4 in favor of style sheet rules. The HTML recommendation leaves default appearance specifications up to the browser maker.

Example

<hr align="center" width="80%" />

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

color

noshade

size

width

Element-Specific Event Handler Attributes

None.

align:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" where "

Determines how the hr element is rendered in physical relation to the next outermost container (usually the body or html element). The align attribute is deprecated in HTML 4 in favor of the align style sheet property.

Example

<hr align="right" />

Value

One of three case-insensitive values: center | left | right.

Default

center

Object Model Reference

[window.]document.getElementById(elementID).align

color:IE 4 NN n/a Moz all Saf all Op n/a HTML n/a: Optional

 

color=" colorTripletOrName "

Sets the color of the hr element. Setting the color attribute also turns on the noshade attribute.

Example

<hr color="salmon">

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).color

noshade:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

noshade

The presence of the noshade attribute tells the browser to render the rule as a flat (not 3-D) line. In Internet Explorer only, if you set the color attribute, the browser changes the default line style to a no-shade style.

Example

<hr noshade>

Value

The presence of the attribute turns on no-shade rendering.

Default

Off.

Object Model Reference

[window.]document.getElementById(elementID).noShade

size:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

size=" pixelCount "

You can override the default thickness of the hr element by assigning a value to the size attribute. The size attribute is deprecated in HTML 4 in favor of the height style sheet property.

Example

<hr size="4">

Value

Any positive integer. A setting of zero still draws a one-pixel thick rule.

Default

2

Object Model Reference

[window.]document.getElementById(elementID).size

width:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

width=" length "

Defines the precise pixel width or percentage of available width (relative to the containing element) to draw the hr element rule. This attribute is deprecated in HTML 4 in favor of the width style sheet property.

Example

<hr width="75%">

Value

Any length value in pixels or percentage of available space.

Default

100%

Object Model Reference

[window.]document.getElementById(elementID).width

<html>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<html>...</html>

The html element is the container of the entire document content, including the head element. Typically, the html element start tag is the second line of an HTML file, following the Document Type Definition (DTD) statement (see the DOCTYPE element earlier in this chapter). If no DTD is provided in the file (it assumes the browser’s default DTD), the html start tag becomes the first line of the file. The end tag should be in the last line of the file (but it does not have to stand on its own line).

Although the html element doesn’t render per se, it is the root positioning context of a document in a purely W3C-compliant environment. This applies to W3C DOM browsers (Mozilla, Safari, Opera) and IE 6, the latter only when certain DOCTYPE definitions start the document. Otherwise, IE for Windows (this goes for IE 4 through IE 5.5) treats the body element as the root positioning context. If you don’t specify margins, borders, or padding for the body element, you probably won’t notice the difference.

The HTML 4 and XHTML standards do not include explicit support for id, class, or style attributes, but modern DHTML browsers support them.

Example

<html>
<head>
    ...
</head>
<body>
    ...
</body>
</html>

Element-Specific Attributes

version

xmlns

Element-Specific Event Handler Attributes

None.

version:IE 6 NN n/a Moz all Saf all Op n/a HTML 3.2: Optional

 

version=" string "

The version attribute is deprecated in HTML 4 and was never adopted by the major browsers until the desire to claim standards compliance led the maker to introduce the dead-end attribute. Originally intended to specify the HTML DTD version supported by the document, this information is universally supplied in the separate DTD statement (in the DOCTYPE element) above the html element in the document. Do not use this attribute.

Value

Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.

Default

None.

xmlns:IE 5 NN n/a Moz all Saf all Op 7 HTML X1.0: Optional

 

xmlns=" namespaceSpec "

The W3C attribute and its fixed URI value should be in the html element of every XHTML document. Microsoft uses this attribute to allow IE 5 and later for Windows to reference elements that belong to non-HTML sources, such as the Microsoft implementation of behaviors (generic external script modules that can be applied to any element).

The xmlns attribute has two possible assignment operators, depending upon its usage. The equals sign (=) is used to assign a namespace specification (typically a URI) to a default namespace to be used by the current element and any of its child elements. The colon (:) is used to assign a namespace specification (URI) to a namespace prefix (so that the prefix acts like a shortcut namespace reference when used to denote attributes belonging to a particular namespace).

A common example is the you can use in an XHTML document to signify that the document is to use (by default) the W3C XHTML DTD as the source of meaning for elements and attributes in the rest of the document:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Namespace prefixes are used (primarily in XML documents) when you have a mixture of DTDs from multiple sources governing the element and attribute rules of the document. For example:

<html xmlns:au="http://www.writers.org/2002/author-guidelines">

Once the au prefix is assigned, it can be used in other elements within the scope of the <html> element to signify an attribute defined by the DTD associated with the namespace URI (theoretically allowing the “custom” attribute to validate correctly):

<p au:license="Creative Commons">...</p>

Example (IE 5+/Windows)

<html xmlns:MSIE>...</html>

Value

For XHTML, a fixed URI string: http://www.w3.org/1999/xhtml. For IE 5 and later namespace references, just a prefix name (MSIE for built-in behaviors), or a prefix and URI that acts as an additional identifier for the prefix. Note the colon delimiter.

Default

None.

<i>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<i>...</i>

The i element—one of several font style elements in HTML 4—renders its content in an italic version of the font face governing the next outermost HTML container. You can nest multiple font style elements to create combined styles, such as bold italic (<b><i>bold-italic text</i></b>).

It is up to the browser to italicize a system font or perhaps load an italic version of the currently specified font. If you are striving for font perfection, it is best to use style sheets (and perhaps downloadable fonts if supported by your target browsers) to specify a true italic font family, rather than risk the browser’s extrapolation of an italic face from a system font.

You can take advantage of the containerness of this element by assigning style sheet rules to some or all i elements in a page. For example, you may wish all i elements to be in a red color. By assigning the style rule i{color:red}, you can apply the color to all elements with only a tiny bit of code.

Although this element is not deprecated in HTML 4, it would not be surprising to see it lose favor to the font-style style sheet property in the future.

Example

<p>This product is <i>new</i> and <i>improved</i>!</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<iframe>:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<iframe>...</iframe>

An iframe element creates an inline frame within the natural flow of a document’s content. The frame is a rectangular space into which you may load any other HTML document (or use scripts to dynamically write content to the space). If you assign a value to the name attribute of an iframe element, you may supply that name as the value of a target attribute of a, form, or other element that lets you define a target for a destination or returned document.

Although an iframe element’s rectangular space begins immediately following the content that comes before it (including in a line of text), all content following the end tag starts on the next line following the frame rectangle. Text leading up to the iframe element can be aligned in the same ways that text can be aligned around an img or object element.

Content between the start and end tags is ignored by browsers that support the iframe element. All others display such content as inline HTML content (as a way to let users know what they’re missing and perhaps provide a link to related information). The Navigator 4 element that comes closest to the functionality and behavior of the iframe element is the ilayer element.

In most respects, an iframe behaves like a frame element, but without the need for a frameset. In fact, the element acts so much like a frame that if you reference it through frame referencing syntax (window. frameName), the returned object is the same type as a window object, rather than a frame element object.

While the iframe element validates in the transitional HTML 4 DTD along with the frame and frameset elements, only the iframe validates in the transitional XHTML DTD. The iframe validates in the frameset DTDs for HTML 4 and XHTML.

Example

<iframe src="quotes.html" width="150" height="90">
<a href="quotes.html" target="new" style="color:darkred">
 Click here to see the latest quotes </a>
</iframe>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align	allowtransparency	datafld	datasrc	frameborder
height	hspace	longdesc	marginheight	marginwidth
name	scrolling	security	src	vspace
width

Element-Specific Event Handler Attributes

None.

align:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

align=" alignmentConstant "

Determines how the rectangle of the iframe element aligns within the context of surrounding content. See "Alignment Constants" earlier in this chapter for a description of the possibilities defined for this element’s attribute.

Example

<iframe src="quotes.html" width="150" height="90" align="center"></iframe>

Value

Case-insensitive constant value.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

allowtransparency:IE 5.5 NN n/a Moz n/a Saf n/ Op n/a HTML n/a: Optional

 

allowtransparency=" true "

Specifies whether the background plane of the iframe element is transparent or opaque. To allow the main document to show through the iframe, set the allowtransparency attribute to true and either leave the iframe’s background-color style property at its default setting (transparent) or set it explicitly to transparent. Note that this transparency affects the iframe element, independent of any document loaded into the iframe. Therefore, if you want a background style to affect only the iframe, you must set the allowtransparency attribute of the iframe to true and set the background of the element that appears behind any document loaded into the iframe (provided the document’s background is transparent). An allowtransparency attribute setting of false (the default) does not allow background styles associated with the iframe element to be visible (but background styles in the iframe’s nested document will be visible).

Example

<iframe src="album.html" height="400" width="400" allowtransparency="true"></iframe>

Value

Constant values: true | false

Default

false

Object Model Reference

[window.]document.getElementById(elementID).allowTransparency

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name in lieu of a src attribute for an iframe element. The data source column must contain a valid URI (relative or absolute). A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

Example

<iframe datasrc="DBSRC3" datafld="newsURL"></iframe>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataFld

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

Example

<iframe datasrc="DBSRC3" datafld="newsURL"></iframe>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc

frameborder:IE 3 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

frameborder=" borderSwitch "

Controls whether the iframe element displays a border. If you want linked-in documents to look as if they are embedded as part of the main document, turn off the frameborder attribute.

Example

<iframe src="quotes.html" width="150" height="90" frameborder="no"></iframe>

Value

On-off values for this attribute vary with the source. HTML 4 specifies the values of 1 (on) and 0 (off). Internet Explorer 4 and other supporting browsers accept the HTML value and yes or no.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).frameBorder

height, width:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

height=" length " width=" length "

These attributes establish the dimensions of the iframe element. Both attributes are deprecated in HTML 4 in favor of CSS height and width style properties.

Example

<iframe src="news.html" height="200" width="200">

Value

Any length value in pixels or percentage of available space.

Default

A width of 300 pixels; a height of 150 pixels.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width

hspace, vspace:IE 4 NN n/a Moz n/a Saf n/a Op 7 HTML n/a: Optional

 

hspace=" pixelCount " vspace=" pixelCount "

These attributes set padding around an iframe element within the content flow. The hspace attribute controls padding along the left and right edges (horizontal padding), and the vspace attribute controls padding along the top and bottom edges (vertical padding). Adding such padding provides an empty cushion around the frame. As an alternate (and to achieve cross-browser compatibility), you can specify the various margin style sheet settings, especially if you want to open space along only one edge.

Example

<iframe src="news.html" hspace="20" vspace="10">

Value

Any positive integer.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).hspace
[window.]document.getElementById(elementID).vspace

longdesc:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

longdesc=" URL "

Specifies a URL of a document that contains a longer description of the element than what the content of the title attribute reveals. One application of this attribute in future browsers is to retrieve an annotated description of the element for users who cannot read the browser screen. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream browsers provide no other functionality for this attribute.

Example

<iframe longdesc="newsDesc.html" title="Navigation Bar" src="news.html">
</iframe>

Value

Any valid URI, including complete and relative URLs.

Default

None.

marginheight, marginwidth:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

marginheight=" pixelCount " marginwidth=" pixelCount "

Determine the number of pixels between the inner edge of a frame and the content rendered inside the frame. The marginheight attribute controls space along the top and (when scrolled) the bottom edges of a frame; the marginwidth attribute controls space on the left and right edges of a frame. The HTML 4 specification leaves default behavior up to browsers.

Browsers insert their default margins (in the range between 8 and 14 pixels) inside a frame. But if you attempt to override the default behavior, be aware that setting any one of these two attributes causes the value of the other to go to zero. Therefore, unless you want the content to be absolutely flush with various frame edges, you need to assign values to both attributes.

Example

<iframe src="news.html" marginheight="20" marginwidth="14"></iframe>

Value

Any positive integer value or zero.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.getElementById(elementID).marginHeight
[window.]document.getElementById(elementID).marginWidth

name:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

name=" elementIdentifier "

When links and forms must load their destination or returned documents into frames other than the one holding the link or form, those elements have target attributes indicating which frame receives the new content. To direct such content to a frame, the frame must have a value assigned to its name attribute. That same value is assigned to the target attribute of the a or form element.

Example

<iframe name="news" id="news" src="news.html"></iframe>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).name

scrolling:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

scrolling=" featureSwitch "

By default, browsers add vertical and/or horizontal scrollbars when the content loaded into an inline frame exceeds the visible content region of the element. Scrollbars can affect the layout of some content because they occupy space normally devoted to content (that is, the frame does not expand to accommodate scrollbars). Also, due to differences in default font sizes in browsers and operating system versions, a given collection of text content may display differently in different clients. If you want to prevent scrollbars from appearing in the frame, set the scrolling attribute to no; if you want scrollbars to be in the frame at all times, set the attribute to yes. In the latter case, if the content does not require scrolling, the scrollbars are visible, but disabled.

Setting the scrolling attribute to no should be used only after you have tested that mission-critical content is always visible in the frame on all browsers and platforms. If the frame is set to not scroll, some users might not be able to see all content of the frame.

In lieu of this attribute, you may also use the CSS overflow style property. Microsoft provides extra axis-specific control over scrollbars via their overflow-x and overflow-y style properties.

Example

<iframe src="news.html" scrolling="no"></iframe>

Value

Constant values: auto | no | yes.

Default

auto

Object Model Reference

[window.]document.getElementById(elementID).scrolling

security:IE 6 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

security="restricted"

When activated, this attribute raises the security level of the inline frame to the Restricted level of the Windows Security preferences settings. Such a frame’s content may not execute scripts.

Example

<iframe src="news.html" security="restricted"></iframe>

Value

Constant value: restricted.

Default

None.

src:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

src=" URL "

Defines the URL of the content to be loaded into the iframe element. The URL can be an absolute URL or one relative to the URL of the document containing the frameset specifications. You may also use the javascript: pseudo-URL to have the returned value of a script appear in the frame. If you omit the src attribute, the frame opens empty.

Example

<iframe src="news.html"></iframe>

Value

A complete or relative URL or a javascript: pseudo-URL.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).src

vspace

See hspace.

width

See height.

<ilayer>:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: HTML End Tag: Required

 

<ilayer>...</ilayer>

An ilayer element is an inline version of the Navigator 4-specific layer element. In some respects, the ilayer element works like the iframe element in Internet Explorer, but an ilayer is automatically regarded as a positionable element in Navigator 4’s object model (e.g., like a block-level element with a CSS position: attribute set to relative). As a result, many of the attributes are the same as the layer element and are named according to the Navigator 4 way of positioning, sizing, and stacking positionable elements.

Content for an ilayer element can be read in from a separate file (with the src attribute) or wired into the current document by placing the HTML between the start and end tags. You can include both types of content in the same ilayer element. Content from the src document is rendered first (as its own block-level element), with additional content starting on its own line below the external content’s rectangle.

Example

<ilayer id="thingy1" src="quotes.html" width="150" height="90"></ilayer>

Object Model Reference

[window.]document.layerName

Element-Specific Attributes

above	background	below	bgcolor	clip
height	id	left	name	src
top	visibility	width	z-index

Element-Specific Event Handler Attributes

Handler	NN	Others	HTML
[a]
onblur	4	n/a	n/a
onfocus	4	n/a	n/a
onload	4	n/a	n/a
onmousedown	4[a]	n/a	n/a
onmouseout	4[a]	n/a	n/a
onmouseover	4[a]	n/a	n/a
onmouseup	4[a]	n/a	n/a
[a] Event capture mode only.

above:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

above=" layerID "

Names the positionable element that is to be above (in front of) the current ilayer in the stacking order. This is a different way to set the z-index attribute that does not rely on an arbitrary numbering system. If you use the above attribute, do not use the below or z-index attribute for the same ilayer element.

Example

<ilayer id="thingy4" src="quotes.html" above="thingy3"></ilayer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.above

background:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

background=" URL "

Specifies an image file that is used as a backdrop to the text and other content of the ilayer element. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available layer space. Smaller images download faster but are obviously repeated more often in the background. Animated GIFs are also allowable but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Example

<ilayer id="thingy4" src="quotes.html" background="blueCrinkle.jpg"></ilayer>

Value

Any valid URL to an image file, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.layerName.background

below:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

below=" layerID "

Names the positionable element that is to be below (behind) the current ilayer in the stacking order. This is a different way to set the z-index attribute that does not rely on an arbitrary numbering system. If you use the below attribute, do not use the above or z-index attribute for the same ilayer element.

Example

<ilayer id="thingy4" src="quotes.html" below="thingy5"></ilayer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.below

bgcolor:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the entire layer rectangle. If you combine a bgcolor and background, any transparent areas of the background image let the background color show through.

Example

<ilayer src="quotes.html" bgcolor="tan"></ilayer>

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

Object Model Reference

[window.]document.layerName.bgColor

clip:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

clip="[ leftPixel , topPixel ,] rightPixel , bottomPixel "

A clipping region is a rectangular view to the full ilayer content. Only content that is within the clipping rectangle can be seen on the page. The default value of the clip attribute is determined by the space required to display the content as it naturally flows into the element. Setting the clip attribute lets you rein in long content that might flow beyond a fixed rectangle desired for the page design.

Example

<ilayer src="quotes.html" clip="50,50"></ilayer>

Value

clip attribute values are pixel measures from the top and left edges of the element as it flows in the document. The order of values is clockwise from the left edge, around the rectangle sides: left, top, right, bottom. If you supply only two values, Navigator assumes the left and top values are zero, meaning that you wish to adjust only the right and bottom edges. Thus, a setting of "50,50" means that the clipping region is 50-pixels square, starting at the top-left corner of the layer’s rectangle. If you want the same size view, but starting 10 pixels in from the left, the clip attribute setting becomes "10,0,60,50".

Default

Naturally flowing viewing area of ilayer content.

Object Model Reference

[window.]document.layerName.clip.left
[window.]document.layerName.clip.top
[window.]document.layerName.clip.right
[window.]document.layerName.clip.bottom

height, width:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

height=" length " width=" length "

Define the minimum size of the layer as it flows in the document. When you add content to the layer, however, the attribute settings do not restrict the amount of the content that is visible along either axis. For example, if you display an image in an ilayer that is 120 pixels wide by 90 pixels high, the actual visible size of an ilayer element whose height and width attributes are set to a smaller size expands to allow the full image to appear. The same happens to text or other content: the viewable region expands to allow all content to appear. To restrict the visible portion of the content, set the clip attribute.

Setting the height and width attributes to specific sizes is helpful when you are creating a colored or patterned rectangle (via the bgcolor or background attributes) to act as an underlying layer beneath some other positioned content. Without content pushing on the edges of the ilayer, the height and width attributes set the clipping region to their sizes.

Example

<ilayer bgcolor="yellow" height="100" width="100"></ilayer>

Value

Positive integer values (optionally quoted) or percentage values (quoted). You can reduce both values to zero to not only hide the element (which you can also do with the visibility attribute), but prevent the element from occupying any page space.

Default

Naturally flowing viewing area of ilayer content.

Object Model Reference

[window.]document.layerName.height
[window.]document.layerName.width

id:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

id=" elementIdentifier "

A unique identifier that distinguishes this element from all the rest in the document. This is the identifier used as values for the above and below attributes. Scripts also use the id attribute value as the ilayer element’s name for object references.

Example

<ilayer id="oldYeller" bgcolor="yellow" height="100" width="100"></ilayer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.name

left, top:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

left=" pixelCount " top=" pixelCount "

Define the positioned offset of the left and top edges of the layer relative to the spot in the document where the ilayer element would normally appear. The precise location relative to the page varies because an ilayer element is an inline layer, which means it can start anywhere within normally flowing HTML content. When you set either of these attributes, Navigator 4 preserves the space in the document where the ilayer element appears, rather than cinch up surrounding content to fill space vacated by the element that has shifted its location. You are therefore likely to set these attributes for an ilayer only when attempting to accomplish a look tailored to very customized content (perhaps an ilayer amid inflow images).

Example

<ilayer bgcolor="yellow" left="10" top="50"></ilayer>

Value

Positive integer values (optionally quoted).

Default

0

Object Model Reference

[window.]document.layerName.left
[window.]document.layerName.top

name:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

name=" elementIdentifier "

A unique identifier that distinguishes this element from all the rest in the document. This is the identifier used as values for the above and below attributes. The name attribute is interchangeable with the id attribute for object references.

Example

<ilayer name="oldYeller" bgcolor="yellow" height="100" width="100"></ilayer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.name

src:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

src=" URL "

To load the content of an external HTML file into an ilayer element, assign the URL of that file to the src attribute. Any HTML content between the ilayer start and end tags is rendered on the page after the content loaded from the src URL. If you omit the src attribute, only content between the tags is rendered. Scripts can change the corresponding object property (src) after the document has loaded to dynamically change content within the ilayer element (without reloading the main document).

Example

<ilayer src="quotes.html"></ilayer>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.layerName.src

top

See left.

visibility:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional: Optional

 

visibility=" visibilityConstant "

Determines whether Navigator 4 displays the ilayer element. The default behavior is for a layer to inherit the visibility attribute of its next outermost (parent) layer. For an ilayer element that is part of the basic document body, this means that the layer is seen by default (the base layer is always visible). To hide a layer when the page loads, set the visibility attribute to "hidden". You need to set the attribute to "show" only if the ilayer element is nested within another layer with a visibility value that is set to (or is inherited as) "hidden".

Regardless of the visibility attribute setting, an ilayer element always occupies its normal inflow space in the document. This allows Navigator 4 to change the visibility on the fly (via scripting) without reloading the document. (Navigator 4 does not automatically reflow changed content.)

Example

<ilayer src="quotes.html" visibility="hidden"></ilayer>

Value

One of the accepted constants: hidden | inherit | visible.

Default

inherit

Object Model Reference

[window.]document.layerName.visibility

width

See height.

z-index:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

z-index=" layerNumber "

Controls the positioning of layers along the Z-axis (front-to-back) of the document relative to the next outermost layer container. When the z-index values of two or more positionable elements within the same container (such as the base document layer) are identical numbers, the loading order of the elements in the HTML source code controls the stacking order, with the later elements stacked in front of earlier ones. The default z-index value for all positionable elements is zero. Therefore, if you want only one positionable element to appear in front of all the others that stack in their default order, you simply assign any positive value (even 1) to that stand-out element. Stacking order of positionable elements can be changed on-the-fly via scripting. See also the above and below attributes.

Example

<ilayer src="quotes.html" z-index="1"></ilayer>

Value

Any integer.

Default

0

Object Model Reference

[window.]document.layerName.zIndex

<img>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Forbidden

 

<img>

The img element displays a graphical image in whatever MIME types the browser is equipped to handle. Common image types are GIF and JPEG, but modern browsers are frequently capable of decoding bitmapped images in PNG and BMP formats (unless helper application settings reroute those file types to external applications). img elements are inline elements, appearing anywhere in the document you specify, including in the middle of a line of text. A large number of attributes affecting visual presentation of the element are deprecated in HTML 4 in favor of style sheet rules. You will be able to use the attributes safely for many browser generations to come, however, because of the need to be backward compatible with the large collection of image-laden documents already on the Web. Note, too, that if you intend to use style sheets for img element borders and margins in Navigator 4, you must wrap the img element inside div or span elements and assign the style sheets to the surrounding element. This workaround works with all other CSS-aware browsers, so you can use style sheets in cross-browser deployment.

If you want to make an entire image a clickable link, wrap the img element inside an a element. To eliminate the typical link border around the image, set the border attribute to 0. And for image maps (where different segments of an image link to different destinations), the HTML recommendation encourages the use of client-side image maps (via the usemap attribute) over the server-side image map (ismap). For nonlinking action, you can assign an onclick event handler to an image in IE 4 or later and W3C DOM browsers. The downside is that you’ll have to control the cursor style with the :hover CSS pseudo-class (Mozilla, Safari, IE 7, Opera 9) or other events.

To be backward compatible with earlier scriptable browsers, it is advisable to include height and width attribute assignments in all img element tags. When values are assigned to these attributes, the browser renders pages more quickly because it doesn’t have to wait for the image to load in order to determine its size and organize other content on the page.

Example

<img src="mtRushmore.jpg" height="90" width="120" alt="Mount Rushmore" />

Object Model Reference

[window.]document.imageName
[window.]document.images[i]
[window.]document.getElementById(elementID)

Element-Specific Attributes

align	alt	border	datafld	datasrc
dynsrc	galleryimage	height	hspace	ismap
longdesc	loop	lowsrc	name	src
start	suppress	usemap	vspace	width

Element-Specific Event Handler Attributes

Handler	IE	NN	Others	HTML
onabort	4	3	all	n/a
onerror	4	3	all	n/a
onload	4	3	all	n/a

align:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

align=" where "

Determines how the img element is rendered in physical relation to the element’s next outermost container and surrounding content. Some settings also let you “float” the image to the left or right margin and let surrounding text wrap around the image (but no wrapping with a centered image).

Most of the rules for alignment-constant values cited at the beginning of this chapter apply to the img element. Typically, align attributes are deprecated in HTML 4 in favor of the style sheet properties.

Example

<img src="surferDude.gif" align="right" alt="Surfer" height="100" width="200">

Value

Each browser defines a different set of values for this attribute. Although the align attribute has a long heritage, not all values do. The more esoteric values, such as absmiddle and baseline, were added to browser offerings in Navigator 3 and Internet Explorer 4, but not added to the W3C repertoire. Assigning different values to multiple images in the same vicinity on the page can result in unpredictable rendering and positioning of the images and surrounding content. Select value(s) from the following table that work for your deployment:

Value	IE 4+	NN 3+/Mozilla/Safari	Opera	HTML 4
[a]
absbottom	·	·	·	—
absmiddle	·	·	·[a]	—
baseline	·	·	·	—
bottom	·	·	·	·
left	·	·	·	·
middle	·	·	·	·
right	·	·	·	·
texttop	·	·	—	—
top	·	·	·	·
[a] Unlike other supporting browsers, Opera does not differentiate absmiddle from middle. Both are treated the same way that other browsers treat middle.

Default

bottom

Object Model Reference

[window.]document.imageName.align
[window.]document.images[i].align
[window.]document.getElementById(elementID).align

alt:IE all NN all Moz all Saf all Op 7 HTML all: Required

 

alt=" textMessage "

In a world littered with graphical browsers, it is often hard to remember that not every browser downloads images or that not every web surfer can see the images. Aside from those using VT100 terminals with browsers such as Lynx, pocket computers often offer better performance when images don’t have to be downloaded and rendered. Vision impaired users may not be able to see an image, but could benefit by knowing what an image is about. Text-only browsers display the text assigned to an img element’s alt attribute where the img element appears on the page. Browsers that speak the page’s text also speak the alt text. The alt attribute should contain a brief description of what the image is (or an empty string for images used as space fillers). The HTML recommendation considers this capability so important that it calls the alt attribute a requirement for the img element.

Example

<img src="navbar.gif" usemap="#nav" alt="Navigation Bar" width="400" height="50">

Value

Any quoted string of characters.

Default

None.

Object Model Reference

[window.]document.imageName.alt
[window.]document.images[i].alt
[window.]document.getElementById(elementID).alt

border:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

border=" pixels"

Controls the thickness of a border around an img element. Default rendering of the border is in black, but if the img element is wrapped inside an a element, the border takes on the document’s various link colors (depending on link state). If you want a different color for a plain border, use style sheets (with the appropriate div or span wrapper for Navigator 4). When a link surrounds the image, you can eliminate the colored border altogether by setting the border attribute value to zero.

Example

<img src="surferDude.gif" alt="Surfer" border="3" height="100" width="200">

Value

Any integer pixel value.

Default

0

Object Model Reference

[window.]document.imageName.border
[window.]document.images[i].border
[window.]document.getElementById(elementID).border

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the src attribute URL of an img element. A datasrc attribute must also be set for the img element. Works only with text file data sources in IE 5/Mac.

Example

<img datasrc="DBSRC3" alt="Current Radar" datafld="img3URL" height="100" width="150">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.imageName.dataFld
[window.]document.images[i].dataFld
[window.]document.getElementById(elementID).dataFld

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

Example

<img datasrc="DBSRC3" alt="Current Radar" datafld="img3URL" height="100" width="150">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.imageName.dataSrc
[window.]document.images[i].dataSrc
[window.]document.getElementById(elementID).dataSrc

dynsrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

dynsrc=" URL "

Internet Explorer 4 and later allows video clips (and VRML) to be displayed via the img element (as an alternate to the embed or object element). To help the browser differentiate between a dynamic and static image source, you use the dynsrc attribute in place of the src attribute to load the video clip. All other visual aspects of the img element are therefore immediately applicable to the rectangular region devoted to playing the video clip. See also the loop attribute for controlling the frequency of clip play and the start attribute.

Example

<img dynsrc="snowman.avi" loop="3" height="100" width="150">

Value

Any valid URL, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.images[i].dynsrc
[window.]document.imageName.dynsrc
[window.]document.getElementById(elementID).dynsrc

galleryimg:IE |6| NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

dynsrc=" featureSwitch "

Sets whether images that are at least 130 pixels high and wide display the Windows OS “My Pictures” toolbar during mouse rollovers in IE 6. This tool bar provides quick-click shortcuts to save, print, or email the image. You cannot control which buttons appear in the toolbar.

Example

<img src="rushmore.jpg" alt="Mount Rushmore" height="240" width="550" galleryimg="no">

Value

Constant value: yes | true | no | false.

Default

yes

Object Model Reference

[window.]document.images[i].galleryImg
[window.]document.imageName.galleryImg
[window.]document.getElementById(elementID).galleryImg

height, width:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

height=" length " width=" length "

Define the dimensions for the space on the page reserved for the image, regardless of the actual size of the image. For best performance (and backward script compatibility), you should set these attributes to the actual pixel height and width of the source image. If you supply a different measure, the browser scales the image (not very well) to fit the space defined by these attributes.

Example

<img src="surferDude.gif" alt="Surfer" height="100" width="200">

Value

Positive integer values or percentage values.

Default

Actual size of source image.

Object Model Reference

[window.]document.imageName.height
[window.]document.images[i].height
[window.]document.getElementById(elementID).height
[window.]document.imageName.width
[window.]document.images[i].width
[window.]document.getElementById(elementID).width

hspace, vspace:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

hspace=" pixelCount" vspace=" pixelCount"

Define a margin that acts as whitespace padding around the visual content of the img element. The hspace establishes a margin on the left and right sides of the image rectangle; the vspace establishes a margin on the top and bottom sides of the image rectangle. Both attributes are deprecated in HTML 4 in favor of the margin- or padding-related CSS properties.

Example

<img src="desk3.gif" alt="My Desktop" vspace="10" hspace="10">

Value

Integer representing the number of pixels for the width of the margin on the relevant sides of the img element’s rectangle.

Default

0

Object Model Reference

[window.]document.imageName.hspace
[window.]document.images[i].hspace
[window.]document.getElementById(elementID).hspace
[window.]document.imageName.vspace
[window.]document.images[i].vspace
[window.]document.getElementById(elementID).vspace

ismap:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

ismap

The Boolean ismap attribute tells the browser that the img element is acting as a server-side image map. To turn an image into a server-side image map, wrap the img element with an a element whose href attribute points to the URL of the CGI program that knows how to interpret the click coordinate information. The browser appends coordinate information about the click to the URL like a GET form method appends form element data to the action attribute URL. In the following example, if a user clicks at the coordinate point 50, 25, the browser sends "http://www.example.com/cgi-bin/nav.pl?50,25" to the server. A server CGI program named nav.pl might examine the region in which the coordinate point appears and send the relevant HTML back to the client.

Browsers also allow client-side image maps (see the usemap attribute), which operate more quickly for the user because there is no communication with the server to carry out the examination of the click coordinate point.

Example

<a href="http://www.example.com/cgi-bin/nav" target="main">
<img src="navbar.gif" alt="Navigation Bar" ismap height="90" width="120">
</a>

Value

The presence of the attribute turns the feature on.

Default

Off.

Object Model Reference

[window.]document.imageName.isMap
[window.]document.images[i].isMap
[window.]document.getElementById(elementID).isMap

longdesc:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

longdesc=" URL "

Specifies a URL of a document that contains a longer description of the element than what the content of the alt or title attributes reveal. One application of this attribute in future browsers is to retrieve an annotated description of the element for users who cannot read the browser screen. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream browsers provide no other functionality for this attribute.

Example

<img longdesc="navDesc.html" alt="Navigation Bar" src="navbar.jpg">

Value

Any valid URL, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.imageName.longDesc
[window.]document.images[i].longDesc
[window.]document.getElementById(elementID).longDesc

loop:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

loop=" loopCount "

If you specify a video clip with the dynsrc attribute, the loop attribute controls how many times the clip should play (“loop”) after it loads. If you set the value to zero, the clip loads but does not play initially. Video clips that are not currently running play when the user double-clicks on the image, but you may need to provide instructions for that on the page because there are no other obvious controls. This attribute does not control animated .gif playback.

Example

<img dynsrc="snowman.avi" alt="Snowman Movie"loop="3" height="100" width="150">

Value

Any positive integer or zero.

Default

1

Object Model Reference

[window.]document.imageName.loop
[window.]document.images[i].loop
[window.]document.getElementById(elementID).loop

lowsrc:IE 4 NN 3 Moz all Saf n/a Op n/a HTML n/a: Optional

 

lowsrc=" URL "

Not everyone has a fast Internet connection and that high-resolution images can take a long time to download to the client. To fill the void, the lowsrc attribute lets the author specify a URL of a lower-resolution (or alternate) image to download into the document space first. The lowsrc image should be the same pixel size as the primary src image.

Example

<img src="navbar.jpg" alt="Navigation Bar" lowsrc="navbarBW.jpg" height="60"
width="300">

Value

Any valid URL, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.imageName.lowsrc
[window.]document.images[i].lowsrc
[window.]document.getElementById(elementID).lowsrc

name:IE 4 NN 3 Moz all Saf all Op 7 HTML 4: Optional

 

name=" elementIdentifier "

If you are scripting an image (especially swapping precached images), backward-compatible scripting utilizes the name attribute value to reference the img object because the id attribute did not exist. References by name are more reliable than by numeric index within the document.images array because you can rearrange or delete images at any time and still maintain references to the remaining named images. For modern browsers only, you can use the id attribute value in place of the name attribute.

Example

<img name="mugshot" id="mugshot" alt="My face" src="janem.jpg" height="90" width="80">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.images[i].name
[window.]document.imageName.name
[window.]document.getElementById(elementID).name

src:IE all NN all Moz all Saf all Op 7 HTML all: Required

 

src=" URL "

URL to a file containing image data that is displayed through the img element. With the exception of specifying a dynsrc attribute in Internet Explorer for video clips or datasrc for IE data binding, the src attribute is required if you want to see any image in the img element space. The browser must be equipped to handle the image MIME type. On the World Wide Web, the most common image formats are GIF and JPEG. HTML or XHTML validation, of course, requires the src attribute and doesn’t accept the IE attribute alternatives.

Example

<img src="surferDude.gif" alt="Surfer" height="100" width="200">

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.images[i].src
[window.]document.imageName.src
[window.]document.getElementById(elementID).src

start:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

start=" videoStartType "

Whenever you set the dynsrc attribute of an img to display a video clip in Internet Explorer, you can direct the element to start playing the video immediately after the video file loads or when the user rolls the cursor over the image. The start attribute lets you decide the best user interface for your page.

Example

<img dynsrc="snowman.avi" loop="1" start="mouseover" height="100" width="150">

Value

One of the two case-insensitive constant values: fileopen | mouseover.

Default

fileopen

Object Model Reference

[window.]document.images[i].start
[window.]document.imageName.start
[window.]document.getElementById(elementID).start

suppress:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

suppress=" featureSwitch "

When engaged, this attribute prevents Navigator 4 from displaying the generic image icon, alt text, and raised image area while the image is downloading. If the image fails to load, the artifacts appear in the image space as if the attribute were not turned on.

Example

<img src="surferDude.gif" alt="Surfer" height="150" width="250" suppress="true">

Value

Boolean string value: true | false.

Default

false

usemap:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

usemap=" mapURL "

You can define a client-side image map with the help of the map and area elements. The map element is a named container for one or more area elements. Each area element sets a “hot” area on an image and assigns a link destination (and other settings) for a response to the user clicking in that region. The purpose of the usemap attribute is to establish a connection between the img element and a named map element in the same document. In some respects, the map element’s name is treated like an anchor in that the “address” of the map element is the element’s name preceded by a # symbol.

Example

<img src="navbar.gif" alt="Navigation Bar" usemap="#navigation"
height="90" width="120">

Value

A URL to the map element in the same document (a hash symbol plus the map name).

Default

None.

Object Model Reference

[window.]document.imageName.useMap
[window.]document.images[i].useMap
[window.]document.getElementById(elementID).useMap

vspace

See hspace.

width

See height.

<input>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Forbidden

 

<input>

An input element is sometimes known as a form control, although not all input elements are visible on the page. For the most part, an input element provides a place for users to enter text, click buttons, and make selections from lists. The data gathered from this interaction can be submitted to a server-side program (when the surrounding form element is submitted), or it may be used strictly on the client as a way for users to interact with client-side scripts. Server applications also commonly embed session data in a page’s hidden input elements so that the data gets submitted with the next form submission—one way to cascade data gathering across multiple form pages without maintaining the data temporarily on the server between page deliveries.

Prior to HTML 4, input elements were supposed to be wrapped by a form element in all instances. This restriction is loosening up, but Navigator 4 still requires the form wrapper in order to render input elements.

The primary attribute that determines the kind of control displayed on the page is the type attribute. This attribute can have one of the following values in standard HTML: button, checkbox, file, hidden, image, password, radio, reset, submit, or text.^[*] The Web Forms 2.0 standard (first natively supported in Opera 9 and detailed at http://www.whatwg.org/specs/) offers several other input types: add, date, datetime, datetime-local, email, month, move-up, move-down, number, range, time, url, and week. Not all input element types utilize the full range of attributes defined for the input element; sometimes a single attribute has different powers with different element types. For each attribute of the input element, the listing specifies the types to which it applies. Although the textarea element has its own tag, it is often treated like another form control.

Example

<form method="POST" action="http://www.example.com/cgi-bin/query.pl">
First Name: <input type="text" name="first" id="first" maxlength="15"><br>
Last Name: <input type="text" name="last" id="last" maxlength="25"><br>
ZIP Code: <input type="text" name="zip" id="zip" maxlength="10"><br>
<input type="reset">
<input type="submit">
</form>

Object Model Reference

[window.]document.formName.inputName   // but not img type
[window.]document.forms[i].elements[j] // but not img type
[window.]document.getElementById(elementID)

Element-Specific Attributes

accept	accesskey	action	align	alt
autocomplete	autofocus	border	checked	datafld
datasrc	disabled	dynsrc	enctype	form
height	hspace	inputmode	ismap	list
loop	lowsrc	max	maxlength	method
min	name	pattern	readonly	replace
required	size	src	start	step
template	type	usemap	value	vcard_name
vspace	width

Element-Specific Event Handler Attributes

Handler	IE	NN	Opera	Others	HTML
onafterupdate	4	n/a	n/a	n/a	n/a
onbeforeupdate	4	n/a	n/a	n/a	n/a
onchange	3	2	all	all	4
onformchange	n/a	n/a	9	n/a	n/a
onforminput	n/a	n/a	9	n/a	n/a
oninvalid	n/a	n/a	9	n/a	n/a
onselect	3	2	all	all	4

Not all events are active in all input types.

accept:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

accept=" MIMETypeList "

Specifies one or more MIME types for allowable files to be uploaded to the server when the form is submitted. The HTML 4 provides this attribute in case a browser wishes to incorporate some file type filtering prior to submitting a form with a file input element. In current mainstream browsers, this attribute has no practical impact on file selection or submission.

Input Types

file

Example

<input type="file" accept="text/html, image/gif" ...>

Value

MIME type (content type) value. For multiple items, a comma-delimited list is allowed. Web Forms 2.0 allows wildcards for MIME type ranges.

Default

None.

accesskey:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

accesskey=" character "

See the description of this shared attribute at the beginning of this chapter for general characteristics. For file input types, pressing the accesskey combination places the text pointer in the associated text box, but does not “click” the Browser button.

Input Types

All rendered types.

action:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

action=" URI "

Web Forms 2.0 extension that allows a submission of the enclosing form to a URI different from the regular form when the input element is clicked.

Input Types

image, submit

align:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" alignmentConstant "

Determines how the rectangle of the input image aligns within the context of the surrounding content. See "Alignment Constants" earlier in this chapter for a description of the possibilities for this attribute with img elements.

Input Types

image

Example

<input type="image" name="icon" src="icon.gif" align="absmiddle">

Value

Alignment-constant value applied to elements outside the image rectangle.

Default

left

Object Model Reference

[window.]document.formName.inputName.align
[window.]document.forms[i].elements[j].align
[window.]document.getElementById(elementID).align

alt:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

alt=" textMessage "

Provides text description of the input element image while the image downloads, in lieu of rendered images, or for text-to-speech browsers. Behaves just like the alt attribute of the img element.

Input Types

image

Example

<input type="image" name="icon" src="sndIcon.gif" alt="Sound Icon">

Value

Any quoted string of characters.

Default

None.

Object Model Reference

[window.]document.formName.inputName.alt
[window.]document.forms[i].elements[j].alt
[window.]document.getElementById(elementID).alt

autocomplete:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

autocomplete=" featureSwitch "

If an IE user has automatic form completion preference enabled, the autocomplete attribute governs the feature for the entire form. IE preserves (in an encrypted fashion) previous text and password entries, and presents a repeat visitor with one or more choices to complete the field entry. If the field is for data commonly stored in a user’s vCard, you can specify vcard_name attributes for text and password type input elements to let the browser pre-fill or assist the entry of a particular named field that matches one of the preferences entries. For more details on how AutoComplete works in HTML forms, visit http://msdn.microsoft.com/workshop/author/forms/autocomplete_ovr.asp.

Web Forms 2.0 specifies similar usage of this attribute, but does not rely on the proprietary Microsoft vCard system. Instead, it lets any supporting browser use whatever internal mechanism it wishes for preserving values that can be offered for automatic completion in subsequent entries.

Input Types

password, text; all text-oriented input types for Web Forms 2.0.

Example

<input type="text" name="homephone" vcard_name="vCard.Home.Phone" autocomplete="on">

Value

Constants: on | off.

Default

off

Object Model Reference

[window.]document.formName.inputName.autoComplete
[window.]document.forms[i].elements[j].autoComplete
[window.]document.getElementById(elementID).autoComplete

autofocus:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

autofocus="autofocus"

Web Forms 2.0 extension that brings focus to the element after the page loads. Should be assigned to only one form control element per page.

Input Types

All rendered types.

border:IE 4(Mac) NN 4 Moz all Saf n/a Op n/a HTML n/a: Optional

 

border=" pixels "

Specifies the thickness of a border around the input element image. Navigator 4 (only) places a border around the image by default. Set the border attribute to zero to remove the border.

Input Types

image

Example

<input type="image" name="icon" src="sndIcon.gif" border="0">

Value

Any integer pixel value.

Default

2 (Navigator 4) or 0 (All others).

Object Model Reference

[window.]document.formName.inputName.border
[window.]document.forms[i].elements[j].border
[window.]document.getElementById(elementID).border

checked:IE all NN all Moz all Saf all Op 7 HTML 4: Optional

 

checked

A Boolean attribute that designates whether the current checkbox or radio input element is turned on when the page loads. In the case of a radio button grouping, only one input element should have the checked attribute. Scripts can modify the internal value of this attribute after the page has loaded. When the form is submitted, an input element that has its checked attribute turned on sends its name/value pair as part of the form data. The name/value pair consists of values assigned to the name and value attributes for the element. If no value is assigned to the value attribute, the string value "active" or "on" is automatically assigned when the checkbox or radio button is highlighted. This is fine for checkboxes because each one should be uniquely named. However, all radio buttons in a related group must have the same name for browsers to handle the automatic highlighting and unhighlighting within the group. See the name attribute below.

Input Types

checkbox, radio

Example

<input type="checkbox" name="addToList" checked>Send email updates to this
web site.

Value

The presence of this attribute turns on its property.

Default

Off.

Object Model Reference

[window.]document.formName.inputName.checked
[window.]document.forms[i].elements[j].checked
[window.]document.getElementById(elementID).checked

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datafld=" columnName "

Used with IE 4 data binding to associate a remote data source column name with parts of various input elements. A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Input Types

button, checkbox, hidden, password, radio, text

Example

<input type="text" name="first" datasrc="DBSRC3" datafld="firstName">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.inputName.dataFld
[window.]document.forms[i].elements[j].dataFld
[window.]document.getElementById(elementID).dataFld

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Input Types

button, checkbox, hidden, password, radio, text

Example

<input type="text" name="first" datasrc="DBSRC3" datafld="firstName">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.inputName.dataSrc
[window.]document.forms[i].elements[j].dataSrc
[window.]document.getElementById(elementID).dataSrc

disabled:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

disabled

A disabled input element appears grayed out on the screen and cannot be activated by the user. A disabled form control cannot receive focus and does not become active within the tabbing order rotation. IE/Windows extends this to mean that if one radio button in a group is disabled, the entire group is disabled. Not so in IE/Mac or other browsers, which let unhighlighted buttons uncheck a disabled checked member of the group via scripting.

The name/value pair of a disabled input element is not sent to the server when the form is submitted. input elements that normally perform submissions do not submit their form when disabled.

The disabled attribute is a Boolean type, which means that in HTML format, its presence in the attribute sets its value to true. Its value can also be adjusted after the fact by scripting (see the input object in Chapter 2).

Input Types

All.

Example

<input type="submit" disabled value="Ready to Submit">

Value

The presence of the attribute disables the element.

Default

false

Object Model Reference

[window.]document.formName.inputName.disabled
[window.]document.forms[i].elements[j].disabled
[window.]document.getElementById(elementID).disabled

dynsrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

dynsrc=" URL "

Internet Explorer 4 and later allows video clips (and VRML) to be displayed via an image type input element. To help the browser differentiate between a dynamic and static image source, you use the dynsrc attribute in place of the src attribute to load the video clip. All other visual aspects of the input type input element are therefore immediately applicable to the rectangular region devoted to playing the video clip. See also the loop attribute for controlling the frequency of clip play and the start attribute.

Input Types

image

Example

<input type="image" dynsrc="submit.avi" alt="Submit Button" loop="3" height="100"
width="150">

Value

Any valid URL, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.formName.inputName.dynsrc
[window.]document.forms[i].elements[j].dynsrc
[window.]document.getElementById(elementID).dynsrc

enctype:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

enctype=" MIMEType "

Web Forms 2.0 extension that allows (in concert with other attributes, such as action) a submission of the enclosing form to a URI and enclosure MIME type different from the regular form when the input element is clicked.

Input Types

image, submit

form:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

form=" formID [formID] ... "

Web Forms 2.0 extension that lets you associate a single form control element with one or more forms that do not enclose the controls. Because input elements in Web Forms 2.0 are not confined to be descendants of form elements, the input elements may be located away from the form element. The form attribute connects the input element with one or more form elements on the page.

Input Types

All rendered types.

Example

<input type="text" id="searchText" form="GoogleSearch" />

Value

ID of one or more form elements on the page. Multiple references are space-delimited.

Default

None.

height, width:IE 4 NN 4 Moz all Saf all Op 7 HTML n/a: Optional

 

height=" pixels " width=" pixels "

Defines the dimensions of the image used for the input element. If you omit these attributes, the browser waits for the image to load before allocating space on the page for the element.

Input Types

image

Example

<input type="image" src="submit.jpg" height="20" width="60">

Value

Positive integers.

Default

Default image size.

hspace, vspace:IE 4 NN n/a Moz all Saf all Op 7 HTML n/a: Optional

 

height=" pixels " width=" pixels "

Establishes extra padding around the image (and, thus, the input element) to keep other content at a minimum distance. The hspace controls the padding thickness of both the left and right edges; vspace does the same for top and bottom. Safari adds support for other input element types.

Input Types

image

Example

<input type="image" src="submit.jpg" alt="Submit Button"
height="20" width="60" hspace="10" vspace="20">

Value

Positive integers.

Default

0

inputmode:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

inputmode=" ScriptToken [ModifierToken] "

Web Forms 2.0 extension (adopted whole from the W3C XForms 1.0 specification at http://www.w3.org/TR/xforms/sliceE.html) that directs the browser to display the appropriate text input user interface for a written language. Consult the W3C XForms 1.0 documents for details.

Input Types

email, password, text, url

Example

<input type="text" id="searchText" inputmode="hiragana" />

Value

Written language script token with an optional modifier token (space-delimited). Tokens generally correspond to Unicode scripts (http://www.unicode.org/unicode/reports/tr24/).

Default

None.

ismap:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

ismap

The Boolean ismap attribute tells the browser that the image representing the input element is acting as a server-side image map. Unlike the img element, the image type input element has an action (submitting the form) associated with it, so no surrounding a element is required. The browser appends coordinate information about the click to the URL of the form’s action. See the usemap attribute for client-side image map details.

Input Types

image

Example

<input type="image src="navbar.gif" alt="Navigation Bar" ismap height="90"
width="120">

Value

The presence of the attribute turns the feature on.

Default

Off.

Object Model Reference

[window.]document.formName.inputName.isMap
[window.]document.forms[i].elements[j].isMap
[window.]document.getElementById(elementID).isMap

list:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

list=" datalistElementID "

Web Forms 2.0 extension that lets you associate a set of predefined entries tailored for the input type, yet the input element also allows for text entry of a value not in the list. Predefined entries are coded as option elements inside a Web Forms 2.0 datalist element. The list attribute’s value is the ID of the datalist element containing the predefined entries. In Opera’s implementation, predefined entries appear as a pick list below the input element when the element has focus.

Input Types

date, datetime, datetime-local, email, month, number, range, text, time, url, week

Example

<label>Enter your operating system:<input type="text" name="os" list="oses" />
</label>
<datalist id="oses">
   <option value="">
   <option value="Windows Vista">
   <option value="Windows XP">
   <option value="Windows 98">
   <option value="Mac OS X">
   <option value="Linux">
</datalist>

Value

ID of the associated datalist element.

Default

None.

loop:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

loop=" loopCount "

If you specify a video clip with the dynsrc attribute, the loop attribute controls how many times the clip should play (“loop”) after it loads. If you set the value to zero, the clip loads but does not play initially. Video clips that are not currently running play when the user double-clicks on the image, but you may need to provide instructions for that on the page because there are no other obvious controls.

Input Types

image

Example

<input type="image" dynsrc="snowman.avi" alt="Snowman Movie" loop="3"
height="100" width="150">

Value

Any positive integer or zero.

Default

1

Object Model Reference

[window.]document.formName.inputName.loop
[window.]document.forms[i].elements[j].loop
[window.]document.getElementById(elementID).loop

lowsrc:IE 4 NN all Moz all Saf n/a Op n/a HTML n/a: Optional

 

lowsrc=" URL "

Provides a URL to an alternate low-resolution image to be loaded initially if the src image is taking a long time to load.

Input Types

image

Example

<input type="image" src="navbar.jpg" alt="Navigation Bar" lowsrc="navbarBW.jpg"
height="60" width="300">

Value

Any valid URL, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.formName.inputName.lowsrc
[window.]document.forms[i].elements[j].lowsrc
[window.]document.getElementById(elementID).lowsrc

max, min:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

max=" rangeMaximum "
min=" rangeMinimum "

Web Forms 2.0 extension that lets you specify the minimum and maximum values for an input element designed for numeric, date, time, and file upload data. If a user enters values outside of these boundaries, the browser sets the rangeUnderflow or rangeOverflow properties of the ValidityState object, which scripts may inspect for further error indications to the user.

Input Types

date, datetime, datetime-local, file, month, number, range, time, week

Example

<input type="time" name="apptTime" min="09:00" max="17:00" />

Value

For number and range types, a positive or negative integer or floating-point number; for date type, an ISO 8601 format value (e.g., 2007-03-15); for combinations of date and time, an ISO 8601 format value (e.g., 2007-03-15T08:00:00, with a trailing Z if not the local variant); for month type, an ISO format value (e.g., 2007-03); for week type, an ISO 8601 format value (e.g., 2007W3); for file type, a positive integer indicating the number of allowed files to be uploaded with the form.

Default

None.

maxlength:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

maxlength=" characterCount "

Defines the maximum number of characters that may be typed into a text field input element. In practice, browsers beep or otherwise alert users when a typed character would exceed the maxlength value. There is no innate correlation between the maxlength and size attributes. If the maxlength allows for more characters than fit within the specified width of the element, the browser provides horizontal scrolling (albeit awkward for many users) to allow entry and editing of the field.

Input Types

password, text

Example

<input type="text" name="ZIP" maxlength="10">

Value

Positive integer.

Default

Unlimited.

Object Model Reference

[window.]document.formName.inputName.maxLength
[window.]document.forms[i].elements[j].maxLength
[window.]document.getElementById(elementID).maxLength

method:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

method="GET" | "POST"

Web Forms 2.0 extension (when used with other extensions, such as the action attribute) that allows a submission for the enclosing form to a URI different and even method from the regular form when the input element is clicked.

Input Types

image, submit

name:IE all NN all Moz all Saf all Op 7 HTML all: Optional/Required

 

name=" elementIdentifier "

If the input element is part of a form being submitted to a server, the name attribute is required if the value of the element is to be submitted with the form. For forms that are in documents for the convenience of scripted form elements, input element names are not required.

The identifier you assign to the name attribute becomes part of the name/value pair submitted to the server. Radio button elements that are to act as a mutually exclusive group must all have the same name attribute value. In some browsers, failure to include a name attribute assignment disallows user access to checkbox or radio input elements.

The HTML 4 and XHTML specifications encourage using the id attribute in place of the name attribute throughout your pages. Mainstream browsers do not submit data from input elements bearing an id assignment but no name assignment. For consistency with DHTML-scripted DOM access of all elements, it’s good practice to assign both attributes, even using the same identifier for both (except for radio buttons, whose IDs need to be unique, while their names are shared). Let the name attribute carry the element’s value to the server, while scripts reach the elements via their IDs—especially in browsers that provide the IE document.all.elementID or W3C DOM document.getElementById(elementID) referencing syntax. Perhaps reluctantly, the strict XHTML DTD validates the name attribute for input elements so that validated pages will function within the reality of former and current browser implementations.

Input Types

All.

Example

<input type="text" name="ZIP" id="ZIP" maxlength="10">

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.inputName.name
[window.]document.forms[i].elements[j].name
[window.]document.getElementById(elementID).name

pattern:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

pattern=" regularExpression "

Web Forms 2.0 extension that lets you specify a regular expression pattern that the user’s input must match to pass validation.

Input Types

email, password, text, url

Example

<input pattern="[A-Z][0-9]{7}" name="partNum"
   title="A part number is an uppercase letter followed by seven numbers." />

Value

A regular expression (but not surrounded by the slash symbols, as used in JavaScript regular expressions).

Default

None.

readonly:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

readonly

When the readonly attribute is present, the text field input element cannot be edited on the page by the user (although scripts can modify the content). A field marked as readonly should not receive focus within the tabbing order (although IE 4 and later for the Macintosh allows the field to receive focus and beeps if a user tries to type).

Input Types

password, text

Example

<input type="text" name="ZIP" readonly>

Value

The presence of the attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.inputName.readOnly
[window.]document.forms[i].elements[j].readOnly
[window.]document.getElementById(elementID).readOnly

replace:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

replace=" type "

Web Forms 2.0 extension that associates instructions to a submission form control with how to process the data returned from the server after the form is submitted. The choice is whether the response replaces the original document in the browser (the default) or the browser should apply returned values to the form, rather than retrieve initial form data (if a URL is assigned to the data attribute of the form element).

Input Types

image, submit

Example

<input type="submit" replace="values" action="http://example.com/custRecord.jsp"
   method="POST" />

Value

One of two constant values: document | values.

Default

document

required:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

required="required"

Web Forms 2.0 extension that signifies whether the input element’s value is required for submission. Sets the missingValue property of the ValidityState object to true if the element receives no value.

Input Types

checkbox, date, datetime, datetime-local, email, file, month, number, password, radio, range, text, time, url, week

size:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

size=" elementWidth "

In practice, the size attribute is limited to describing the width of text field input elements based on the number of characters that display. The actual rendered width is calculated based on the font setting (or default font) for the element, but the results are not always perfect. Variations in font rendering (and the ability to specify alternate font faces and sizes in newer browsers) sometimes lead to unexpectedly narrower fields. Therefore, it is not wise to automatically set the size and maxlength attributes to the same value without testing the results on a wide variety of browsers and operating systems with worst-case data (for example, all “m” or “W” characters in proportional fonts). The HTML 4 specification indicates that the size attribute might be applied to other input element types (as pixels, rather than characters), but as of recent browsers, this is not the case. In the meantime, you can use CSS properties to make buttons wider than the default size that tracks the width of the value attribute string.

Input Types

password, text

Example

<input type="text" name="ZIP" maxlength="10" size="12">

Value

Any positive integer.

Default

20

Object Model Reference

[window.]document.formName.inputName.size
[window.]document.forms[i].elements[j].size
[window.]document.getElementById(elementID).size

src:IE all NN all Moz all Saf all Op 7 HTML all: Required

 

src=" URL "

URL to a file containing image data that is displayed through the input element of type image. The browser must be equipped to handle the image MIME type. On the World Wide Web, the most common image formats are GIF and JPEG.

Input Types

image

Example

<input type="image" name="icon" src="sndIcon.gif" border="0">

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.formName.inputName.src
[window.]document.forms[i].elements[j].src
[window.]document.getElementById(elementID).src

start:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

start=" videoStartType "

Whenever you set the dynsrc attribute of an image type input element to display a video clip in Internet Explorer, you can direct the element to start playing the video immediately after the video file loads or when the user rolls the cursor over the image. The start attribute lets you decide the best user interface for your page.

Input Types

image

Example

<input type="image dynsrc="submit.avi" alt="Submit Button" loop="1"
start="mouseover" height="100" width="150">

Value

One of the two case-insensitive constant values: fileopen | mouseover.

Default

fileopen

Object Model Reference

[window.]document.formName.inputName.start
[window.]document.forms[i].elements[j].start
[window.]document.getElementById(elementID).start

step:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

step=" precision "

Web Forms 2.0 extension that lets you specify the incremental values permitted in the input element. If a min and/or max attribute is set, those values set boundaries for data entered by the user; otherwise a zero boundary is used (with 1970-01-01T00:00:00.0Z being the zero point for date-related elements).

Input Types

date, datetime, datetime-local, file, month, number, range, time, week

Example

<input type="time" name="apptTime" min="09:00" max="17:00" value="09:00"
step="900" />

Value

For number and range types, a positive or negative integer or floating-point number; for date, week, and month types, an integer representing a number of days, weeks, or months, respectively; for combinations of date and time, a number of seconds.

Default

60 (datetime, datetime-local, time); 1 (others).

target:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

target=" windowOrFrameName "

Web Forms 2.0 extension that allows (in concert with other attributes, such as action) the page returned from a submission of the enclosing form to appear in a window or frame different from the destination of the page returned from regular form when the input element is clicked.

Input Types

image, submit

template:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

template=" repeatedBlockId "

Web Forms 2.0 extension that lets you associate an add type input element to an element (typically a tr element) that has been coded to act as a template for the possibility of having repeated blocks of content added to the form. The repeatable element has its repeat attribute set to template, and the add element’s template attribute points to the ID of the repeated element. For example, when clicked, the add element adds a new row to the table with the same cell arrangement as the template.

Input Types

add

Example

<form>
   <table>
      <tr>
         <th>Product</th>
         <th>Quantity</th>
      </tr>
      <tr id="order" repeat="template">
         <td><input type="text" name="row[order].product" value=""></td>
         <td><input type="text" name="row[order].quantity" value="1"></td>
      </tr>
   </table>
   <p><button type="add" template="order">Add Row</button></p>
   <p><button type="submit">Submit</button></p>
</form>

Value

A repeated element’s id attribute value.

Default

None.

type:IE all NN all Moz all Saf all Op 7 HTML all: Required

 

type=" elementType "

Advises the browser how to render the input element (or even whether the element should be rendered at all). Possible choices for all browsers are as follows.

Type	Description
button	A clickable button whose action must be scripted. Its label is assigned by the value attribute. If you want to use HTML to format the label of a button, use the button element instead.
checkbox	A free-standing checkbox that provides two states (active/on and inactive/off). Its label is created by HTML text before or after the input element tag (also see the label element). The value attribute value is submitted with a form.
file	A button and field that lets the user select a local file for eventual uploading to the server. A click of the button generates a File dialog, and the name (or pathname) of the selected file appears in the field. The server must have a CGI script (invoked by the form’s action attribute URI) to accept the incoming file at submission time.
hidden	An invisible field often used to carry over database or state data from submission to submission without bothering the user with its content (or having to store the temporary data on the server). The name/value pair is submitted with the form.
image	A graphical button whose sole default action is to submit the form. The coordinate points x,y of the click on the image are submitted as two name/value pairs linked by an ampersand character: inputName.x=n&inputName.y=m.
password	A text field that presents bullets or asterisks for each typed character to ensure over-the-shoulder privacy for the user. The plain-language text is submitted as the value for this element.
radio	One of a related group of on-off buttons. Assigning the same value to the name attribute of multiple radio buttons assembles them in a related group. Clicking on one button in the group activates it while unhighlighting all others. The value attribute value of the activated member is submitted with a form.
reset	A button whose sole job is to revert the form’s elements to the values they had when the form initially loaded into the client. A custom label can be assigned via the value attribute.
submit	A button whose sole job is to submit the form. A custom label can be assigned by the value attribute. If name and value attributes are assigned for the element, their values are submitted with the form.
text	A one-line field for typing text that gets submitted as the value of the element (in a URL-encoded format). For a multiple-line field, see the textarea element.

Apple includes support in Safari 2 for two additional types (search and range), but these types are intended for use in Dashboard widgets rather than web pages.

The Web Forms 2.0 standard (first implemented in Opera 9) adds a number of intelligent input types, most of which have user interface features to facilitate entry of accurate form data (original HTML types are also enhanced with data entry validation powers). Those new types are as follows.

Type	Description
add	A clickable button that adds a repeated block of HTML content that has been coded as a repetition block.
date	A text entry field for date data in the ISO 8601 format (e.g., 2007-03-15).
datetime	A text entry field for date and UTC time data in the ISO 8601 format (e.g., 2007-03-15T21:45:00Z).
datetime-local	A text entry field for date and local time data in the ISO 8601 format (e.g., 2007-03-15T15:45:00).
email	A text entry field for an email address formatted according to RFC 2882 (section 3.4.1).
month	A text entry field for numeric entry of a combination of year and month (e.g., 2007-03).
move-down	A clickable button that moves the nearest ancestor repetition block down by one increment (e.g., moving a table row down one row).
move-up	A clickable button that moves the nearest ancestor repetition block up by one increment (e.g., moving a table row up one row).
number	A text entry field for numeric entry only.
range	An element that facilitates user choice of a value within a predefined range. The design is up to the browser maker, but a typical design is a slider control.
remove	A clickable button that removes a repeated block of HTML content.
time	A text entry field for time data in the ISO 8601 format (e.g., 23:45:00).
url	A text entry field for an Internet address in the Internationalized Resource Identifier format of RFC3987 (http://www.ietf.org/rfc/rfc3987.txt).
week	A text entry field for numeric entry of a combination of year and week (e.g., 2007W22).

Input Types

All.

Example

<input type="button" value="Toggle Sound" onclick="toggleSnd( )">
<input type="checkbox" name="connections" value="ISDN">ISDN
<input type="file" name="uploadFile">
<input type="hidden" name="prevState" id="prevState" value="modify">
<input type="image" name="graphicSubmit" src="submit.jpg" height="40" width="40">
<input type="password" name="password" maxlength="12" size="20">
<input type="radio" name="creditCard" value="Visa">Visa
<input type="reset">
<input type="submit" value="Send Encrypted">
Social Security Number:<input type="text" name="ssn" value="###-##-####"
onclick="validateSSN(this)">

Value

Any one of the known input element types: button | checkbox | file | hidden | image | password | radio | reset | submit | text.

Default

text

Object Model Reference

[window.]document.formName.inputName.type
[window.]document.forms[i].elements[j].type
[window.]document.getElementById(elementID).type

usemap:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

usemap=" mapURL "

You can define a client-side image map for an image type input element with the help of the map and area elements. The map element is a named container for one or more area element. Each area element sets a “hot” area on an image and assigns a link destination (and other settings) for a response to the user clicking in that region. The purpose of the usemap attribute is to establish a connection between the image type input element and a named map element in the same document. In some respects, the map element’s name is treated like an anchor in that the “address” of the map element is the element’s name preceded by a # symbol.

Input Types

image

Example

<input type="image" src="submit.gif" alt="Submit Button" usemap="#submitter"
height="90" width="120">

Value

A URL to the map element in the same document (a hash symbol plus the map name).

Default

None.

Object Model Reference

[window.]document.formName.inputName.useMap
[window.]document.forms[i].elements[j].useMap
[window.]document.getElementById(elementID).useMap

value:IE all NN all Moz all Saf all Op 7 HTML all: Optional/Required

 

value=" text "

Preassigns a value to an input element that is submitted to the server as part of the name/value pair for the element. Some input element types are not submitted (an unchecked radio button, for example), but any value you associate with all but the button or reset type input element reaches the server when the element is submitted.

In the case of text and password input elements, the value attribute contains a default entry. As the user makes a change to the content of the text field, the value changes, although the source code does not. When a form is reset (via a reset input element), the default values are put back into the text fields.

The value attribute is required only for checkbox and radio input elements. For input elements that are rendered as standard clickable buttons, the value attribute defines the label that appears on the button.

Input Types

All.

Example

<input type="checkbox" name="connections" value="ISDN">ISDN

Value

Any text string.

Default

None.

Object Model Reference

[window.]document.formName.inputName.defaultValue
[window.]document.forms[i].elements[j].defaultValue
[window.]document.getElementById(elementID).defaultValue
[window.]document.formName.inputName.value
[window.]document.forms[i].elements[j].value
[window.]document.getElementById(elementID).value

vcard_name:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

vcard_name=" vcardField "

If an IE user has automatic form completion preference enabled, the autocomplete attribute governs the feature for the entire form. If the field is for data commonly stored in a user’s vCard, you can specify vcard_name attributes for text and password type input elements to let the browser pre-fill or assist the entry of a particular named field that matches one of the preferences entries. For more details on how AutoComplete works in HTML forms, visit http://msdn.microsoft.com/workshop/author/forms/autocomplete_ovr.asp.

Input Types

password, text

Example

<input type="text" name="homephone" vcard_name="vCard.Home.Phone" autocomplete="on">

Value

Constants: vCard.Business.City | vCard.Business.Country | vCard.Business.Fax | vCard.Business.Phone | vCard.Business.State | vCard.Business.StreetAddress | vCard.Business.URL | vCard.Business.Zipcode | vCard.Cellular | vCard.Company | vCard.Department | vCard.DisplayName | vCard.Email | vCard.FirstName | vCard.Gender | vCard.Home.City | vCard.Home.Country | vCard.Home.Fax | vCard.Home.Phone | vCard.Home.State | vCard.Home.StreetAddress | vCard.Home.Zipcode | vCard.Homepage | vCard.JobTitle | vCard.LastName | vCard.MiddleName | vCard.Notes | vCard.Office | vCard.Pager.

Default

None.

Object Model Reference

[window.]document.formName.inputName.vcard_name
[window.]document.forms[i].elements[j].vcard_name
[window.]document.getElementById(elementID).vcard_name

vspace

See hspace.

width

See height.

<ins>:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<ins>...</ins>

The ins element and its companion, del, define a format that shows which segments of a document’s content have been marked up for insertion (or deletion) during the authoring process. This is far from a workflow management scheme, but in the hands of a supporting WYSIWYG HTML authoring tool, these elements can assist in controlling generational changes of a document in process.

Browsers that support this element render text contained by the element as underlined (whereas del elements are in a strikethrough style). The HTML 4 specification includes two potentially useful attributes for preserving hidden information about the date and time of the alteration and some descriptive text about the change.

Example

<p>Four score and
<del cite="Fixed the math">eight</del><ins>seven</ins> years ago...</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

cite

datetime

Element-Specific Event Handler Attributes

None.

cite:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

cite=" text "

A description of the reason for the change or other notation to be associated with the element, but normally hidden from view. In Mozilla, the context menu for such an element contains a Properties choice, which leads to a displayed list of attributes and their values for the visitor. Or, your DHTML scripts can access the information through the element object’s cite property, and add value to the presentation.

Example

<ins cite="Fixed the math —A.L.">seven</ins>

Value

Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).cite

datetime:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

datetime=" datetimeString "

The date and time the insertion was made. This information is most likely to be added into a document with an HTML authoring tool designed to track content insertions and deletions. Data from this attribute can be recalled later as an audit trail to changes of the document. There can be only one datetime attribute value associated with a given ins element. In Mozilla, the context menu for such an element contains a Properties choice, which leads to a displayed list of attributes and their values for the visitor. Or, your DHTML scripts can access the information through the element object’s dateTime property, and add value to the presentation.

Example

<ins datetime="2001-09-11T08:56:00-04:00">SomeInsertedTextHere</ins>

Value

The datetime attribute requires a value in a special date-time format that conveys information about the date and time in such a way that the exact moment can be deduced from any time zone around the world. Syntax for the format is as follows: yyyy-MM-dd T hh:mm:ssTZD.

yyyy

Four-digit year

MM

Two-digit month (01 through 12)

dd

Two-digit date (01 through 31)

T

Uppercase “T” to separate date from time

hh

Two-digit hour in 24-hour time (00 through 23)

mm

Two-digit minute (00 through 59)

ss

Two-digit second (00 through 59)

TZD

Time Zone Designator

There are two formats for the Time Zone Designator. The first is simply the uppercase letter “Z”, which stands for UTC (Coordinated Universal Time—also called “Zulu”). The other format indicates the offset from UTC that the time shown in hh:mm:ss represents. This time offset consists of a plus or minus symbol and another pair of hh:mm values. For time zones west of Greenwich Mean Time (which, for all practical purposes is the same as UTC), the operator is a negative sign because the main hh:mm:ss time is earlier than UTC; for time zones east of GMT, the offset is a positive value. For example, Pacific Standard Time is eight hours earlier than UTC: when it is 6:00 P.M. in the PST zone, it is 2:00 A.M. the next morning at UTC. Thus, the following examples all represent the exact same moment in time (Time Zone Designator shown in boldface for clarification only):

2003-01-30T02:00:00Z	UTC
2003-01-29T21:00:00−05:00	Eastern Standard Time
2003-01-29T18:00:00−08:00	Pacific Standard Time
2003-01-30T13:00:00+11:00	Sydney, Australia

For more details about this way of representing time, see the ISO-8601 standard.

Default

None.

<isindex>:IE all NN all Moz all Saf all Op n/a HTML all: HTML End Tag: Forbidden

 

<isindex>

The isindex element is a longtime holdover from the earliest days of HTML and is deprecated in HTML 4 in favor of the text input element. The isindex element tag belongs in the head element. In modern browsers, it is rendered as a simple text field between two hr elements. When a user types text into the field and presses the Enter/Return key, the content of the field is URL-encoded (with + symbols substituted for spaces) and sent to the server with the URL of the current document. A CGI program on the server must know how to process this URL and return HTML for display in the current window or frame.

Example

<head>
<isindex prompt="Enter a search string:">
</head>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

prompt

Element-Specific Event Handler Attributes

None.

prompt:IE all NN all Moz all Saf all Op n/a HTML 4: Optional

 

prompt=" message "

This attribute lets you assign the prompt message that appears with the element.

Example

<isindex prompt="Enter a search string:">

Value

Any quoted string.

Default

None.

<kbd>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<kbd>...</kbd>

The kbd element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A kbd element is one that displays text that a user is supposed to type on the keyboard, presumably to fill a text field or issue some command.

Browsers have free rein to determine how (or whether) to distinguish kbd element content from the rest of the body element. Most browsers elect to use a monospace font for the text. Override the default with a style sheet as you see fit.

Example

<p>If you don't know the answer, type <kbd>NONE</kbd> into the text box.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<keygen>:IE n/a NN 3 Moz all Saf all Op 7 HTML n/a: HTML End Tag: Forbidden

 

<keygen>

A keygen element allows a form to be submitted with key encryption, where the server expects a form to be packaged with an encrypted key. The client browser must have a digital certificate installed. The user sees two results of including the keygen element inside a form element. First, a select list of available encryption key sizes is rendered in the form where the keygen element appears. When the user submits the form, the user may see one or more security-related dialogs for confirmation. This element builds on the public-key encryption systems in Navigator and Netscape’s Certificate Management System (CMS). Documentation is available at http://www.redhat.com/docs/manuals/cert-system/admin/overview.htm.

Example

<form ...>
...
<keygen name="encryptedOrder" challenge="39457582201">
</form>

Element-Specific Attributes

challenge

keytype

name

pqg

Element-Specific Event Handler Attributes

None.

challenge:IE n/a NN 3 Moz all Saf all Op 7 HTML n/a: Required

 

challenge=" challengeString "

If the server is equipped to interpret a challenge string for verification of an encrypted package, the challenge attribute is the challenge string. If you assign an empty string to the attribute, the key is encoded as an IA5STRING.

Example

<keygen name="encryptedOrder" challenge="39457582201">

Value

Any string.

Default

Empty string.

keytype:IE n/a NN 3 Moz all Saf n/a Op n/a HTML n/a: Optional/Required

 

keytype=" keyType "

Sets the type of key to be created by the CMS prior to submitting the form data. This attribute is required only for the secondary type, DSA.

Example

<keygen name="encryptedOrder" challenge="39457582201" keytype="DSA">

Value

One of two constant values: RSA | DSA.

Default

RSA

name:IE n/a NN 3 Moz all Saf all Op 7 HTML n/a: Required

 

name=" identifier "

Encrypting a form turns the entire form into a value that is part of a name/value pair. The name attribute assigns the “name” part of the name/value pair. If the server successfully decrypts the package, the individual form element name/value pairs are available to the server for further processing.

Example

<keygen name="encryptedOrder" challenge="39457582201">

Value

Case-insensitive identifier.

Default

None.

pqg:IE n/a NN 3 Moz all Saf n/a Op n/a HTML n/a: Optional/Required

 

pqg=" dssParams "

If you specify the DSA key type for the keytype attribute, you must also assign associated parameter values to the pqg attribute. An explanation of the algorithms used to derive these values may be found at ftp://ftp.ietf.org/internet-drafts/draft-ietf-pkix-ipki-pkalgs-05.txt.

<label>:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<label>...</label>

The label element defines a structure and container for the label associated with an input element. Because the rendered labels for most form controls are not part of the control element’s tag, the label element provides a way for an author to associate the context of the label with its control. A label element also simplifies assigning uniform styles to all form labels.

You have two ways to provide the association. One is to assign the id attribute value of the control to the for attribute of the label element. The other is to wrap the input element inside a label element. The latter is possible only if the label and control are part of running body content; if you must physically separate the label from the control because they exist inside separate td elements of a table, you must use the for attribute linkage. Whether the label is rendered in front of or after the control depends entirely on the relative locations of the tags in the source code.

Example

<form>
<label>Company:<input type="text" name="company"></label><br>
<label for="stateEntry">State:</label>
<input type="text" name="state" id="stateEntry">
...
</form>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

accesskey

datafld

dataformatas

datasrc

for

Element-Specific Event Handler Attributes

None.

accesskey:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

accesskey=" character "

A character key (in combination with one or more modifier keys) that brings focus to, or activates, the associated input element. See the description of this shared attribute at the beginning of this chapter for general characteristics.

Example

<label for="stateEntry" accesskey="s">State:</label>

Value

Single character of the document set.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).accessKey

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the label of an input element. The data source column must be either plain text or HTML (see dataformatas). A datasrc attribute must also be set for the label element. Works only with text file data sources in IE 5/Mac.

Example

<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML">
</label>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataFld

dataformatas:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

dataformatas=" dataType "

Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. This attribute setting depends entirely on how the data source is constructed. Works only with text file data sources in IE 5/Mac.

Example

<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML">
</label>

Value

IE recognizes two possible settings: text | html.

Default

text

Object Model Reference

[window.]document.getElementById(elementID).dataFormatAs

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

Example

<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML">
</label>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc

for:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

for=" inputElementIdentifier "

A unique identifier that is also assigned to the id attribute of the input element to which the label is to be associated. The for attribute is necessary only when you elect not to wrap the input element inside the label element, in which case the for attribute performs the binding between the two elements.

Example

<label for="stateEntry">State:</label>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).htmlFor

<layer>:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: HTML End Tag: Required

 

<layer>...</layer>

A layer element is a positionable element in Navigator 4’s object model (e.g., like a block-level element whose CSS position attribute is set to absolute). As a result, many of the attributes are named according to the Navigator 4 way of positioning, sizing, and stacking positionable elements. The element was removed for the subsequent move to Mozilla, and will not be implemented in new browsers or W3C standards.

Content for a layer element can be read from a separate file (with the src attribute) or wired into the current document by placing the HTML between the start and end tags. You can include both types of content in the same layer element. Content from the src document is rendered first (as its own block-level element), with additional content starting on its own line below the external content’s rectangle.

A layer element can be positioned anywhere within a document and can overlap content belonging to other layers (including the base document layer). Under link or script control, content for an individual layer can be changed without having to reload the other content on the page. Moreover, layer elements may be nested inside one another.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>

Object Model Reference

[window.]document.layerName

Element-Specific Attributes

above	background	below	bgcolor	clip
height	id	left	pagex	pagey
src	top	visibility	width	z-index

Element-Specific Event Handler Attributes

Handler	NN	IE/Others	HTML
[a]
onblur	4	n/a	n/a
onfocus	4	n/a	n/a
onload	4	n/a	n/a
onmousedown	4[a]	n/a	n/a
onmouseout	4[a]	n/a	n/a
onmouseover	4[a]	n/a	n/a
onmouseup	4[a]	n/a	n/a
[a] Event capture mode only

above:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

above=" layerID "

Names the positionable element that is to be above (in front of) the current layer in the stacking order. This is a different way to set the z-index attribute that does not rely on an arbitrary numbering system. If you use the above attribute, do not use the below or z-index attribute for the same layer element.

Example

<layer id="instrux" bgcolor="yellow" src="instrux.html" above="help1"
width="200" height="300">
</layer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.above

background:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

background=" URL "

Specifies an image file that is used as a backdrop to the text and other content of the layer element. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available layer space. Smaller images download faster but are obviously repeated more often in the background. Animated GIFs are also allowable but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Example

<layer background="blueCrinkle.jpg" src="instrux.html" width="200" height="300">
</layer>

Value

Any valid URL to an image file, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.layerName.background

below:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

below=" layerID "

Names the positionable element that is to be below (behind) the current layer in the stacking order. This is a different way to set the z-index attribute that does not rely on an arbitrary numbering system. If you use the below attribute, do not use the above or z-index attribute for the same layer element.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" below="thankyou">
</layer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.below

bgcolor:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the entire layer rectangle. If you combine a bgcolor and background, any transparent areas of the background image let the background color show through.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

Object Model Reference

[window.]document.layerName.bgColor

clip:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

clip="[ leftPixel , topPixel ,] rightPixel , bottomPixel "

A clipping region is a rectangular view to the full layer content. Only content that is within the clipping rectangle can be seen on the page. The default value of the clip attribute is either the default size of the content or the layer element’s width by the automatically flowing content length. Setting the clip attribute lets you rein in long content that might flow beyond a fixed rectangle desired for the page design.

Example

<layer bgcolor="yellow" src="instrux.html" clip="50,50" width="200" height="300">
</layer>

Value

clip attribute values are pixel measures from the top and left edges of the element as it flows in the document. The order of values is clockwise from the left edge, around the rectangle sides: left, top, right, bottom. If you supply only two values, Navigator 4 assumes the left and top values are zero, meaning that you wish to adjust only the right and bottom edges. Thus, a setting of "50,50" means that the clipping region is 50 pixels square, starting at the top-left corner of the layer’s rectangle. If you want the same size view starting 10 pixels in from the left, the clip attribute setting becomes "10,0,60,50".

Default

Naturally flowing viewing area of layer content.

Object Model Reference

[window.]document.layerName.clip.left
[window.]document.layerName.clip.top
[window.]document.layerName.clip.right
[window.]document.layerName.clip.bottom

height, width:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

height=" length " width=" length "

Define the minimum size of the layer element. When you add content to the layer during initial loading, however, the attribute settings do not restrict the amount of the content that is visible along either axis. For example, if you display an image in a layer that is 120 pixels wide by 90 pixels high, the actual visible size of a layer element whose height and width attributes are set to a smaller size expands to allow the full image to appear. The same happens to text or other content: the viewable region expands to allow all content to appear. To restrict the visible portion of the content, set the clip attribute.

Setting the height and width attributes to specific sizes is helpful when you are creating a colored or patterned rectangle (via the bgcolor or background attributes) to act as an underlying layer beneath some other positioned content. Without content pushing on the edges of the layer, the height and width attributes set the clipping region to their sizes.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>

Value

Positive integer values or percentage values. You can reduce both values to zero to not only hide the element (which you can also do with the visibility attribute), but also prevent the element from occupying any page space.

Default

Naturally flowing viewing area of layer content.

Object Model Reference

[window.]document.layerName.height
[window.]document.layerName.width

id:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

id=" elementIdentifier "

A unique identifier that distinguishes this element from all the rest in the document. This is the identifier used as values for the above and below attributes. Scripts also use the id attribute value as the layer element’s name for object references.

Example

<layer id="oldYeller" bgcolor="yellow" src="instrux.html" width="200" height="300">
</layer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.name

left, top:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

left=" pixelCount " top=" pixelCount "

Define the positioned offset of the left and top edges of the layer relative to the spot in the document where the layer element would normally appear in source code order. This precise location relative to the page varies unless you also set the pagex and pagey attributes, which absolutely position the element in the document space. Unlike what it does for the ilayer element, Navigator does not preserve the space in the document where a layer element appears. The element is placed in its own plane, and the surrounding source code content is cinched up—usually overlapping the layer content unless the layer is positioned elsewhere.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" left="10"
top="50">
</layer>

Value

Positive integer values (optionally quoted).

Default

0

Object Model Reference

[window.]document.layerName.left
[window.]document.layerName.top

pagex, pagey:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

pagex=" pixelCount " pagey=" pixelCount "

To truly position a layer element with repeatable accuracy, you can use the top-left corner of the document (page) as the point of reference. When you set the pagex and/or pagey attributes, you establish an offset for the left and top edges of the layer element relative to the corresponding edges of the entire document. Therefore, the zero point for a vertically scrolled page may be above the visible area of the browser window.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" pagex="50"
pagey="350">
</layer>

Value

Positive integer values (optionally quoted).

Default

0

Object Model Reference

[window.]document.layerName.pageX
[window.]document.layerName.pageY

src:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

src=" URL "

To load the content of an external HTML file into a layer element, assign the URL of that file to the src attribute. Any HTML content between the layer start and end tags is rendered on the page after the content is loaded from the src URL. If you omit the src attribute, only content between the tags is rendered. Scripts can change the corresponding object property (src) after the document has loaded to dynamically change content within the layer element (without reloading the main document).

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.layerName.src

top

See left.

visibility:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

visibility=" visibilityConstant "

Determines whether Navigator 4 displays the layer element. The default behavior is for a layer to inherit the visibility attribute of its next outermost (parent) layer. For a layer element that is part of the basic document body, this means that the layer is seen by default (the base layer is always visible). To hide a layer when the page loads, set the visibility attribute to "hidden". You need to set the attribute to "show" only if the layer element is nested within another layer (or ilayer) whose visibility value is set to (or is inherited as) "hidden".

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"
pagex="50" pagey="350" visibility="hidden">
</layer>

Value

One of the accepted constants: hidden | inherit | visible.

Default

inherit

Object Model Reference

[window.]document.layerName.visibility

width

See height.

z-index:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

z-index=" layerNumber "

Controls the positioning of layers along the Z-axis (front-to-back) of the document relative to the next outermost layer container. When the z-index values of two or more positionable elements within the same container (such as the base document layer) are identical numbers, the loading order of the elements in the HTML source code controls the stacking order, with the later elements stacked in front of earlier ones. The default z-index value for all positionable elements is zero. Therefore, if you want only one positionable element to appear in front of all the others that stack in their default order, you simply assign any positive value (even 1) to that standout element. Stacking order of positionable elements can be changed on-the-fly via scripting. See also the above and below attributes.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" z-index="1">
</layer>

Value

Any integer.

Default

0

Object Model Reference

[window.]document.layerName.zIndex

<legend>:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<legend>...</legend>

The legend element acts as a label for a fieldset element. In visual browsers, this usually means that the label is visually associated with the group border rendered for the fieldset element. A text-to-speech browser might read the label aloud as a user navigates through a form. Place the legend element immediately after the start tag of the fieldset element for the association to stick. Because the content of the legend element is HTML content, you can assign styles to make the label stand out, if you like.

Example

<form method="POST" action="...">
<fieldset>
<legend>Credit Card Information</legend>
...inputElementsHere...
</fieldset>
</form>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

accesskey

align

Element-Specific Event Handler Attributes

None.

accesskey:IE 5 NN n/a Moz all Saf n/a Op n/a HTML 4: Optional

 

accesskey=" character "

A single character key that brings focus to, or activates, the first focusable control of the form associated with the legend element. See the description of this shared attribute at the beginning of this chapter for general characteristics.

Example

<legend accesskey="c">Credit Card Information</legend>

Value

Single character of the document set.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).accessKey

align:IE 4 NN n/a Moz all Saf n/a Op n/a HTML 4: Optional

 

align=" where "

Controls the alignment of the legend element with respect to the containing fieldset element. See the discussion about text alignment inside a containing box in "Alignment Constants,” earlier in this chapter.

Example

<legend align="right">Credit Card Information</legend>

Value

Allowed values in HTML 4 are bottom | left | right | top. IE 4 and later and Mozilla add center.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

<li>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<li>...</li>

The li element is a single list item that is nested inside an ol or ul list container. The outer container determines whether the li item is preceded with a number or letter (indicating sequence within an order) or a symbol that doesn’t connote any particular order. A special category of style sheet properties are devoted to list formatting.

If you apply a style sheet rule to an li element to adjust the color in Navigator 4, only the leading symbol is colored. To color the text as well, wrap the li element inside a span element and apply the style to the span element. This workaround operates fine in other CSS-capable browsers.

Example

<ul>
    <li>Larry</li>
    <li>Moe</li>
    <li>Curly</li>
</ul>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

type

value

Element-Specific Event Handler Attributes

None.

type:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

type=" labelType "

The type attribute provides some flexibility in how the browser displays the item’s leading symbol or sequence number. Values are divided into two groups, with one group each dedicated to ol and ul items. For an unordered list (ul), you can specify whether the leading symbol should be a disc, circle, or square; for an ordered list (ol), the choices are among letters (uppercase or lowercase), Roman numerals (uppercase or lowercase), or Arabic numerals. The type attribute is deprecated in HTML 4 in favor of the list-style-type style sheet property.

Be aware that in Version 4 browsers, the type attribute for a li element sets the type for subsequent li elements in the list unless overridden by a type attribute setting in another li element. More recent versions restrict the effect to the current li element. In general, though, it is best to set the type attribute of the ol or ul element and let that setting govern all nested elements.

Example

<li type="square">Chicken Curry</li>

Value

When contained by a ul element, possible values are disc | circle | square. When contained by an ol element, possible values are A | a | I | i | 1. Sequencing is performed automatically as shown in the following table.

Type	Example
A	A, B, C, ...
a	a, b, c, ...
I	I, II, III, ...
i	i, ii, iii, ...
1	1, 2, 3, ...

Default

1 and disc.

Object Model Reference

[window.]document.getElementById(elementID).type

value:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

value=" number "

The value attribute applies only when the li element is nested inside an ol element. You can manually set the number used as a starting point for the sequencing of ordered list items. This can come in handy when you need to break up an ol element with some running text that is not part of the list.

Even though the value assigned to this attribute is a number, it does not affect the type setting. For example, setting value to 3 when type is A means that the sequence starts from that li element with the letter C.

Example

<li value="3">Insert Tab C into Slot M. Tighten with a wingnut.</li>

Value

Any positive integer.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).value

<link>:IE 3 NN 4 Moz all Saf all Op 7 HTML all: HTML End Tag: Forbidden

 

<link>

Unlike the a element (informally called a link when it contains an href attribute), the link element belongs inside the head element and is a place for the document to establish links with external documents, such as style sheet definition files or font definition files. By and large, browsers have yet to exploit the intended powers of this element. A variety of attributes let the author establish relationships between the current document and potentially related documents. In theory, some of these relationships could be rendered as part of the document or browser controls. Implementations of this element as of current browsers are rather weak compared to the HTML 4 specification. At the same time, several attributes (and all event handlers) defined in the HTML 4 specification and listed among shared items at the beginning of this chapter aren’t very helpful because they more typically apply to elements that actually display content on the page. No explicit document content is rendered as a result of the link element. Some of those attributes may be associated with the link element by mistake or merely for consistency within the rendering engines.

When used to import stylesheets, this element’s title attribute can play a non-intuitive role. By adding a title attribute when the rel attribute is set to stylesheet, you instruct modern browsers to treat the imported stylesheet as being author-preferred. If the browser allows users to choose from multiple author-supplied style sheets (e.g., see the View->Page Style menu choice in Firefox), the preferred one is listed first.

Example

<head>
<title>Section 3</title>
<link rev="Prev" href="sect2.html">
<link rel="Next" href="sect4.html">
<link rel="stylesheet" type="text/css" href="myStyles.css">
</head>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

charset	href	hreflang	media	rel
rev	src	target	type

Element-Specific Event Handler Attributes

None.

charset:IE n/a NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

charset=" characterSet "

Character encoding of the content at the other end of the link.

Example

<link charset="csISO5427Cyrillic" href="moscow.html">

Value

Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).

Default

Determined by browser.

href:IE 3 NN 4 Moz all Saf all Op 7 HTML all: Required

 

href=" URI "

The URI of the document associated with the link (also known in W3C jargon as the destination, even though there is no page navigation involved). Navigator 4 also uses the src attribute for this purpose.

Example

<link rel="Prev" href="sect2.html" src="sect2.html">

Value

Any valid URI, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).href

hreflang:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

hreflang=" languageCode "

The language code of the content at the destination of a link. Requires that the href attribute also be set. This attribute is primarily an advisory attribute to help a browser prepare itself for a new language set if the browser is so enabled.

Example

<link hreflang="HI" href="hindi/Chap3.html">

Value

Case-insensitive language code.

Default

Browser default.

Object Model Reference

[window.]document.getElementById(elementID).hrefLang

media:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

media=" descriptorList "

Sets the intended output device for the content of the destination document pointed to by the href attribute. The media attribute looks forward to the day when browsers are able to tailor content to specific kinds of devices such as pocket computers, text-to-speech digitizers, or fuzzy television sets. In the meantime, you can use it to specify separate external style sheets that are to be applied when the browser page is sent to a printer. The HTML 4 specification defines a number of constant values for anticipated devices, but the list is open-ended, allowing future browsers to tailor output to yet other kinds of media and devices.

Example

<link rel="Glossary" href="gloss.html" media="screen, tv, handheld">

Value

Constant values. Multiple values can be grouped together in a comma-delimited list within a quoted string. Values defined in HTML 4 are all | aura | braille | handheld | print | projection | screen | tty | tv . Current browsers support the following values: all | print | screen.

Default

screen

Object Model Reference

[window.]document.getElementById(elementID).media

rel:IE 3 NN 4 Moz all Saf all Op 7 HTML 3.2: Optional

 

rel=" linkTypes "

Defines the relationship between the current element and the destination of the link. The HTML 4 recommendation defines several link types; it is up to the browser to determine how to employ the value. The element must include an href attribute for the rel attribute to be applied.

Example

<link rel="Next" href="sect6.html">

Value

Case-insensitive, space-delimited list of standard link types applicable to the document and browser. HTML 4-sanctioned link types are:

alternate	appendix	bookmark	chapter
contents	copyright	glossary	help
index	next	prev	section
start	stylesheet	subsection

Current browsers use stylesheet to link in an external CSS file. Navigator 4 recognizes stylesheet and fontdef. In IE 5 and later for Windows, you can also use the value shortcut icon (with the space) and assign a URL to a custom icon file (.ico) on your server so that your icon appears in the Favorites list if the user chooses to add the page to his list.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).rel

rev:IE 4 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

rev=" linkTypes "

A reverse link relationship. Like the rel attribute, the rev attribute’s capabilities are defined by the browser, particularly with regard to how the browser interprets and renders the various link types available in the HTML 4 specification. Given two documents (A and b) containing links that point to each other, the rev value of b is designed to express the same relationship between the two documents as denoted by the rel attribute in A. Current browsers provide no practical functionality for this attribute.

Example

<link rev="Prev" href="sect4.html">

Value

Case-insensitive, space-delimited list of HTML 4 standard link types applicable to the element. See the rel attribute for sanctioned link types.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).rev

src:IE n/a NN 4 Moz n/a Saf all Op 7 HTML n/a: Optional

 

src=" URL "

The URL of the destination of a link. In the case of content to be brought into the browser, the location of the resource.

Example

<link rel="fontdef" src="fonts/garamond.pfr" href="fonts/garamond.pfr">

Value

Any valid URL, including complete and relative URLs.

Default

None.

target:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

target=" windowOrFrameName "

Presumably, the target attribute is provided in HTML 4 as a way to specify the destination for the display of a document at the other end of the href attribute of the link element, such as a link to the next page in a series.

Value

Identifier when the frame or window name has been assigned via the target element’s name attribute. Four reserved target names act as constants:

_blank

Browser creates a new window for the destination document

_parent

Destination document replaces the current frame’s framesetting document (if one exists; otherwise, it is treated as _self)

_self

Destination document replaces the current document in its window or frame

_top

Destination document is to occupy the entire browser window, replacing any and all framesets that may be loaded (also treated as _self if there are no framesets defined in the window)

IE for Windows implements two other values: _search (IE 5 and later) and _media (IE 6). These supposedly direct the browser to load linked content into the browser’s Search pane and Media Bars, respectively. Because browsers don’t yet support relationships for which this attribute would be useful, precise implementation details are not clear.

Default

_self

Object Model Reference

[window.]document.getElementById(elementID).target

type:IE 4 NN 4 Moz all Saf all Op 7 HTML 4: Optional

 

type=" MIMEType "

An advisory about the content type of the destination document or resource. In practice, this attribute has been used so far to prepare the browser for the style sheet type being linked to.

Example

<link rel="stylesheet" type="text/css" href="styles/mainStyle.html">

Value

Case-insensitive MIME type. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).type

<listing>:IE all NN all Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<listing>...</listing>

The listing element displays its content in a monospace font as a block element, as in computer code listings rendered 132 columns wide. In most browsers, the font size is also reduced from the default size. Browsers observe carriage returns and other whitespace in element content. This element has been long deprecated in HTML and has even been removed from the HTML 4.0 specification. You are encouraged to use the pre element instead.

Example

<listing>
&lt;script language="JavaScript"&gt;
   document.write("Hello, world.")
&lt;/script&gt;
</listing>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<map>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<map>...</map>

A map element is a container for area elements that define the location and links of hotspots of client-side image maps. The primary purpose of the map element is to associate an identifier (the name attribute) that the usemap attribute points to when turning an img element into a client-side image map. Most other attributes are style-related and may be applied to the map element so that they are inherited by elements nested within.

Example

<img src="images/logo.gif" alt="Scroll to the bottom for navigation links."
height="300" width="250" usemap="#navigation">
<map name="navigation">
<area shape="rect" coords="0,0,100,100" href="products.html">
<area shape="rect" coords="0,100,300,100" href="support.html">
</map>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

name

Element-Specific Event Handler Attributes

None.

name:IE all NN all Moz all Saf all Op 7 HTML 3.2: Required

 

name=" identifier "

The identifier to which the usemap attribute of an img element points. Because the usemap attribute is actually a URL type, its value resembles that of a link to an anchor: the name is preceded by a hash symbol (only in the usemap attribute). Despite XHTML’s preference for id attributes over name attributes, browsers continue to rely on the name attribute as the connection between an image and an area map. Strict HTML 4 and XHTML DTDs continue to validate the name attribute.

Example

<map name="navigation"> ...</map>

Value

Case-sensitive unique identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).name

<marquee>:IE 3 NN n/a Moz 1.0.1 Saf all Op 8 HTML n/a: HTML End Tag: Optional

 

<marquee>...</marquee>

The marquee element was first implemented in Internet Explorer. It displays HTML content in a scrolling region on the page. Scrolled content goes between the start and end tags. It is now supported by mainstream browsers, although not with the depth of its inventor.

Example

<marquee behavior="slide" direction="left" width="250" bgcolor="white">
Check out our monthly specials.
</marquee>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

behavior	bgcolor	datafld	dataformatas	datasrc
direction	height	hspace	loop	scrollamount
scrolldelay	truespeed	vspace	width

Element-Specific Event Handler Attributes

Handler	IE	Others	HTML
onafterupdate	4	n/a	n/a
onbounce	4	n/a	n/a
onfinish	4	n/a	n/a
onstart	4	n/a	n/a

behavior:IE 3 NN n/a Moz 1.0.1 Saf all Op 8 HTML n/a: Optional

 

behavior=" motionType "

Sets the motion of the content within the rectangular space reserved for the marquee element. You have a choice of three motion types.

Example

<marquee behavior="slide" direction="left" width="250" bgcolor="white">
...</marquee>

Value

One of the case-insensitive marquee element motion types:

alternate

Content alternates between marching left and right. The only value supported in Mozilla until version 1.7.

scroll

Content scrolls (according to the direction attribute) into view and out of view before starting again.

slide

Content scrolls (according to the direction attribute) into view, stops at the end of its run, blanks, and then starts again.

Default

scroll

Object Model Reference

[window.]document.getElementById(elementID).behavior

bgcolor:IE 3 NN n/a Moz 1.0.1 Saf all Op 8 HTML n/a: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the rectangular space reserved for the marquee element.

Example

<marquee behavior="slide" direction="left" width="250" bgcolor="white">
...</marquee>

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the content scrolled by the marquee element. The data source column must be either plain text or HTML (see dataformatas). A datasrc attribute must also be set for the marquee element. Works only with text file data sources in IE 5/Mac.

Example

<marquee behavior="slide" direction="left" width="200"
datasrc="DBSRC3" datafld="news" dataformatas="HTML"></marquee>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementByld(elementID).dataFld

dataformatas:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

dataformatas=" dataType "

Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. This attribute setting depends entirely on how the data source is constructed. Works only with text file data sources in IE 5/Mac.

Example

<marquee behavior="slide" direction="left" width=200
datasrc="DBSRC3" datafld="news" dataformatas="HTML"></marquee>

Value

Constant values: text | html.

Default

text

Object Model Reference

[window.]document.getElementById(elementID).dataFormatAs

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. Works only with text file data sources in IE 5/Mac.

Example

<marquee behavior="slide" direction="left" width="200"
datasrc="DBSRC3" datafld="news" dataformatas="HTML"></marquee>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc

direction:IE 3 NN n/a Moz 1.0.1 Saf all Op 8 HTML n/a: Optional

 

direction=" scrollDirection "

A marquee element’s content may scroll in one of four directions (only left and right in Safari). For optimum readability in languages written left to right, it is easier to grasp the content when it scrolls either to the left or downward.

Example

<marquee behavior="slide" direction="left" width="200">...</marquee>

Value

Four possible directions: down | left | right | up.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).direction

height, width:IE 3 NN n/a Moz 1.0.1 Saf all Op 8 HTML n/a: Optional

 

height=" length " width=" length "

A marquee element renders itself as a rectangular space on the page. You can override the default size of this rectangle by assigning values to the height and width attributes. The default value for height is determined by the font size of the largest font assigned to content in the marquee. Default width is set to 100% of the width of the next outermost container (usually the document body). The width defines how much space is used at one time or another by horizontally scrolling content. When the marquee is embedded within a td element that lets the browser determine the table cell’s calculated width, you must set the width of the marquee element or risk having the browser set it to 1, making the content unreadable.

If you want extra padding around the space, see the hspace and vspace attributes.

Note that in Mozilla, the element’s width can be specified only as a percentage or via the CSS width property. In Safari, you can make the element tall, but the text does not scroll vertically.

Example

<marquee behavior="slide" direction="left" height="20" width="200">
...
</marquee>

Value

Any length value in pixels or percentage of available space.

Default

A width of 100%; a height of 12 pixels.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width

hspace, vspace:IE 3 NN n/a Moz n/a Saf all Op n/a HTML n/a: Optional

 

hspace=" pixelCount " vspace=" pixelCount "

Internet Explorer provides attributes for setting padding around a marquee element. The hspace attribute controls padding along the left and right edges (horizontal padding), whereas the vspace attribute controls padding along the top and bottom edges (vertical padding). Adding such padding provides an empty cushion around the marquee's rectangle. As an alternative, you can specify the various margin style sheet settings, especially if you want to open space along only one edge.

Example

<marquee behavior="slide" direction="left" height="20" width="200"
hspace="10" vspace="15">...</marquee>

Value

Any positive integer.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).hspace
[window.]document.getElementById(elementID).vspace

loop:IE 3 NN n/a Moz n/a Saf all Op 8 HTML n/a: Optional

 

loop=" count "

Sets the number of times the marquee element scrolls its content. After the final scroll, the content remains in a fixed position. Constant animation can sometimes be distracting to page visitors, so if you have the marquee turn itself off after a few scrolls, you may be doing your visitors a favor.

Example

<marquee behavior="slide" direction="left" height="20" width="200" loop="3">
...</marquee>

Value

Any positive integer if you want the scrolling to stop. Otherwise, set the value to −1 or infinite.

Default

−1

Object Model Reference

[window.]document.getElementById(elementID).loop

scrollamount:IE 3 NN n/a Moz 1.0.1 Saf all Op 8 HTML n/a: Optional

 

scrollamount=" pixelCount "

marquee content looks animated by virtue of the browser clearing and redrawing its content at a location offset from the previous location (in a direction set by the direction attribute). You can make the scrolling appear faster by increasing the amount of space between positions of each drawing of the content; conversely, you can slow down the scrolling by decreasing the space. See also scrolldelay.

Example

<marquee behavior="slide" direction="left" height="20" width="200" scrollamount="2">
...</marquee>

Value

Any positive integer.

Default

6

Object Model Reference

[window.]document.getElementById(elementID).scrollAmount

scrolldelay:IE 3 NN n/a Moz 1.0.1 Saf all Op 8 HTML n/a: Optional

 

scrolldelay=" milliseconds "

Apparent scrolling speed can be influenced by the frequency of the redrawing of the content as its position shifts with each redraw (see scrollamount). Increasing the scrolldelay value slows down the scroll speed, whereas decreasing the value makes the scrolling go faster. Be aware that on slower computers, you can reach a value at which no increase of speed is discernible no matter how small you make the scrolldelay value (see truespeed).

Example

<marquee behavior="slide" direction="left" height="20" width="200"
scrolldelay="100">
...</marquee>

Value

Any positive integer representing the number of milliseconds between content redraws.

Default

85 (Windows 95); 90 (Macintosh).

Object Model Reference

[window.]document.getElementById(elementID).scrollDelay

truespeed:IE 4 NN n/a Moz n/a Saf all Op n/a HTML n/a: Optional

 

truespeed

The marquee element includes a built-in speed bump to prevent scrolling from being accidentally specified as too fast for visitors to read. If you genuinely intend the content to scroll very fast, you can include the truespeed attribute to tell the browser to honor scrolldelay settings below 60 milliseconds.

Example

<marquee behavior="slide" direction="left" height="20" width="200"
scrolldelay="45" truespeed>...</marquee>

Value

The presence of this attribute sets the value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).trueSpeed

vspace

See hspace.

width

See height.

<menu>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<menu>...</menu>

The original idea of the menu element was to allow browsers to generate single-column lists of items. Virtually every browser, however, treats the menu element the same as a ul element to present an unordered single column list of items (usually preceded by bullets). The menu element is deprecated in HTML 4. You should be using the ul element for it in any case, because you are assured backward compatibility and forward compatibility should this element ever disappear from the browser landscape. Everything said here also applies to the deprecated dir element.

Example

Common DB Connector Types:
<menu>
    <li>DB-9</li>
    <li>DB-12</li>
    <li>DB-25</li>
</menu>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

compact

Element-Specific Event Handler Attributes

None.

compact:IE 6 NN n/a Moz all Saf n/a Op n/a HTML 3.2: Optional

 

compact

A Boolean attribute originally designed to let browsers render the list in a more compact style than normal (smaller line spacing between items).

Example

<menu compact>...</menu>

Value

The presence of this attribute makes its value true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).compact

<meta>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Forbidden

 

<meta>

A meta element conveys hidden information about the document. Some browsers respond to this element to derive header information that may be important to the document but is not sent by the server in response to the request for the document. The element is also used to embed document information that some search engines use for indexing and categorizing documents on the World Wide Web.

More than one meta element may be included in a document, and all meta elements belong nested inside the head element. The specific purpose of each meta element is defined by its attributes. Typically, a meta element reduces to a name/value pair that is of use to either the server or the client. For example, most browsers recognize attribute settings that force the page to reload (or redirect to another page) after a timed delay. This would be useful in a page whose content is updated minute-by-minute, because the browser keeps reloading the latest page as often as indicated in the meta element.

Several other elements and attributes in HTML 4 contain the same kind of metadata that might otherwise be located in meta elements. Use the avenue that is best suited to your intended server and browser environments. See also the address, del, ins, link, and title elements, as well as the profile attribute of the head element.

Much mythology surrounds meta element usage. Some attribute values affect only some browsers (controlling the browser cache, for example), and not all search engine bots respond to meta tag attribute values the same way (if at all). At the same time, commonly-used powers, such as refresh, are frowned upon by the standards. There are no mandated standards for acceptable values, but the W3C validators for HTML 4 and XHTML point toward acceptance of the character set value shown in the example below.

Example

<head profile="http://www.example.com/profiles/common">
    <meta name="Author" content="Jane Smith">
    <meta name="keywords" content="benefits,insurance,plan">
    <meta http-equiv="refresh"
    content="1;URL=http://www.example.com/truindex.html">
    <meta http-equiv="Content-Type" content="text/html;
    charset=ISO-8859-5">
</head>

Element-Specific Attributes

content

http-equiv

name

scheme

Element-Specific Event Handler Attributes

None.

content:IE all NN all Moz all Saf all Op 7 HTML all: Required

 

content=" valueString "

The equivalent of the value of a name/value pair. The attribute is usually accompanied by either a name or http-equiv attribute, either of which act as the name portion of the name/value pair. Specific values of the content attribute vary with the value of the name or http-equiv attribute. Sometimes, the content attribute value contains multiple values. In such cases, the values are delimited by commas, semicolons, or whatever delimiter the browser expects for that content. Some of these values may be name/value pairs in their own right, such as the content for a refresh meta element. The first value is a number representing the number of seconds delay before loading another document; the second value indicates a URL of the document to load after the delay expires.

Example

<meta http-equiv="refresh"
content="2;URL=http://www.example.com/basicindex.html">

Value

Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).content

http-equiv:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

http-equiv=" identifier "

When a server sends a document to the client with the HTTP protocol, a number of HTTP header fields are sent along, primarily as directives to the client about the content on its way. meta elements can add to those HTTP headers when the http-equiv attribute is assigned to a document. Browsers convert the http-equiv and content attribute values into the HTTP response header format of "name: value" and treat them as if they came directly from the server.

Web standards define a long list of HTTP headers (see Webmaster in a Nutshell by Stephen Spainhour and Valerie Quercia, published by O’Reilly), but some of the more common values are shown in the following examples. Not all browsers respond to all header types, and some browsers respond to browser-specific headers (e.g., the IE 6 MSTHEMECOMPATIBLE header). You can have either the http-equiv or name attribute in a meta element, but not both.

Example

<meta http-equiv="refresh"
content="1,http://www.example.com/truindex.html">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
<meta http-equiv="expires" content="Sun, 15 Jan 1998 17:38:00 GMT">

Value

Any string identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).httpEquiv

name:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

name=" identifier "

An identifier for the name/value pair that constitutes the meta element. Typically, the attribute value is a plain-language term that denotes the purpose of the meta element, such as "author" or "keywords". You can assign a value to either the name or http-equiv attribute, but not both, in the same meta element.

Example

<meta name="Author" content="Jane Smith">
<meta name="keywords" content="benefits,insurance,plan">

Value

Any string identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).name

scheme:IE 6 NN n/a Moz all Saf n/a Op n/a HTML 4: Optional

 

scheme=" identifier "

Provides one more organizational layer to metadata supplied with a document. For example, a university campus with several libraries might generate documents associated with each of the libraries. Assuming that a browser is equipped to interpret metadata about this, one approach at assembling the tags is to create a separate name attribute value for each library: name="law", name="main", name="engineering", and so on. But it may also be necessary to associate these name values with a specific university. The scheme attribute could be called into service to align the metadata with a particular university: scheme="Harvard". Now, other university library systems could use the same organization of name attributes, but the scheme attribute clearly associates a given meta element with a specific university and library. Again, this assumes that the browser is empowered to do something special with this metaknowledge.

Example

<meta scheme="Chicago" name="classicalFM" content="98.7">

Value

Any string identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).scheme

<multicol>:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: HTML End Tag: Required

 

<multicol>...</multicol>

A Navigator-specific (Versions 3 and 4) element that renders its content in any number of evenly spaced flowing columns on the page. The way this element flows content might remind you of a desktop publishing program that automatically flows long content into column space that has been defined for the page. There is no equivalent for this element in HTML or Internet Explorer, but a CSS-related proposal for a multicolumn layout property may find its way into CSS3 (http://www.w3.org/1999/06/WD-css3-multicol-100-623).

Example

<multicol cols="2" gutter="20" width="500">LongFlowingHTMLContent
</multicol>

Element-Specific Attributes

cols

gutter

width

Element-Specific Event Handler Attributes

None.

cols:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: Required

 

cols=" columnCount "

Defines the number of columns across which the browser distributes and renders the content of the element. For a given width of the content, the browser does its best to make each column the same length. The proposed CSS equivalent attribute is column-number.

Example

<multicol cols="2" gutter="20" width="500">LongFlowingHTMLContent
</multicol>

Value

Any positive integer.

Default

1

gutter:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

gutter=" pixelCount "

Specifies the number of pixels to be placed between columns. The browser then calculates the width of the content columns by subtracting all the gutters from the total available width. The proposed CSS equivalent attribute is column-gap.

Example

<multicol cols="2" gutter="20" width="500">LongFlowingHTMLContent
</multicol>

Value

Any positive integer.

Default

10

width:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

width=" elementWidth "

Defines the total width of the columns plus gutters. You can specify the width in pixels or as a percentage of the width of the next outer container (usually the document body). The proposed CSS equivalent attribute is the existing width attribute.

Example

<multicol cols="2" gutter="20" width="500">LongFlowingHTMLContent
</multicol>

Value

Any length value in pixels or percentage of available space.

Default

100%

<nextid>:IE all NN n/a Moz n/a Saf n/a Op n/a HTML <2: HTML End Tag: Prohibited

 

<nextid>

The nextid element was at one time intended to assist document-editing application. It went inside a document’s head element. Deprecated in HTML 2.0, it is no longer used.

<nobr>:IE all NN all Moz all Saf all Op 7 HTML n/a: HTML End Tag: Required

 

<nobr>...</nobr>

The nobr element instructs the browser to render its content without wrapping the text to the next line at the right edge of the window or container. Even if there are carriage returns in the source code for the element’s content, the browser flows the text as one line. Although this might seem convenient in circumstances involving careful layout of pages, it may mean the user has to scroll horizontally to view the text—not something most users like to do. Despite the longevity of the nobr element in commercial browsers, it has never been mentioned in formal HTML recommendations.

Example

<nobr>
Now is the time for all good men to
come to the aid of their country, even if
the text forces them to scroll horizontally.
</nobr>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<noembed>:IE n/a NN 2 Moz all Saf all Op 7 HTML n/a: HTML End Tag: Required

 

<noembed>...</noembed>

The noembed element isolates advisory content that displays in browsers incapable of working with plugins. All content between the start and end tags of the noembed element is not rendered in plugin-enabled browsers, but is rendered in other browsers (which ignore the tag but not the content). There are no attributes for this element.

Example

<embed name="jukebox" src="jazz.aif" height="100" width="200"></embed>
<noembed>
To play the music associated with this page, you need a modern graphical browser.
</noembed>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<noframes>:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<noframes>...</noframes>

The noframes element contains HTML that is rendered by browsers incapable of displaying frames. Browsers that are capable of displaying frames ignore the noframes element and all content it contains. Content for this element should instruct the user about using frames or perhaps offer a link to a frameless version of the page. The most common location for the noframes element is inside a frameset element. The HTML 4 specification, however, sees nothing wrong with embedding the element in a rendered document, if it makes sense for your application. It could be useful if your page employs an iframe element, and you want browsers not equipped for that element to alert users about what they’re missing.

All standard attributes of the noframes element were added to support Cascading Style Sheets. This seems odd, because it would seem very unlikely that a browser would support CSS but not frames (with the exception of Navigator 4’s lack of iframe support).

Example

<frameset cols="150,*">
    <frame name="navbar" src="nav.html">
    <frame name="main" src="page1.html">
    <noframes>Your browser does not support frames.
    Click <a href="noFramesIndex.html">here</a> for a frameless version.
    </noframes>
</frameset>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<nolayer>:IE n/a NN |4| Moz n/a Saf n/a Op n/a HTML n/a: HTML End Tag: Required

 

<nolayer>...</nolayer>

Navigator 4 provides a tag for isolating advisory content that displays in browsers that don’t recognize the layer element. All content between the start and end tags of the nolayer element is not rendered in Navigator 4 but is rendered in other browsers (which ignore the tag but not the content). You can place the nolayer element anywhere you want, but be aware that it won’t be positioned like the layer element is intended to be. Nonlayer browsers render the nolayer element’s content.

There are no attributes for this element. If you attempt to set style sheet rules for the nolayer element, they are ignored by browsers such as Internet Explorer. You can, however, wrap the nolayer element inside a div or span element to associate a style sheet rule with the advisory text.

Example

<layer bgcolor="yellow" src="instrux.html" width=200 height=300></layer>
<nolayer>
You are not seeing some content that requires Netscape Navigator 4 to view.
</nolayer>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<noscript>:IE 4 NN 3 Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<noscript>...</noscript>

The noscript element is intended to display content when a browser is not set to run the scripts embedded in the current document. When a user disables scripting in a browser, the noscript element’s content is rendered wherever it falls in the source code. For older browsers, and those that don’t support scripting, the noscript element is ignored, which means that its content is rendered within the next outermost container’s context. Going forward, the HTML 4.0 specification recommends that browsers also render the noscript element’s content when scripts earlier in the document are of a language type not supported or enabled in the browser. Also, if an HTML 4-compatible browser should be developed that lacks scripting altogether, it, too, should render the noscript element’s contents. But in practice, scriptable browsers render the content of this element only if scripting is turned off in the browser preferences.

All standard attributes of the noscript element were added to support Cascading Style Sheets, internationalization, and events for HTML 4.

Example

<noscript>
This document contains programming that requires a scriptable browser, such
as Microsoft Internet Explorer or Netscape Navigator. You may not have full
access to this page's powers at this time.
</noscript>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<object>:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<object>...</object>

The object element supplies the browser with information to load and render data types that are not natively supported by the browser. If the browser must load some external program (a Java applet, a plugin, ActiveX object, or some other helper), the information about the content that is to be rendered is contained by the object element, its attributes, and optionally, associated param elements nested inside of it. Although today’s browsers recognize elements such as applet and embed, the HTML specification indicates that the trend is to combine all of this into the object element. Internet Explorer has long favored the object element.

The HTML 4 specification allows nesting of object elements to give the browser a chance to load alternate content if no plugin or other necessary content aids are available in the browser. Essentially, the browser should be able to walk through nested object elements until it finds one it can handle. For example, the outer object element may try to load an MPEG2 video; if no player is available, the browser looks for the next nested object, which is a JPEG still image from the video; if the browser is not a graphical browser, it would render some straight HTML that is the most nested item (although not as an object element) within the hierarchy of nested objects:

<div>
<object data="proddemo.mpeg" type="application/mpeg">
    <object data="prodStill.jpg" type="image/jpeg">
        The all-new Widget 3000!
    </object>
</object>
</div>

See also the embed element for an example that blends the object and embed elements to accommodate a wide range of browsers.

To determine which attributes apply to a particular content type or object and what their values look like, you have to rely on documentation from the supplier of the object or plugin. That same documentation should let you know whether the functionality is available across browser brands and operating systems.

Example

<object id="earth" classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D">
<param name="srcStart" value="images/earth0.gif">
<param name="frameCount" value="12">
<param name="loop" value="−1"
<param name="fps" value="10">
</object>

Element-Specific Attributes

align	alt	archive	border	classid
code	codebase	codetype	data	declare
height	hspace	name	standby	type
usemap	vspace	width

Element-Specific Event Handler Attributes

None.

align:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: Optional

 

align=" alignmentConstant "

Determines how the rectangle of the object element aligns within the context of surrounding content. See the discussion about alignment of elements with respect to content outside an element’s box in "Alignment Constants,” earlier in this chapter.

Example

<object ... align="baseline"></object>

Value

Constant value. See "Alignment Constants.”

Default

bottom

Object Model Reference

[window.]document.getElementById(elementID).align

archive:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

archive=" URIList "

A space-delimited list of URIs of files that support the loading and running of the object element. By explicitly specifying the files in the archive attribute, the browser doesn’t have to wait for the supporting files to be called by the content running in the object element. Instead, the supporting files can be downloaded simultaneously with the primary content. The archive attribute may also include URIs assigned to the classid or data attributes, but one of these two attributes still needs to point to the primary content URI. Current browsers provide no particular functionality for this attribute.

Example

<object ... archive="/images/anim3.gif/images/anim4.gif"></object>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).archive

border:IE 6 NN n/a Moz all Saf n/a Op n/a HTML 4: Optional

 

border=" pixels"

The thickness of a border around the object element. The attribute is deprecated in HTML 4 in favor of style sheet borders. If you use the object element to load an image for a client-side image map, you can set the border attribute to zero to eliminate the typical link border in IE 5/Mac (see usemap later in this section).

Example

<object ... border="4"></object>

Value

Any integer pixel value.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).border

classid:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: Optional

 

classid=" URL "

The URL of the object’s implementation. This attribute typically directs the browser to load a program, an applet, or a plugin class file. In Internet Explorer, the URL can point to the CLSID directory that stores all of the IDs for registered ActiveX controls, such as DirectAnimation. You must obtain the classid value from the supplier of an ActiveX control (or root around the Registry with Regedit if you know what you’re looking for). In Navigator 4 and Mozilla, the Java Archive (JAR) Installation Manager attempts to install a plugin from the classid URL if the plugin is not installed for data specified in the data attribute. Eventually, this attribute may be used to load Java applets (IE 4 includes a code attribute to handle this now), but through Version 6 of both browsers, Java applets are not yet supported in this fashion in current browsers.

Example

<object id="earth" classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D"></object>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.elementID.classid

code:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

code=" fileName.class "

Internet Explorer uses the code attribute to allow the object element to perform the same job as an applet element, using the same kind of attributes. The code attribute value is the name of the Java applet class file. If the class file is in a directory other than the document, the path to the directory must be assigned to the codebase attribute, just like in the applet element. Parameters are passed to applets via param elements, just like the ones nested inside applet elements. IE appears to preserve the classid attribute for referencing ActiveX controls only.

Example

<object code="fileReader.class" codebase="classes"></object>

Value

Applet class filename.

Default

None.

Object Model Reference

[window.]document.elementID.code

codebase:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: Optional

 

codebase=" path "

Path to the directory holding the class file designated in either the code or classid attribute. The codebase attribute does not name the class file, just the path. You can make this attribute a complete URL to the directory, but don’t try to access a codebase outside of the domain of the current document.

Example

<object code="fileReader.class" codebase="classes"></object>

Value

Case-sensitive pathname, usually relative to the directory storing the current HTML document.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).codeBase

codetype:IE 3 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

codetype=" MIMEType "

An advisory about the content type of the object referred to by the classid attribute. A browser might use this information to assist in preparing support for a resource requiring a multimedia player or plugin. If the codetype attribute is missing, the browser looks next for the type attribute setting (although it is normally associated with content linked by the data attribute URL). If both attributes are missing, the browser gets the content type information from the resource as it downloads.

Example

<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
codetype="application/x-crossword"></object>

Value

Case-insensitive MIME type. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).codeType

data:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: Optional

 

data=" URL "

URL of a file containing data for the object element (as distinguished from the object itself). For data with a content type that can be opened (and viewed or played) with any compatible object or plugin, the data and type attributes are generally sufficient to launch the plugin and get the content loaded. But if the content requires a very specific plugin or ActiveX control, you should include a classid attribute that points to the object’s implementation as well. In that case, you can specify the content type with either the codetype or type attributes. Relative URLs are calculated relative to the codebase attribute, if one is assigned; otherwise the URL is relative to the document’s URL.

Example

<object data="proddemo.mpeg" type="application/mpeg"></object>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).data

declare:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

declare

The presence of the declare attribute instructs the browser to regard the current object element as a declaration only, without instantiating the object. A browser may use this opportunity to precache data that does not require the object being loaded or run. Another object element pointing to the same classid and/or data attribute values, but without the declare attribute, gets the object running. Current mainstream browsers provide no particular functionality for this attribute.

Example

<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D" declare></object>

Value

The presence of the attribute sets it to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).declare

height, width:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: Optional

 

height=" length " width=" length "

The size that an embedded object (or its plugin control panel) occupies in a document is governed by the height and width attribute settings. Some browser versions might allow you to get away without assigning these attributes and letting the plugin’s own user interface design determine the height and width of its visible rectangle. It is best to specify the exact dimensions of a plugin’s control panel or the data (in the case of images) whenever possible (control panels vary with each browser and even between different plugins for the same browser). In some cases, the object may not display if you fail to supply enough height on the page. In other instances, if the player fails to load, the space may not be reserved. If you assign values that are larger than the actual object or its control panel and the object loads successfully, the browser reserves that empty space on the page, which could interfere with your intended page design.

When an object is scriptable, and you don’t want its controller to appear, you can set its dimensions to zero or one. Place the tag at the end of the document.

Example

<object data="blues.aif" height="150" width="250"></object>

Value

Positive integer values (optionally quoted) or percentage values (quoted).

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width

hspace, vspace:IE 3 NN n/a Moz all Saf n/a Op 7 HTML 4: Optional

 

hspace=" pixelCount" vspace=" pixelCount"

A margin that acts as whitespace padding around the visual content of the object element’s rectangular space. hspace establishes a margin on the left and right sides of the rectangle; vspace establishes a margin on the top and bottom sides of the rectangle.

Example

<object data="blues.aif" height="150" width="250" vspace="10" hspace="10"></object>

Value

Integer representing the number of pixels for the width of the margin on the relevant sides of the object element’s rectangle.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).hspace
[window.]document.getElementById(elementID).vspace

name:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

name=" elementIdentifier "

The HTML 4 specification provides for a name attribute of the object element for instances in which the object is part of a form that is submitted to the server. The name attribute in this case performs the same function as the name attribute of an input element; it acts as a label for some data being submitted. The code that is loaded into the object element must be programmed to return a value if it is to be submitted via an HTML form. Current mainstream browsers list support for this attribute for compatibility claims, but do not respond to its value. Use the id attribute to assign an identifier that scripts use to reference the object.

Example

<object name="embedded" classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
height="150" width="250"></object>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).name

standby:IE 6 NN n/a Moz all Saf n/a Op n/a HTML 4: Optional

 

standby=" HTMLText "

HTML content to be displayed while the object is loading. This attribute has not been implemented in most current browsers (although it works in IE 5/Mac); presumably the message is to be displayed in the rectangular region intended for the object element, just as the alt message appears in an img element space while the image loads.

Example

<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
height="150" width="250" standby="Loading movie..."></object>

Value

Any HTML content.

Default

None.

type:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: Required

 

type=" MIMEType "

An advisory about the content type of the data referred to by the data attribute. A browser might use this information to assist in preparing support for a resource requiring a multimedia player or plugin. The data element first looks to the codetype attribute for this information. But if the codetype attribute is missing, the browser looks next for the type attribute setting. If both attributes are missing, the browser tries to get the content type information from the resource as it downloads. To be on the safe side, always specifiy a MIME type for image data (e.g., image/jpeg or image/gif).

Example

<object data="movies/prodDemo.mpeg" type="application/mpeg"></object>

Value

Case-insensitive MIME type. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).type

usemap:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

usemap=" mapURL "

The HTML 4 specification lists the usemap attribute for an object element, thus offering the possibility of using the object element to load an image that gets used as an image map. Current browsers provide this capability.

Assign the URI of the image to the data attribute, and assign a MIME type for the image to the type property. Create a separate map element with one or more nested area elements, and assign the map element’s name identifier to the object element’s usemap attribute. IE/Windows pads the image and adds scrollbars, so you may not achieve successful cross-browser deployment.

Example

<object data="navbar.jpg" type="image/jpeg" alt="Navigation Bar" usemap="#navbarMap"
border="0"></object>

Value

See the usemap attribute of the img element.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).useMap

vspace

See hspace.

width

See height.

<ol>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<ol>...</ol>

The ol element is a container for an ordered list of items. An “ordered list” means that the items are rendered with a leading sequence number or letter (depending on the type attribute setting or list-style-type style sheet property setting). Content for each list item is defined by a nested li element. If you apply a style sheet rule to an ol element, the style is inherited by the nested li elements.

Example

<ol>
    <li>Choose Open from the File menu.</li>
    <li>Locate the file you wish to edit, and click on the filename.</li>
    <li>Click the Open button.</li>
</ol>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

compact

start

type

Element-Specific Event Handler Attributes

None.

compact:IE 4 NN n/a Moz all Saf all Op n/a HTML 3.2: Optional

 

compact

A Boolean attribute originally designed to let browsers render the list in a more compact style than normal (smaller line spacing between items). Although listed as a supported attribute for HTML compatibility, the compact attribute has no effect on mainstream browsers. Use style sheets to control element sizes and line spacing.

Example

<ol compact>...</ol>

Value

The presence of this attribute makes its value true.

Default

false

start:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

start=" number "

Assigns a custom starting number for the sequence of items in the ol element. This is convenient when a sequence of items must be disturbed by running body text. Although the value is a number, the corresponding Arabic numeral, Roman numeral, or alphabet letter (controlled by the type attribute) is used to render the value.

Example

<ol start="5"> ...</ol>

Value

Any positive integer.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).start

type:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

type=" labelType "

The type attribute provides some flexibility in how the sequence number is displayed in the browser. For an ordered list, the choices are among letters (uppercase or lowercase), Roman numerals (uppercase or lowercase), or Arabic numerals. The type attribute is deprecated in HTML 4 in favor of the list-style-type style sheet property.

Example

<ol type="a">...</ol>

Value

Possible values are A | a | I | i | 1. Sequencing is performed automatically as follows.

Type	Example
A	A, B, C, ...
a	a, b, c, ...
I	I, II, III, ...
i	i, ii, iii, ...
1	1, 2, 3, ...

Default

1

Object Model Reference

[window.]document.getElementById(elementID).type

<optgroup>:IE 5(Mac)/6(Win) NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<optgroup>...</optgroup>

The optgroup element is a container for option elements within a select element. Each optgroup can represent a subgroup of options within the total list of select elements. Each browser and operating system has its own default styles to differentiate an optgroup label from selectable and indented options. In IE 5/Mac, the presence of optgroup elements turns a popup menu into a two-level hierarchical menu.

Example

<select name="carCos">
    <optgroup label="American">
        <option value="General Motors">General Motors</option>
        <option value="Ford">Ford Motor Company</option>
        <option value="Chrysler">DaimlerChrysler</option>
    </optgroup>
    <optgroup label="Japanese">
        <option value="Toyota">Toyota</option>
        <option value="Honda">Honda</option>
        <option value="Nissan">Nissan</option>
    </optgroup>
</select>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

disabled

label

Element-Specific Event Handler Attributes

None.

disabled:IE 5/6 NN n/a Moz all Saf n/a Op 7 HTML 4: Optional

 

disabled

The presence of this attribute disables the optgroup element and its nested option elements. Other optgroup elements remain enabled.

Example

<optgroup label="Engineering" disabled>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).disabled

label:IE 5/6 NN n/a Moz all Saf all Op 7 HTML 4: Required

 

label=" labelText "

The text of the select element entry for the optgroup is defined by the label attribute. This is plain text, not HTML, and the user cannot select this text from the list.

Example

<optgroup label="Engineering" disabled>

Value

Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).label

<option>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<option>...</option>

The option element defines an item that appears in a select element listing, whether the listing is in a pop-up menu or scrolling list. option elements associated with a select element must be nested within the start and end tags of the select element.

select elements supply name/value pairs when the element is submitted as part of a form element. Typically, the name attribute of the select element and the value attribute of the selected option are submitted as the name/value pair. Therefore, it is important to assign a meaningful value to the value attribute of each option element in a select list. You can use the value attribute to disguise user-unfriendly (but server- or script-friendly) values from the user, while presenting a user-friendly entry that appears in the select list. Content for the human-readable entry of a select list is entered after the option element’s start tag. The end tag is optional because the entry is delimited either by the next option element start tag or the select element’s end tag. See also the optgroup attribute for possible future grouping of option elements into hierarchical menu groupings.

Example

<select name="chapters">
    <option value="1">Chapter 1</option>
    <option value="2">Chapter 2</option>
    <option value="3">Chapter 3</option>
    <option value="4">Chapter 4</option>
</select>

Object Model Reference

[window.]document.formName.selectName.optionName
[window.]document.forms[i].elements[j].options[k].optionName
[window.]document.getElementById(elementID)

Element-Specific Attributes

disabled

label

selected

value

Element-Specific Event Handler Attributes

None.

disabled:IE 5(Mac) NN n/a Moz all Saf n/a Op 7 HTML 4: Optional

 

disabled

The presence of this attribute disables the option element in the list. Note that although the attribute disables the list choice in IE 5/Mac, as of Version 7, IE/Windows provides no other functionality for this attribute.

Example

<option value="Met101" disabled>Meteorology 101</option>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.selectName.optionName.disabled
[window.]document.forms[i].elements[j].options[k].optionName.disabled
[window.]document.getElementById(elementID).disabled

label:IE n/a NN n/a Moz all Saf all Op 7 HTML 4: Required

 

label=" labelText "

The label attribute is included in HTML 4.0 in anticipation of possible hierarchical select lists. The label is intended to be a shorter alternate entry for an option element when it is rendered hierarchically. It overrides the normal text associated with the option element. Note that IE 5/Mac and Safari incorrectly display the label attribute value in lieu of the element’s text. Other current browsers provide no practical functionality for this attribute except for Opera 9, which uses this attribute in the Web Forms 2.0 context to provide a friendly label for an item in a datalist element (e.g., a web site title, while the option’s value attribute is a URL).

Example

<option label="Meteo 101" value="met101">Meteorology 101</option>

Value

Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.

Default

None.

selected:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

selected

The presence of the selected attribute preselects the item within the select element. When the select element is set to multiple, more than one option element may have the selected attribute set.

Example

<option value="met101" selected>Meteorology 101</option>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.selectName.optionName.selected
[window.]document.forms[i].elements[j].options[k].selected
[window.]document.getElementById(elementID).selected

value:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

value=" text "

Associates a value with an option that may or may not be the same as the text displayed in the select element. When the select element is in a form submitted to the server, the value of the value attribute is assigned to the name/value pair for the select element if the option has been selected by the user (or is designated as selected with that attribute and the user has made no other selection). For scripting purposes, the value attribute might contain values such as URLs or string representations of objects that may subsequently be processed by scripts.

Example

<option value="met101">Meteorology 101</option>

Value

Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.

Default

None.

Object Model Reference

[window.]document.formName.selectName.optionName.value
[window.]document.forms[i].elements[j].options[k].optionName.value
[window.]document.getElementById(elementID).value

<output>:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: HTML End Tag: Required

 

<output>...</output>

A Web Forms 2.0 output element can be associated with a form control to display HTML content under script control, usually as a result of a form-related event occurring. The element is an inline element, like a span element, but unlike other form controls, the output element’s value is not submitted with the form. The element does, however, become a member of the form’s elements array.

One use is to display advisory or transient information while a user interacts with the form. For example, an initially empty output element might be adjacent to one of the text entry fields in a form. An event handler monitoring user input of the field (via the forminput event) could check various ValidityState object properties and display a relevant error message if the data being entered is invalid.

Example

<script type="text/javascript"> // <![CDATA[
function validateField(evt) {
   var form = evt.target.form;
   var errField = form.elements[evt.target.name + "Error"];
   if (evt.target.validity.typeMismatch) {
      errField.value = 'You must enter a time (hh:mm).';
   } else if (evt.target.validity.stepMismatch) {
      errField.value = 'Appointments must begin at 0, 15, 30, or 45 past the hour.';
   } else if (evt.target.validity.rangeUnderflow) {
      errField.value = 'The earliest appointment is 9:00 am.';
   } else if (evt.target.validity.rangeOverflow) {
      errField.value = 'The last appointment is 5:00 pm.';
   } else if (evt.target.validity.valueMissing) {
      errField.value = 'You must enter a time.';
   } else {
      errField.value = '';
   }
   evt.preventDefault( );
// ]]>
}
</script>
...
<form action="..." method="get" >
<p><label>Desired appointment time:
<input type="time" name="apptTime" min="09:00" max="17:00" value="09:00"
   step="900" required="required" onforminput="validateField(event)" />
</label>
<output name="apptTimeError" />
</p>
<p>
<input type="submit" />
</p>
</form>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

for

form

name

Element-Specific Event Handler Attributes

None.

for:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

for=" elementID [elementID] ... "

Specifies the IDs of one or more other elements that are related to the option element. The specific usage is dependent upon the browser.

Value

One or more space-delimited element ID attributes.

Default

None.

Object Model Reference

None.

form:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

form=" formID [formID] ... "

Lets you associate the output element with one or more forms that do not enclose the control. Because output elements in Web Forms 2.0 are not confined to be descendants of form elements, the output elements may be located away from the form element. The form attribute connects the output element with one or more form elements on the page.

Input Types

All rendered types.

Example

<output form="appointmentForm" name="apptTimeError" />

Value

ID of one or more form elements on the page. Multiple references are space-delimited.

Default

None.

name:IE all NN all Moz all Saf all Op 9 HTML all: Optional

 

name=" elementIdentifier "

An identifier that can be used for script access via the form’s elements array. You can also assign an identifier to the id attribute and use document.getElementById( ) if you prefer.

Example

<output form="appointmentForm" name="apptTimeError" />

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.elementName.name
[window.]document.forms[i].elements[j].name
[window.]document.getElementById(elementID).name

<p>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<p>...</p>

A p element defines a paragraph structural element in a document. With HTML 4, the p element is formally a block-level element, which means that content for a p element begins on its own line, and content following the p element starts on its own line. No other block-level elements may be nested inside a p element. If you omit the end tag (not permissible in XHTML), the element ends at the next block-level element start tag.

The nature of the p element has changed over time. In early implementations of HTML, the element represented only a paragraph break (a new line with some extra line spacing). Version 4 and later browsers render p elements in a hybrid way such that the start tag of a p element inserts a line space before the block. This means that a p element cannot start at the very top of a page unless it is positioned via CSS. Use the p element for structural purposes, rather than formatting purposes.

The content of a p element does not recognize extra whitespace that appears in the source code. Other elements, such as pre, render content just as it is formatted in the source code.

Example

<p>This is a simple, one-sentence paragraph.</p>
<p>This second paragraph starts on its own line, with a little extra
line spacing.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

Element-Specific Event Handler Attributes

None.

align:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" where "

Determines how the paragraph text is justified within the box that the p element occupies. See the discussion about horizontal alignment for a block element’s content in "Alignment Constants,” earlier in this chapter.

The align attribute is deprecated in HTML 4 in favor of the text-align style sheet property.

Example

<p align="center">...</p>

Value

Text alignment values are center | justify | left| right, although the justify value does not validate in strict HTML or XHTML DTDs.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

<param>:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Forbidden

 

<param>

The param element may be nested within an applet or object element to pass parameters to the Java applet or object (typically, an ActiveX control in IE or a plugin) as it is being loaded. Parameters provide ways for HTML authors to adjust settings of an applet or object without having to recode the applet or object. A parameter typically passes a name/value pair, which is assigned to the name and value attributes. You can have more than one param element per applet or object. The documentation for the applet or object should provide you with the information necessary to pass those parameter values.

Example

<applet code="simpleClock.class" name="myClock" width="400" height="50">
<param name="bgColor" value="black">
<param name="fgColor" value="yellow">
</applet>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

datafld	dataformatas	datasrc	name	type
value	valuetype

Element-Specific Event Handler Attributes

None.

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the parameter passed to a Java applet or object. In the following example, data from a data source’s column named backColor is assigned to the value attribute, even though the attribute is not explicitly shown in the tag. More complex relationships are also possible with both object and applet elements. datafld works only with text file data sources in IE 5/Mac.

Example

<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">

Value

Case-sensitive identifier.

Default

None.

dataformatas:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

dataformatas=" dataType "

Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. This attribute setting depends entirely on how the data source is constructed and what kind of data the param element is expecting. dataformatas works only with text file data sources in IE 5/Mac.

Example

<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">

Value

IE recognizes two possible settings: text | html.

Default

text

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. datasrc works only with text file data sources in IE 5/Mac.

Example

<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">

Value

Case-sensitive identifier.

Default

None.

name:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Required

 

name=" elementIdentifier "

Assigns an identifier for the parameter that the applet or object is expecting. Parameters generally supply a name/value pair. An applet, for example, includes a routine that fetches each parameter by name and assigns the passed value to a variable within the applet. Documentation for the applet or object should provide a list of names and value types corresponding to the param elements.

Example

<param name="loop" value="4">

Value

Case-sensitive identifier.

Default

None.

type:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

type=" MIMEType "

When the valuetype attribute is set to "ref", the type attribute value advises the browser about the content type of the file referenced by the URL assigned to the value attribute. Omit the type attribute for other settings of the valuetype attribute.

Example

<param name="help" value="http://www.example.com/help.html" valuetype="ref"
type="text/html">

Value

Case-insensitive MIME type. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).type

value:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: Optional

 

value=" runTimeParameterValue "

The parameter value to be passed to an applet or object as the executable program or data loads. Parameter values are passed as string values, and it is up to the applet or object to perform the necessary internal coercion of the data to the desired data type. The value attribute is listed as optional because there may be instances in which the presence of the param element name attribute may be sufficient for the object. Once the applet or object loads its associated parameter values, scripts cannot dynamically modify those values unless the applet or object is scriptable and exposes methods designed to modify the values.

Example

<param name="loop" value="4">

Value

Any string value.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).value

valuetype:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

valuetype=" paramValueType "

object element parameters can come in three flavors: data, object, and ref. The valuetype attribute uses these constants to tell the browser how to treat the value assigned to the value attribute for passing to the object. When the valuetype is data, the value attribute is passed as a plain text string. A valuetype of object means that the value attribute consists of an identifier (id attribute value) of some other object element defined earlier in the same document. The other object may be one whose declare attribute is set, and now the parameter values are being passed to instantiate the object. When valuetype is ref, the value attribute is a URL that points to a file or other resource where runtime values are stored (perhaps a set of parameter values).

Example

<param name="anime" value="http://www.example.com/params/animation.txt"
valuetype="ref" type="text/html">

Value

Three possible constant values: data | object | ref.

Default

data

Object Model Reference

[window.]document.getElementById(elementID).valueType

<plaintext>:IE all NN all Moz all Saf all Op 7 HTML <4: HTML End Tag: Optional

 

<plaintext>...</plaintext>

The plaintext element displays its content in a monospace font as a block element, but with a twist. All document source code coming after the start tag is rendered as-is in the browser window. You cannot turn off the plaintext element. Even the end tag is rendered as-is. This element has been long deprecated in HTML and has even been removed from the HTML 4.0 specification. You are encouraged to use the pre element instead.

Example

<p>The rest of the HTML code follows:</p>
<plaintext>
...
</plaintext>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<pre>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<pre>...</pre>

The pre element defines a block of preformatted text. Preformatted text is usually rendered by default in a monospace font and, more importantly, it preserves the whitespace (multiple spaces between words and new lines) entered into the source code for the content. Unlike the deprecated plaintext element, the pre element doesn’t ignore HTML tags. Instead, it passes such tags onto the browser for normal rendering. If you want to display HTML tags in a block of preformatted text, use entities for the less-than (<) and greater-than (>) symbols. This prevents the HTML tags from being interpreted as genuine tags but renders the symbols within the preformatted text block.

Browsers ignore a whitespace line break immediately following a pre element start tag in case you wish to start the content on a new line in the source code, as shown in the example below.

The HTML 4 specification is adamant about the pre element maintaining its monospaced font size and line spacing. It lists the following elements that should not be included inside a pre element: applet, basefont, big, font, img, object, small, sub, and sup. Any one of these destroys the fixed-size pitch of the pre element. The recommendation also encourages authors to avoid overriding the monospaced font settings with style sheets.

One last admonition concerns using tab characters to indent or align text within a pre element. Not all browsers render tab characters the same way. Avoid potential problems by using space characters and let the pre element’s preservation of whitespace do the job. No nonbreaking space entities ( ) are necessary in a pre element.

Example

<p>Here is the script example:</p>
<pre>
&lt;script language="JavaScript"&gt;
   document.write("Hello, world.")
&lt;/script&gt;
</pre>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

cols

width

wrap

Element-Specific Event Handler Attributes

None.

cols:IE n/a NN all Moz all Saf n/a Op n/a HTML n/a: Optional

 

cols=" columnCount "

The maximum number of characters per line of preformatted code. This proprietary attribute automatically sets the wrap attribute to true. Without this attribute, the source code formatting (or width attribute, where supported) governs the line width.

Example

<pre cols="80">...</pre>

Value

Any positive integer.

Default

None.

width:IE n/a NN n/a Moz all Saf n/a Op n/a HTML 4: Optional

 

width=" columnCount "

The HTML 4 specification introduces the width attribute to allow you to set a maximum number of characters to be rendered on a preformatted line of text. Presumably, browsers that support this attribute in the future will wrap lines so that words do not break in the middle. Without this attribute, the source code formatting governs the line width. Navigator and Mozilla provide this functionality with the cols attribute, while Mozilla also supports the width attribute. Note that the CSS width property does not affect this element.

Example

<pre width="80">...</pre>

Value

Any positive integer.

Default

None.

wrap:IE n/a NN all Moz all Saf n/a Op n/a HTML n/a: Optional

 

wrap

The presence of the wrap attribute instructs Navigator and Mozilla to wrap preformatted text so that text does not run beyond the right edge of the browser window or frame. wrap is set to true automatically when the cols attribute is set.

Example

<pre wrap>...</pre>

Value

The presence of the attribute sets its value to true.

Default

false

<q>:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<q>...</q>

The q element is intended to set off an inline quote inside a document. The HTML 4 specification indicates that browsers should automatically surround the content of a q element with language-sensitive quotation marks, and that authors should not include quotes. All mainstream browsers supports this requirement, except for IE in Windows (through version 7). IE 5/Mac inserts quotes, but if the element’s parent container is not left-aligned, the quotes float out of place. If you need quotes around quoted text in a cross-browser environment, you have no choice at this point but to include them yourself and not use the q element. For a block-level quotation, see the blockquote element.

Example

<p>The preamble to the u.s. Constitution begins,
<q>We the People of the United States</q></p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

cite

Element-Specific Event Handler Attributes

None.

cite:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

cite=" URL "

A URL pointing to an online source document from which the quotation is taken. This is not in any way a mechanism for copying or extracting content from another document. Presumably, the purpose of this HTML 4 recommendation is to encourage future browsers and search engines to utilize a reference to online source material for the benefit of readers and surfers. Version 6 browsers provide no practical functionality for this attribute.

Value

Any valid URL to a document on the World Wide Web, including absolute or relative URLs.

Default

None.

<rb>:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML X1.1: End Tag: Required

 

<rb>...</rb>

The rb element denotes the base text within a ruby-enhanced section of content. This is the regular text to which ruby annotation is added. IE 5 and later supports ruby text, but the rb element is not explicitly supported, and is assumed to automatically apply to text other than what is encased inside rt elements.

Example

<ruby>
  <rb>03</rb><rt>Month</rt>
  <rb>04</rb><rt>Day</rt>
  <rb>2003</rb><rt>Year</rt>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<rbc>, <rtc>:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML X1.1: End Tag: Required

 

<rbc>...</rbc> <rtc>...</rtc>

If you want to string together a contiguous sequence of ruby base items and their associated ruby text items, you can group all base items and all text items together inside rbc and rtc containers, respectively. The number of items inside the rbc and rtc elements should be the same so that the browser can keep the base and ruby text items together. Using this approach does not degrade well in browsers that do not support ruby text.

Example

<ruby>
  <rbc>
    <rb>03</rb><rb>04</rb><rb>2003</rb>
  </rbc>
  <rtc>
    <rt>Month</rt><rt>Day</rt><rt>Year</rt>
  </rtc>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<rp>:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML X1.1: End Tag: Required

 

<rp>...</rp>

The ruby markup module features the rp element to ease compatibility with browsers that don’t support ruby markup directly. Non-ruby browsers render both the rp and rt element content as inline text. The rp element gives you a chance to include parentheses (or other character) around the ruby text so that the ruby text acts as an inline label. Content of each rp element is traditionally either a left or right parenthesis symbol. A complete rp element goes before and after each rt element. Browsers that support ruby text ignore the rp element content, and, thus, don’t display the parentheses.

Example

<ruby>
  <rb>03</rb><rp>(</rp><rt>Month</rt><rp>)</rp>
  <rb>04</rb><rp>(</rp><rt>Day</rt><rp>)</rp>
  <rb>2003</rb><rp>(</rp><rt>Year</rt><rp>)</rp>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<rt>:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML X1.1: End Tag: Required

 

<rt>...</rt>

The rt element contains the text that is the annotation for a corresponding rb element. Browsers that support ruby text usually render rt elements in a smaller font size than the base text. Through style sheet assignment, you can also use alternate font families. You can also assign a different language set for the ruby text via the xml:lang attribute of the rt element.

Example

<ruby>
  <rb>03</rb><rt>Month</rt>
  <rb>04</rb><rt>Day</rt>
  <rb>2003</rb><rt>Year</rt>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

name

rbspan

Element-Specific Event Handler Attributes

None.

name:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

name=" elementIdentifier "

Sets an identifier for the element.

Value

Case-sensitive string.

Default

None.

rbspan:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML X1.1: Optional

 

rbspan=" integer "

In some cases, you may want one rt element to span two or more contiguous rb elements. Assign the number of rb elements to the rt element’s rbspan attribute. The mechanism is similar to the td element colspan attribute.

Value

Integer number of rb elements.

Default

1

<ruby>:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML X1.1: End Tag: Required

 

<ruby>...</ruby>

Ruby text is small-font annotation that usually appears above or below the main body text (or to one side in vertically oriented writing systems). The name comes from a small font that was used in typography to create the small annotation text. Ruby text is more commonly employed in pictographic languages, where the ruby text supplies a pronounciation guide to the main text pictographic symbols. But ruby text can be used with Latin alphabet languages, too.

The ruby element is a master container for all content to be affected by ruby markup, including the main text. The main text is known as the ruby base, while the annotation is called ruby text. Each of these types has its own tag (rb and rt, respectively), and any such tags must be encased within a ruby element. IE implemented the basics of ruby markup starting with Version 5 (Windows and Mac).

The W3C ruby markup specification was developed independently of the HTML recommendation, and was added to XHTML 1.1 as one of the first modules to take advantage of the extensible nature of XHTML.

Example

<ruby>
  <rb>03</rb><rt>Month</rt>
  <rb>04</rb><rt>Day</rt>
  <rb>2003</rb><rt>Year</rt>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

name

Element-Specific Event Handler Attributes

None.

name:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

name=" elementIdentifier "

Sets an identifier for the element.

Value

Case-sensitive string.

Default

None.

<s>:IE 3 NN 3 Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<s>...</s>

The s element renders its content as strikethrough text. This element is identical to the strike element; it was adopted because it more closely resembled the one-character element names for other type formatting (such as b, i, and u elements). In any case, both s and strike elements are deprecated in HTML 4 in favor of the text-decoration:line-through style sheet property.

Example

<p>If at first you don't succeed, <s>do it over</s> try, try again.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<samp>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<samp>...</samp>

The samp element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A samp element is one that contains text that is sample output from a computer program or script. This is different from a code example, which is covered by the code element.

Browsers have free rein to determine how (or whether) to distinguish samp element content from the rest of the body element. Current mainstream browsers elect to render the text in monospace font. Override the default with a style sheet as you see fit.

Example

<p>When you press the Enter key, you will see <samp>Hello, world!</samp>
on the screen.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<script>:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<script>...</script>

The script element provides a container for lines of script code written in any scripting language that the browser is capable of interpreting. Script statements that are not written inside a function definition are executed as the page loads; function definitions are loaded but their execution is deferred until explicitly invoked by user or system action (events). You can have more than one script element in a document, and you may include script elements written in different script languages within the same document.

An important shift in attribute syntax is introduced with HTML 4. To specify the scripting language of the statements within a script element, the language attribute has been used since the first scriptable browsers. HTML 4 deprecates that attribute in favor of the type attribute, whose value is a MIME type. Until you know for certain that your page visitors use only newer browsers that support the type attribute, you should include both attributes in documents for long-term backward compatibility with older browsers. The language attribute validates with transitional DTDs.

All but the earliest scriptable browsers also allow script statements to be imported into the document from a document whose URL is specified for the src attribute.

Very old, nonscriptable browsers don’t recognize the script element and may attempt to render the script statements as regular HTML content. To prevent this, the long-held practice was to wrap the script statements inside HTML block comment markers. The end-of-comment marker (-->) must be preceded by a JavaScript comment marker (//) to prevent JavaScript from generating a script error.

If you are deploying your content in XHTML, you must enclose your script statements in an XML CDATA section to let XHTML validators accept script symbols (< and &) that are illegal content characters under XML. At the same time, a sufficient number of browsers in use today do not understand CDATA markup. As a compromise that appeases all browser types and validators, combine CDATA markup with script comment symbols, as shown in the example below. Or you can avoid the entire issue by importing scripts from external .js files.

Example

<script type="text/javascript" language="JavaScript">
// <![CDATA[
function howdy( ) {
    alert("Hello, HTML world!");
}
// ]]>
</script>

<script type="text/javascript" src="scripts/myscript.js"></script>

Element-Specific Attributes

charset	defer	event	for	language
src	type	version	xml:space

Element-Specific Event Handler Attributes

None.

charset:IE n/a NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

charset=" characterSet "

Character encoding of the content in the file referred to by the src attribute.

Example

<script charset="csISO5427Cyrillic" src="moscow.js"> . . . </script>

Value

Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).

Default

Determined by browser.

defer:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

defer

The presence of the defer attribute instructs the browser to render regular HTML content without looking for the script to generate content as the page loads. This is an advisory attribute only. The browser doesn’t have to hold up rendering further HTML content as it parses the content of the script element in search of document.write( ) statements. Of the current browsers, only IE responds to the defer attribute.

Example

<script type="text/javascript" language="JavaScript" defer>...</script>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).defer

event:IE 4 NN n/a Moz n/a Saf all Op 7 HTML |4|: Optional

 

event=" eventName "

Internet Explorer’s event model allows the binding of object events to script elements with the help of the event and for attributes. As the page loads, the browser registers each script element with its event and object binding so that when the object generates the event, the script statements inside the script element execute—without having to write event handlers for the objects or wrap the script statements inside function definitions. Event values are written either as unquoted event names or as quoted event names formatted as functions (with trailing parentheses and optional parameter names). Use this type of script-event binding only in Internet Explorer, if at all. Other browsers attempt to execute the script statements while the page loads. The transitional HTML 4 DTD reserves this attribute for possible future use, but the reservation doesn’t hold for XHTML 1.0.

Example

<script for="window" event="onresize( )">...</script>

Value

Case-sensitive event name or the event name as a function inside a quote pair. The object described in the for attribute must support the event named in the event attribute.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).event

for:IE 4 NN n/a Moz n/a Saf all Op 7 HTML |4|: Optional

 

for=" elementID"

Internet Explorer’s event model allows the binding of object events to script elements with the help of the event and for attributes. As the page loads, the browser registers each script element with its event and object binding so that when the object generates the event, the script statements inside the script element execute—without having to write event handlers for the objects or wrap the script statements inside function definitions. Use the unique id attribute value of the element whose event you wish to handle. Use this type of script-event binding only in Internet Explorer. Nonsupporting browsers attempt to execute the script statements while the page loads. The transitional HTML 4 DTD reserves this attribute for possible future use, but the reservation doesn’t hold for XHTML 1.0.

Example

<script for="firstNameEntry" event="onchange( )">...</script>

Value

Case-sensitive ID value of the event-generating element. The object described in the for attribute must support the event named in the event attribute.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).htmlFor

language:IE 3 NN 2 Moz all Saf all Op 7 HTML 4: Optional

 

language=" scriptingLanguage "

Sets the scripting language for script statements defined in the element. This attribute is deprecated in HTML 4 (in favor of the type attribute), but it has been so widely used since the first days of scriptable browsers that its use and support will continue for a long time to come. Moreover, it is so far the only accepted way to convey the JavaScript version for the script block (e.g., see the Array object in Chapter 5).

Example

<script language="JavaScript">...</script>

Value

Internet Explorer 4 and later recognize five case-insensitive language names: JavaScript | JScript | vbs | vbscript | ECMAScript. Navigator and Mozilla recognize only JavaScript. Safari, and Opera recognize JavaScript | JScript | ECMAScript.

Versions of JavaScript are also supported in appropriate browsers. To keep the attribute values one-word identifiers, the version numbers are tacked onto the end of the "JavaScript" language name. The following table summarizes the browsers in which each JavaScript version was introduced.

Version	First Introduction
JavaScript	NN 2, IE 3
JavaScript 1.1	NN 3
JavaScript 1.2	NN 4, IE 4
JavaScript 1.5	Mozilla 1.8
JavaScript 1.6	Mozilla 1.8
JavaScript 1.7	Firefox 2.0

As for current browsers, IE 7 is still on JavaScript 1.3, while Safari and Opera are up to JavaScript 1.5.

When script elements are assigned a version later than what a browser has implemented, older browsers that don’t support the named version ignore the script elements.

Default

JScript (IE); JavaScript (others)

Object Model Reference

[window.]document.getElementById(elementID).language

src:IE 4 NN 3 Moz all Saf all Op 7 HTML 4: Optional

 

src=" URL "

Imports a file of script statements from an external file. Once the external statements are loaded, the browser treats them as if they were embedded in the main HTML document.

In theory, you should be able to add script statements inside a script element that loads an external script library file. In practice, it is more reliable to provide a separate script element for each external library file and for in-document scripts.

Current implementations limit the src attribute to point to JavaScript external files. Such files must have a .js filename extension, and the server must have the extension and application/x-javascript MIME type set to serve up such files.

When assigning the src attribute in an XHTML document, browsers may not like the shortcut end tag format. Don’t think of the tag as an empty element, but rather as one with content that arrives from an external source. Use an explicit </script> end tag.

Example

<script language="JavaScript" type="text/javascript" src="stringParseLib.js">
</script>

Value

Any valid URL. Current browsers require files with names that end in the .js extension. A complete URL may help overcome difficulties in earlier browsers that implement this feature.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).src

type:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Required

 

type=" MIMEType "

An advisory about the content type of the script statements. The content type should tell the browser which scripting engine to use to interpret the script statements. The type attribute will eventually replace the language attribute as the one defining the scripting language in which the element’s statements are written. To be compatible with future and past browsers, you may include both the language and type attributes in a script element.

Example

<script type="text/javascript" language="JavaScript">...</script>

Value

Case-insensitive MIME type. Values are limited to one(s) for which a particular browser is equipped. IE 4 and later and all other scriptable browsers accept text/javascript and application/x-javascript for scripts in an ECMAScript-compatible language. IE also accepts the following types: text/ecmascript, text/jscript, text/vbs (IE/Windows), text/vbscript (IE/Windows), and text/xml (IE 5 and later).

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).type

version:IE n/a NN n/a Moz all Saf n/a Op n/a HTML n/a: Optional

 

version=" x.y "

This attribute is listed here as a possible future implementation for Mozilla-based browsers. Most of the pieces that support this attribute (to complement the type attribute) are in place in the Mozilla browser engine but are not yet connected.

Example

<script type="text/javascript" version="1.5">...</script>

Value

Language version expressed as major and minor version integers, separated by a period.

xml:space:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML X1.0: Optional

 

xml:space=" preserve "

An XHTML parser is supposed to expunge all source code whitespace as it processes the document. This removal may harm scripts. By including the XML namespace space attribute, you instruct the parser to keep source code whitespace of script element content intact.

Example

<script type="text/javascript" xml:space="preserve">...</script>

Value

Constant value: preserve.

Default

None.

<select>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<select>...</select>

The select element displays information from nested option elements as either a scrolling list or pop-up menu in a document. Users typically make a selection from the list of items (or multiple selections from a scrolling list if the size attribute is set greater than 1 and the multiple attribute is set). The value attribute of the selected option item is submitted as the value part of a name/value pair to the server with a form. When the element is set to allow multiple selections, multiple ampersand-delimited name/value pairs (repeating the name of the element) are submitted with the form. Navigator 4 requires that a select element be placed inside a form element.

Example

<select name="chapters">
    <option value="chap1.html">Chapter 1</option>
    <option value="chap2.html">Chapter 2</option>
    <option value="chap3.html">Chapter 3</option>
    <option value="chap4.html">Chapter 4</option>
</select>

Object Model Reference

[window.]document.formName.selectName
[window.]document.forms[i].elements[j]
[window.]document.getElementById(elementID)

Element-Specific Attributes

accesskey	align	autofocus	data	datafld
datasrc	disabled	form	multiple	name
size	tabindex

Element-Specific Event Handler Attributes

Handler	IE	NN	Opera	Others	HTML
onafterupdate	4	n/a	n/a	n/a	n/a
onbeforeupdate	4	n/a	n/a	n/a	n/a
onchange	3	2	all	all	4
onformchange	n/a	n/a	9	n/a	n/a
onforminput	n/a	n/a	9	n/a	n/a
oninvalid	n/a	n/a	9	n/a	n/a

accesskey:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

accesskey=" character "

See the description of this shared attribute at the beginning of this chapter for general characteristics.

align:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

align=" alignmentConstant "

Determines how the rectangle of the select element (particularly when the size attribute is set greater than 1) aligns within the context of surrounding content. See "Alignment Constants,” earlier in this chapter. Note that only Internet Explorer supports the align attribute for the select element.

Example

<select name="chapters" multiple align="baseline">...</select>

Value

Case-insensitive constant value.

Default

bottom (IE/Windows); absmiddle (IE/Macintosh).

Object Model Reference

[window.]document.formName.selectName.align
[window.]document.forms[i].elements[j].align
[window.]document.getElementById(elementID).align

autofocus:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

autofocus="autofocus"

Web Forms 2.0 extension that brings focus to the element after the page loads. Should be assigned to only one form control element per page.

data:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

data=" URI "

Web Forms 2.0 extension that allows a form to retrieve initial values for controls from an external XML file. The specification provides some details of the structure and namespaces to be used for the file. Visit http://www.whatwg.org/ for further information.

Example

<select name="departments" data="form/departments.xml">...</select>

Value

Uniform Resource Identifier.

Default

None.

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name to the selectedIndex property of a select element (i.e., a zero-based index value of the item currently selected in the list, as described in the select object of Chapter 2). As such, you can use data binding only with select elements that do not specify the multiple attribute. A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4 but was dropped in XHTML 1.0.

Example

<select name="chapters" datasrc="DBSRC3" datafld="chapterRequest">
    <option value="chap1.html">Chapter 1</option>
    <option value="chap2.html">Chapter 2</option>
    <option value="chap3.html">Chapter 3</option>
    <option value="chap4.html">Chapter 4</option>
</select>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.selectName.dataFld
[window.]document.forms[i].elements[j].dataFld
[window.]document.getElementById(elementID).dataFld

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<select name="chapters" datasrc="#DBSRC3" datafld="chapterRequest">
    <option value="chap1.html">Chapter 1</option>
    <option value="chap2.html">Chapter 2</option>
    <option value="chap3.html">Chapter 3</option>
    <option value="chap4.html">Chapter 4</option>
</select>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.selectName.dataSrc
[window.]document.forms[i].elements[j].dataSrc
[window.]document.getElementById(elementID).dataSrc

disabled:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

disabled

The presence of this attribute disables the entire select element and its nested option elements. The element receives no events when it is disabled. You can also disable individual options through those elements’ disabled properties.

Example

<select name="chapters" disabled>
    <option value="chap1.html">Chapter 1</option>
    <option value="chap2.html">Chapter 2</option>
    <option value="chap3.html">Chapter 3</option>
    <option value="chap4.html">Chapter 4</option>
</select>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.selectName.disabled
[window.]document.forms[i].elements[j].disabled
[window.]document.getElementById(elementID).disabled

form:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

form=" formID [formID] ... "

Web Forms 2.0 extension that lets you associate a single form control element with one or more forms that do not enclose the controls. Because select elements in Web Forms 2.0 are not confined to be descendants of form elements, the select elements may be located away from the form element. The form attribute connects the select element with one or more form elements on the page.

Input Types

All rendered types.

Example

<select id="chapters" form="bookSearch" />

Value

ID of one or more form elements on the page. Multiple references are space-delimited.

Default

None.

multiple:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

multiple

The presence of the multiple attribute instructs the browser to render the select element as a list box and to allow users to make multiple selections from the list of options. By default, the size attribute is set to the number of nested option elements, but the value may be overridden with the size attribute setting. Users can select contiguous items by Shift-clicking on the first and last items of the group. To make discontiguous selections, Windows users must Ctrl-click on each item; Mac users must Command-click on each item. The multiple attribute has no effect when size is set to 1 to display a pop-up menu.

Example

<select name="equipment" multiple>
    <option value="monitor">Video monitor</option>
    <option value="modem">Modem</option>
    <option value="printer">Printer</option>
    ...
</select>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.selectName.multiple
[window.]document.forms[i].elements[j].multiple
[window.]document.getElementById(elementID).multiple
[window.]document.formName.selectName.type
[window.]document.forms[i].elements[j].type
[window.]document.getElementById(elementID).type

name:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

name=" elementIdentifier "

The name submitted as part of the element’s name/value pair with the form. It is similar to the name attribute of input elements.

Example

<select name="cpu" id="cpu">
    <option value="486">486</option>
    <option value="pentium">Pentium</option>
    <option value="pentium2">Pentium II</option>
    ...
</select>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.selectName.name
[window.]document.forms[i].elements[j].name
[window.]document.getElementById(elementID).name

size:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

size=" rowCount "

Controls the number of rows of option elements that appear in the select element. With a value of 1, the select element displays its content as a pop-up menu; with a value greater than 1, option items are rendered in a list box. Browsers control the width of the element, based on the widest text associated with nested option elements.

Example

<select name="equipment" size="3">
    <option value="monitor">Video monitor</option>
    <option value="modem">Modem</option>
    <option value="printer">Printer</option>
    ...
</select>

Value

Any positive integer.

Default

1

Object Model Reference

[window.]document.formName.selectName.size
[window.]document.forms[i].elements[j].size
[window.]document.getElementById(elementID).size

tabindex:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

tabindex=" integer "

Facilitates accessibility to a complex form control. Once the select element has focus, the user can continue using the keyboard to make item choices. See the discussion about this attribute earlier in this chapter.

<small>:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<small>...</small>

The small element renders its content in a relative size one level smaller than the text preceding the element. Given the font element’s way of specifying sizes in a range of 1 through 7, the small element displays its content one size smaller than the text that comes before it. This attribute is the same as specifying <font size=−1>.

Example

<p>Let's get really <small>small</small>.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<spacer>:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: HTML End Tag: Forbidden

 

<spacer>

As a solution to the need for creating blank space without forcing   entities, incessant <p> tags, or transparent images, Navigator 3 introduced the spacer element. This element creates empty space within a line of text, between lines, or as a rectangular space. Some of this functionality can be re-created in a cross-browser implementation with style sheets. The element is supported only in Navigator 3 and Navigator 4.

Example

<p>This is one line of a paragraph.
<spacer type="vertical" size="36">
And this completes the paragraph with a three-line gap from the first line.</p>

Element-Specific Attributes

align

height

size

type

width

Element-Specific Event Handler Attributes

None.

align:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

align=" alignmentConstant "

Determines how a block type of spacer element aligns within the context of surrounding content. See "Alignment Constants" earlier in this chapter for a description of the possibilities.

Example

<spacer type="block" height="90" width="40" align="absmiddle">

Value

Case-insensitive constant value.

Default

bottom

height, width:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: Required

 

height=" length " width=" length "

The size that a block type spacer element occupies in a document is governed by the height and width attribute settings. These attributes apply only when the type attribute is block.

Example

<spacer type="block" height="150" width="250">

Value

Positive integer or percentage values.

Default

0

size:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

size=" pixelCount "

The number of pixels of whitespace to insert either horizontally or vertically, depending on whether the type attribute is set to line or vertical. If the type attribute is set to block, the size attribute is ignored.

Example

<spacer type="line" size="40">

Value

Any positive integer.

Default

0

type:IE n/a NN 3 Moz n/a Saf n/a Op n/a HTML n/a: Required

 

type=" spacerType "

Defines which of the three spacer geometries is being specified for the spacer element. A type of line adds empty space in the same line of text as the preceding content; a type of vertical (or vert) adds empty space between lines of text; and a type of block defines a rectangular space that extends in two dimensions. For the line and vertical types, the size attribute must be assigned; for the block type, the height and width attributes must be assigned.

Example

<spacer type="line" size="40">

Value

Any of four case-insensitive constant values: block | line | vertical | vert.

Default

line

width

See height.

<span>:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<span>...</span>

The span element gives structure and context to any inline content in a document. Unlike some other structural elements that have very specific connotations attached to them (the p element, for instance), the author is free to give meaning to each particular span element by virtue of the element’s attribute settings and nested content. Each span element becomes a generic container for all content within the required start and end tags.

It is convenient to use the span element as a wrapper for a small inline chunk of content that is to be governed by a style sheet rule. For example, if you want to differentiate a few words in a paragraph with the equivalent of a small caps look, you would wrap the affected words with a span element whose style sheet defines the requested font and text styles. Such a style sheet could be defined as an inline style attribute of the span element or assigned via the class or id attribute depending on the structure of the rest of the document.

If you need an arbitrary container for block-level content, use the div element.

Example

<span style="font-size:10pt; text-transform:uppercase">
30-day special offer</span>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

datafld

dataformatas

datasrc

Element-Specific Event Handler Attributes

None.

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the HTML content of a span element. The data source column must be HTML (see dataformatas). datasrc and dataformatas attributes must also be set for the span element. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<span datasrc="DBSRC3" datafld="quote" dataformatas="HTML">...</span>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataFld

dataformatas:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

dataformatas=" dataType "

Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. A span element should receive data only in HTML format.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<span datasrc="DBSRC3" datafld="quote" dataformatas="HTML">...</span>

Value

Case-insensitive constants: html | text.

Default

text

Object Model Reference

[window.]document.getElementById(elementID).dataFormatAs

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML |4|: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.

Example

<span datasrc="DBSRC3" datafld="quote" dataformatas="HTML">...</span>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc

<strike>:IE 3 NN 3 Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<strike>...</strike>

The strike element renders its content as strikethrough text. This element is identical to the s element, which was adopted because it more closely resembled the one-character element names for other type formatting (such as b, i, and u elements). In any case, both strike and s elements are deprecated in HTML 4 in favor of the text-decoration:line-through style sheet property. Neither strike nor s elements validate with strict HTML 4 or XHTML DTDs.

Example

<p>If at first you don't succeed, <strike>do it over</strike> try, try again.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<strong>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<strong>...</strong>

The strong element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A strong element is one that contains text that indicates a stronger emphasis than the em element. Whereas an em element is typically rendered as italic text, a strong element is generally rendered as boldface text. Override the default with a style sheet as you see fit.

Example

<p>Don't delay. <strong>Order today</strong> to get the maximum discount.
</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<style>:IE 3 NN 4 Moz all Saf all Op 7 HTML 4: HTML End Tag: Required

 

<style>...</style>

The style element is a container for style sheet rules. Use the style element only inside the head element. You may include more than one style element in a head element (see the media attribute).

Very old browsers may attempt to render the content of a style element. To prevent that, you can wrap the style sheet rules inside HTML comment tags. See Online Section III for details on the makeup of style sheet rules.

Example

<style type="text/css">
h1 {font-size: 18pt; text-transform: capitalize}
p  {font-size: 12pt}
</style>

Object Model Reference

[window.]document.getElementsByTagName("style")[i]
[window.]document.getElementById(elementID)

Element-Specific Attributes

disabled

media

type

Element-Specific Event Handler Attributes

None.

disabled:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

disabled

Disables the entire style element, as if it didn’t exist in the document. IE/Mac responds to this attribute starting in Version 5.

The disabled attribute is a Boolean type, which means that its presence in the attribute sets its value to true. Its value can also be adjusted after the fact by scripting (see the style object in Chapter 2).

Example

<style type="text/css" disabled>...</style>

Value

The presence of the attribute disables the element.

Default

false

Object Model Reference

[window.]document.getElementsByTagName("style")[i].disabled
[window.]document.getElementById(elementID).disabled

media:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

media=" descriptorList "

Sets the intended output device for the content of the element. The media attribute looks forward to the day when browsers are able to tailor content to specific kinds of devices such as pocket computers, text-to-speech digitizers, or fuzzy television sets. These days, it is used mostly to provide an alternate style sheet for printed output. The HTML 4 specification defines a number of constant values for anticipated devices, but the list is open-ended, allowing future browsers to tailor output to yet other kinds of media and devices.

Example

<style type="text/css" media="print">...</style>

Value

Case-sensitive constant values. Multiple values can be grouped together in a comma-delimited list within a quoted string. Values defined in HTML 4 are all | aura | braille | handheld | print | projection | screen | tty | tv. Current browsers support the following values: all | print |screen.

Default

all

Object Model Reference

[window.]document.getElementsByTagName("style")[i].media
[window.]document.getElementById(elementID).media

type:IE 4 NN 4 Moz all Saf all Op 7 HTML 4: Required

 

type=" MIMEType "

The type attribute tells the browser which style sheet syntax to use to interpret the style rules defined in the current element.

Example

<style type="text/css">...</style>

Value

Case-insensitive MIME type. A type accepted by all mainstream browsers is "text/css". Navigator 4 (only) also recognizes "text/javascript" when using JavaScript syntax style sheets.

Default

text/css

Object Model Reference

[window.]document.getElementsByTagName("style")[i].type
[window.]document.getElementById(elementID).type

<sub>:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<sub>...</sub>

The sub element is a typographical element that instructs the browser to render its content as a subscript in a font size consistent with the surrounding content. Browsers tend to render this content in a smaller size than surrounding content.

Example

<p>A hydronium ion (H<sub>3</sub>O) has one more hydrogen atom than regular water.
</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<sup>:IE 3 NN 2 Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<sup>...</sup>

The sup element is a typographical element that instructs the browser to render its content as a superscript in a font size consistent with the surrounding content. Browsers tend to render this content in a smaller size than surrounding content.

Example

<p>This book is published by O'Reilly<sup>&#153;</sup>.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<table>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<table>...</table>

The table element is a container for additional elements that specify the content for a table. A table consists of rows and columns of content. Other elements related to the table element are caption, col, colgroup, tbody, td, tfoot, th, thead, and tr. The purpose of the table element is to define a number of visible attributes that apply to the entire table, regardless of the number of rows or columns within it. Many of these attributes can be overridden for a given row, column, or cell. The number of rows and columns is strictly a factor of the structure of tr and td elements within the table. It is advisable to include a tbody section in every table if your scripts will modify the table’s content.

Tables have been used for a relatively long time not only to organize rows and columns of content but also to position content. With no visible borders, table rows and columns can be set to empty space. With the wide browser adoption of CSS 2, web designers now rarely use tables for layout purposes. Tables are, instead, reserved for presentations of truly tabular data—data whose context within a document dictates that it be organized and presented in tabular format.

Deeply nested tables (tables within tables) can cause problems in some browsers. Navigator 4 has severe difficulty with style sheet inheritance and overall performance in complex tables (nesting beyond three levels is asking for trouble). IE 5/Mac can inexplicably explode cell dimensions when scripts create or modify table-related elements. The simpler you keep your table structure, the more reliable your pages will be across browsers. Heavy editing of table structures in visual HTML authoring tools can leave hidden complexities (e.g., lots of empty cells) in your source code. Temporarily turn on a thin table border to see the exact row and column structure (some web development browser extensions also let you see where tables are on the page).

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am–5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am–12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align	background	bgcolor	border	bordercolor
bordercolordark	bordercolorlight	cellpadding	cellspacing	cols
datapagesize	datasrc	frame	height	hspace
layout	rules	summary	vspace	width

Element-Specific Event Handler Attributes

Handler	NN	IE	HTML
onafterupdate	n/a	4	n/a
onbeforeupdate	n/a	4	n/a
onrowenter	n/a	4	n/a
onrowexit	n/a	4	n/a

align:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" where "

Determines how the table is aligned relative to the next outermost container (usually the document body or html element). The align attribute is deprecated in HTML 4 in favor of style sheet properties.

Example

<table align="center">...</table>

Value

Alignment constant: center | left | right.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

background:IE 3 NN 4 Moz all Saf all Op 7 HTML n/a: Optional

 

background=" URL "

Specifies an image file that is used as a backdrop to the table. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available table space. Smaller images download faster but are obviously repeated more often in the background. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Navigator 4 can be quirky with this attribute. Be prepared to wrap your main table (without a background) inside another table element, whose background property has a graphic file assigned to it.

Example

<table background="watermark.jpg">...</table>

Value

Any valid URL to an image file, including complete and relative URLs.

Default

None (table is transparent).

Object Model Reference

[window.]document.getElementById(elementID).background

bgcolor:IE 3 NN 3 Moz all Saf all Op 7 HTML 3.2: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the entire table. If you combine a bgcolor and background, any transparent areas of the background image let the background color show through. This attribute is deprecated in HTML 4 in favor of the background-color style property.

Example

<table bgcolor="tan">...</table>

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor

border:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

border=" pixelCount "

The thickness (in pixels) of the border drawn around a table element. If you set the border attribute to any value, browsers by default render narrow borders around each of the cells inside the table. With a table element’s border showing, the thickness of internal borders between cells is defined by the cellspacing attribute of the table element.

If you include only the border attribute without assigning any value to it, the browser renders default-sized borders around the entire table and between cells, unless overridden by other attributes.

Browsers render the border in a 3-D style, with the border appearing to be raised around the flat content in the cells. Numerous other attributes affect the look of the border, including: bordercolor, bordercolordark, bordercolorlight, frame, and rules. The type of border rendered for tables is different from the borders defined by style sheet rules. You get better control of the border look by using the dedicated attributes of the table element.

Example

<table border="1">...</table>

Value

A positive integer value.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).border

bordercolor:IE 3 NN 4 Moz all Saf all Op n/a HTML n/a: Optional

 

bordercolor=" colorTripletOrName "

The colors used to render some of the pixels that create the illusion of borders around cells and the entire table. The border attribute must have a nonzero value assigned for the color to appear. The 3-D effect of borders in is created by careful positioning of light (or white) and dark lines around the page’s background or default color (see Figure 1-4). Standard colors are usually shades of gray and white, depending on the browser.

Figure 1-4. Components of table border color

Applying color to a table border has a different effect in Internet Explorer and all other supporting browsers. Internet Explorer and Safari apply the color to all lines that make up the border. The net effect is to flatten the 3-D effect (refer to the bordercolordark and bordercolorlight attributes to color borders and maintain the 3-D effect in IE). In Navigator and Mozilla, the color is applied to what is normally the darker of the two shades used to create the border. Moreover, the browsers automatically adjust the darkness of some of the lines to enhance the 3-D effect of the border.

Example

<table bordercolor="green" border="2">...</table>

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColor

bordercolordark, bordercolorlight:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bordercolordark=" colorTripletOrName " bordercolorlight=" colorTripletOrName "

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page’s background or default color (see Figure 1-4 Figure 1-4). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark and bordercolorlight attributes. The border attribute must have a nonzero value assigned for the colors to appear.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

To achieve the identical look in IE and browsers that support table border colors, you must determine the complementary colors that other browsers use for the 3-D effect from the bordercolor attribute. Then assign those values to the bordercolordark and bordercolorlight attributes. You may place all three attributes in the same <table> tag.

Example

<table bordercolordark="darkred" bordercolorlight="salmon" border="3">...</table>

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColorDark
[window.]document.getElementById(elementID).borderColorLight

cellpadding:IE 3 NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

cellpadding=" length "

The amount of empty space between the border of a table cell and the content of the cell. Note that this attribute applies to space inside a cell. Without setting this attribute, most browsers render text content so that its leftmost pixels abut the left edge of the cell. If the table displays borders, adding a few pixels of breathing space between the border edge and the content makes the content more readable. Large padding may also be desirable in some design instances. This attribute is not as noticeable when the table does not display borders (in which case the cellspacing attribute can assist in adjusting the space between cells).

Example

<table border="2" cellpadding="3">...</table>

Value

Any length value in pixels or percentage of available space. Percentage values are based on the total available space in the horizontal and vertical dimensions of the cell. For example, a value of 10% means that the left and right padding will each be 5% of the total width of the cell; the top and bottom padding will each be 5% of the total height of the cell.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).cellPadding

cellspacing:IE 3 NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

cellspacing=" length "

The amount of empty space between the outer edges of each table cell. If you set the border attribute of the table element to any positive integer value, the effect of setting cellspacing is to define the thickness of borders rendered between cells. Even without a visible border, the readability of a table often benefits from cell spacing.

Example

<table border="2" cellspacing="10">...</table>

Value

Any positive integer.

Default

0 (no table border); 2 (with table border).

Object Model Reference

[window.]document.getElementById(elementID).cellSpacing

cols:IE 3 NN 4 Moz all Saf all Op n/a HTML n/a: Optional

 

cols=" columnCount "

The number of columns of the table. The HTML specification never adopted this attribute. In HTML 4, the functionality of this attribute is covered by the colgroup and col elements. In the meantime, the cols attribute is recognized by older and current browsers. The attribute assists the browser in preparation for rendering the table. Without this attribute, the browser relies on its interpretation of all downloaded tr and td elements to determine how the table is to be divided.

Example

<table cols="4">...</table>

Value

Any positive integer.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).cols

datapagesize:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datapagesize=" recordCount "

Used with IE data binding, this attribute advises the browser how many instances of a table row must be rendered to accommodate the number of data source records set by this attribute. A common application is setting a table cell to display a text input element whose datafld attribute is bound to a particular column of the data source (the datasrc is set in the table element). If the datapagesize attribute is set to 5, the browser must display five rows of the table (but the row is specified in the HTML only once).

Example

<table datasrc="DBSRC3" datapagesize="5">
<tr>
  <td><input type="text" datafld="stockNum"></td>
  <td><input type="text" datafld="qtyOnHand"></td>
</tr>
</table>

Value

Any positive integer.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataPageSize

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute.

A block of contiguous records can be rendered in the table when you also set the datapagesize attribute of the table. Works only with text file data sources in IE 5/Mac.

Example

<table datasrc="DBSRC3" datapagesize="5">...</table>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc

frame:IE 3 NN n/a Moz all Saf n/a Op 7 HTML 4: Optional

 

frame=" frameConstant "

Defines which (if any) sides of a table’s outer border (set with the border attribute) are rendered. This attribute does not affect the interior borders between cells. Including the border attribute without assigning any value to it is the same as setting the frame attribute to border. All settings can be replicated with CSS border-related properties if you prefer.

Example

<table border="3" frame="void">...</table>

Value

Any one case-insensitive frame constant:

above

Renders border along top edge of table only

below

Renders border along bottom edge of table only

border

Renders all four sides of the border (default in IE and NN)

box

Renders all four sides of the border (same as border)

hsides

Renders borders on top and bottom edges of table only (a nice look)

lhs

Renders border on left edge of table only

rhs

Renders border on right edge of table only

void

Hides all borders (default in HTML 4)

vsides

Renders borders on left and right edges of table only

Default

Mozilla: void (when border=0); border (when border is any other value). Internet Explorer: border.

Object Model Reference

[window.]document.getElementById(elementID).frame

height, width:IE 3 NN all Moz all Saf all Op 7 (width) HTML 3.2 (width): Optional

 

height=" length " width=" length "

The rectangular dimensions of a table that may be different from the default size as calculated by the browser. When the values for these attributes are less than the minimum space required to render the table cell content, the browser overrides the attribute settings to make sure that all content appears, even if it means that text lines word-wrap. You can also stretch the dimensions of a table beyond the browser-calculated dimensions. Extra whitespace appears inside table cells to make up the difference. If you specify just one attribute, the browser performs the necessary calculations to automatically adjust the dimension along the other axis.

Note that the height attribute is not in the HTML specification. The assumption there is that the table height is calculated by the browser to best show all cell content given either the default or attribute-established width. Because different browsers on different operating systems can render text content in varying relative font sizes, it is not unusual to let the height of a table be calculated by the browser.

Example

<table width="80%">...</table>

Value

Any length value in pixels or percentage of available space.

Default

Governed by content, but width not to exceed 100% of the next outermost container. All browsers but Mozilla accept percentage values beyond 100%, which may cause the table’s container to display scroll bars and perhaps disturb the graphical integrity of the layout design.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width

hspace, vspace:IE n/a NN n/a Moz all Saf all Op n/a HTML n/a: Optional

 

hspace=" pixels " vspace=" pixels "

Inserts transparent padding outside the edges of the entire table on the page. Use CSS-padding-related attributes instead. Note that Mozilla responds to these table element attributes only in “quirks” mode (see DOCTYPE element).

Example

<table hspace="20" vspace="40">...</table>

Value

Integer pixel count.

Default

0

layout:IE n/a NN n/a Moz all Saf n/a Op n/a HTML n/a: Optional

 

layout=" layoutType "

Controls the table-layout-rendering algorithm. A value of fixed directs the browser to size the table and cells according to explicit height and width settings, rather than respecting content size minimums. This attribute mimics the table-layout CSS property.

Example

<table layout="fixed" width="500">...</table>

Value

Constant values: auto | fixed.

Default

auto

rules:IE 3 NN n/a Moz 1.0.1 Saf n/a Op 7 HTML 4: Optional

 

rules=" rulesConstant "

Defines where (if at all) interior borders between cells are rendered by the browser. In addition to setting the table to draw borders to turn the cells into a matrix, you can also set borders to be drawn only to separate rows, columns, or any sanctioned cell grouping (thead, tbody, tfoot, colgroup, or col). The border attribute must be present—either as a Boolean or set to a specific border size—for any cell borders to be drawn. IE 5/Mac leaves gaps in inter-cell borders where rules are removed. In browsers that support table border colors, the same color is applied to rules.

Example

<table border="3" rules="groups">...</table>

Value

Any one case-insensitive rules constant:

all

Renders borders around each cell

cols

Renders borders between columns only

groups

Renders borders between cell groups as defined by the thead, tfoot, tbody, colgroup, or col elements

none

Hides all interior borders

rows

Renders borders between rows only

Default

none (when border=0); all (when border is any other value).

Object Model Reference

[window.]document.getElementById(elementID).rules

summary:IE 6 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

summary=" text "

A textual description of the table, including, but not limited to, instructions that nonvisual browsers might follow to describe the purpose and organization of the table data. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream provide no other functionality for this attribute.

Example

<table summary="Order form for entry of up to five products.">...</table>

Value

Any quoted string of characters.

Default

None.

vspace

See hspace.

width

See height.

<tbody>:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Optional

 

<tbody>...</tbody>

A tbody element is an arbitrary container of one or more rows of table cells. More than one tbody element may be defined within a single table element. Use the tbody element to define structural segments of a table that may require their own styles or border treatments (see the rules attribute). A tbody element is the row-oriented equivalent of the colgroup element for columns. Other types of row groupings available are the tfoot and thead elements, neither of which overlaps with a tbody element.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am–12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align	bgcolor	ch	char	charoff
choff	valign

Element-Specific Event Handler Attributes

None.

align:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

align=" alignConstant "

Establishes the horizontal alignment characteristics of content within the row(s) covered by the tbody element.

Example

<tbody align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value	IE/Windows	Others	HTML 4
center	·	·	·
char	—	—	·
justify	—	·	·
left	·	·	·
right	·	·	·

The values center, left, and right are self-explanatory. The value justify spaces multiline content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves. In the HTML 4 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column.

It’s important to bear in mind that the align attribute applies to every cell of every row within the tbody. If you want a different alignment for the row header, override the setting with a separate align attribute or text-align style sheet property for the thead or individual th elements.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

bgcolor:IE 4 NN n/a Moz all Saf all Op n/a HTML n/a: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the cells contained by the tbody element.

Example

<tbody bgcolor="tan">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor

char:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

char=" character "

The char attribute defines the text character used as an alignment point for text within a cell contained by the tbody element. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute.

Example

<tbody align="char" char=".">

Value

Any single text character.

Default

None.

charoff:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

charoff=" length "

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell contained by the tbody element. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute.

Example

<tbody align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

valign:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

valign=" alignmentConstant "

Determines the vertical alignment of content within cells of the column(s) covered by the tbody element. You can override the vertical alignment for a particular cell anywhere in the column.

Example

<tbody valign="bottom">

Value

Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell’s contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell’s text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign

<td>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Optional

 

<td>...</td>

The td element is a container for content that is rendered inside one cell of a table element. One cell is the intersection of a column and row. Other elements related to the td element are caption, col, colgroup, table, tbody, tfoot, th, thead, and tr. In addition to providing a wrapper for a cell’s content, the td element defines a number of visible attributes that apply to a single cell, often overriding similar attributes set in lesser-nested elements in the table.

Four attributes—abbr, axis, headers, and scope—are included in the HTML 4 specification in anticipation of nonvisual browsers that will use text-to-speech technology to describe content of an HTML page—a kind of “verbal rendering.” Although these attributes are briefly described here for the sake of completeness, there is much more to their application in nonvisual browsers than is relevant in this book on Dynamic HTML. Consult the HTML 4 recommendation for more details.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am–12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

abbr	align	axis	background	bgcolor
bordercolor	bordercolordark	bordercolorlight	ch	char
charoff	choff	colspan	datafld	dir
headers	height	nowrap	rowspan	scope
valign	width

Element-Specific Event Handler Attributes

Handler	IE	Others	HTML
onafterupdate	4	n/a	n/a
onbeforeupdate	4	n/a	n/a
onrowenter	4	n/a	n/a
onrowexit	4	n/a	n/a

abbr:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

abbr=" text "

Provides an abbreviated string that describes the cell’s content. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream browsers provide no other functionality for this attribute.

Example

<td abbr="Main Event">Keynote Speakers</td>

Value

Any quoted string.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).abbr

align:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" alignConstant "

Establishes the horizontal alignment characteristics of content within the cell covered by the td element.

Example

<td align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value	IE/Windows and NN 4	Others	HTML 4
center	·	·	·
char	—	—	·
justify	—	·	·
left	·	·	·
right	·	·	·

The values center, left, and right are self-explanatory. The value justify spaces multiline content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves. In the HTML 4 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

axis:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

axis=" text "

Provides an abbreviated string that describes the cell’s category. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream browsers provide no other functionality for this attribute.

Example

<td axis="event">Keynote Speakers</td>

Value

Any quoted string.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).axis

background:IE 3 NN 4 Moz all Saf all Op 7 HTML n/a: Optional

 

background=" URL "

Specifies an image file that is used as a backdrop to the cell. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available cell space. Smaller images download faster but are obviously repeated more often in the background. Navigator 4, however, requires a minimum image size of 16 by 16 pixels. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Example

<td background="watermark.jpg">

Value

Any valid URL to an image file, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).background

bgcolor:IE 3 NN 3 Moz all Saf all Op 7 HTML 3.2: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the cell defined by the td element.

Example

<td bgcolor="yellow">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor

bordercolor:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bordercolor=" colorTripletOrName "

The colors used to render some of the pixels that create the illusion of borders around cells and the entire table. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide. A cell’s border color can be different from the table’s border color.

Example

<td bordercolor="green">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColor

bordercolordark, bordercolorlight:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bordercolordark=" colorTripletOrName "bordercolorlight=" colorTripletOrName "

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page’s background or default color (see Figure 1-4 in the table element discussion). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark (left and top edges of the cell) and bordercolorlight (right and bottom edges) attributes.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

Example

<td bordercolordark="darkred" bordercolorlight="salmon">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColorDark
[window.]document.getElementById(elementID).borderColorLight

char:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

char=" character "

The char attribute defines the text character used as an alignment point for text within a cell. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute.

Example

<td align="char" char=".">203.00</td>

Value

Any single text character.

Default

None.

charoff:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

charoff=" length "

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute.

Example

<td align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

colspan:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

colspan=" columnCount "

The number of columns across which the current table cell should extend itself. For each additional column included in the colspan count, one less td element is required for the table row. If you set the align attribute to center or right, the alignment is calculated on the full width of the td element across the specified number of columns. Unless the current cell also specifies a rowspan attribute, the next table row returns to the original column count.

Example

<td colspan="2" align="center">

Value

Any positive integer, usually 2 or larger.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).colSpan

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the content of a table cell. A datasrc (and optionally a datapagesize) attribute must also be set for the enclosing table element. Works only with text file data sources in IE 5/Mac.

Example

<table datasrc="DBSRC3" datapagesize="5">
<tr>
  <td datafld="stockNum"></td>
  <td datafld="qtyOnHand"></td>
</tr>
</table>

Value

Case-sensitive identifier.

Default

None.

headers:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

headers=" cellIDList "

Points to one or more th or td elements that act as column or row headers for the current table cell. The assigned value is a space-delimited list of id attribute values that are assigned to the relevant th elements. A nonvisual browser could speak the cell’s header before the content of the cell to help listeners identify the nature of the cell content. Although some maintstream browsers claim support for this attribute, none have yet connected support for it.

Example

<tr>
<th id="hdr1">Product Number</th>
<th id="hdr2">Description</th>
</tr>
<tr>
<td headers="hdr1">0392</td>
<td headers="hdr2">Round widget</td>
</tr>

Value

A space-delimited list of case-sensitive IDs assigned to cells that act as headers to the current cell.

Default

None.

height, width:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

height=" length " width=" length "

The rectangular dimensions of a cell that may be different from the default size as calculated by the browser. When the values for these attributes are less than the minimum space required to render the table cell content, the browser overrides the attribute settings to make sure that all content appears, even if it means that text lines word-wrap. You can also stretch the dimensions of a table beyond the browser-calculated dimensions. Extra whitespace appears inside table cells to make up the difference. If you specify just one of these attributes, the browser performs all necessary calculations to automatically adjust the dimension along the other axis. The cell must have some content assigned to it, or it may close up to minimum size.

Due to the regular nature of tables, if you set a custom height for one cell in a row taller than the others, the entire row is set to that height; similarly, setting the width of a cell to wider than others in the same column causes the width of all cells in the column to be the same size.

Both the height and width attributes are deprecated in HTML 4 in favor of height and width style sheet properties (which are not available for table cells in Navigator 4).

Example

<td width="80%" height="30">

Value

Any length value in pixels or percentage of available space.

Default

Based on content size.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width

nowrap:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

nowrap

The presence of the nowrap attribute instructs the browser to render the cell as wide as is necessary to display a line of nonbreaking text on one line. Abuse of this attribute can force the user into a great deal of inconvenient horizontal scrolling of the page to view all of the content. The nowrap attribute is deprecated in HTML 4 in favor of the white-space:nowrap CSS property.

Example

<td nowrap>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).noWrap

rowspan:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

rowspan=" rowCount "

The number of rows through which the current table cell should extend itself downward. For each additional row included in the rowspan count, one less td element is required for the next table row in that cell’s position along the row.

Example

<td rowspan="2">

Value

Any positive integer, usually 2 or larger.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).rowSpan

scope:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

scope=" scopeConstant "

Used more with a th element than with a td element, the scope attribute sets the range of cells (relative to the current cell) that behave as though the current cell is the header for those cells. For tables whose structure is quite regular, the scope attribute is a simpler way of achieving what the headers attribute does, without having to define id attributes for the header cells. Although some maintstream browsers claim support for this attribute, none have yet connected support for it.

Example

<tr>
<th scope="col">Product Number</th>
<th scope="col">Description</th>
</tr>
<tr>
<td>0392</td>
<td>Round widget</td>
</tr>

Value

One of four recognized scope constants:

col

Current cell text becomes header text for every cell in the rest of the column.

colgroup

Current cell text becomes header text for every cell in the rest of the colgroup element.

row

Current cell text becomes header text for every cell in the rest of the tr element.

rowgroup

Current cell text becomes header text for every cell in the rest of the tbody element.

Default

None.

valign:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

valign=" alignmentConstant "

Determines the vertical alignment of content within the td element. A value you set for an individual cell overrides the same attribute setting for outer containers, such as tr and tbody.

Example

<td valign="bottom">

Value

Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell’s contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell’s text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign

width

See height.

<textarea>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<textarea>...</textarea>

The textarea element is a multiline text input control primarily used inside form elements (required in Navigator 4 or earlier). Unlike the text type input element, a textarea element can be sized to accept more than one line of text. Word-wrapping is available on current browsers, and users may enter carriage return characters (a combination of characters ASCII decimal 13 and 10) inside the text box. When a textarea element is inside a submitted form, the name/value pair is submitted, with the value being the content of the text box (and the name attribute must be assigned). The CGI program on the server must be able to handle the possibility of carriage returns in the text data.

If you wish to display text in the textarea element when it loads, that text goes between the start and end tags; otherwise, there are no intervening characters in the source code between start and end tags. A label for the textarea element must be placed before or after the element, and may be encased in a label element for structural purposes (optionally in newer browsers).

Example

<textarea rows="5" cols="60" name="notes">Use this area for extra notes.
</textarea>

Object Model Reference

[window.]document.formName.elementName
[window.]document.forms[i].elements[j]
[window.]document.getElementById(elementID)

Element-Specific Attributes

accept	autofocus	cols	datafld	datasrc
disabled	form	inputmode	maxlength	name
readonly	required	rows	wrap

Element-Specific Event Handler Attributes

Handler	IE	NN	Opera	Others	HTML
onafterupdate	4	n/a	n/a	n/a	n/a
onbeforeupdate	4	n/a	n/a	n/a	n/a
onchange	3	2	all	all	4
onformchange	n/a	n/a	9	n/a	n/a
onforminput	n/a	n/a	9	n/a	n/a
oninvalid	n/a	n/a	9	n/a	n/a
onscroll	3	n/a	n/a	n/a	4
onselect	3	2	all	all	4

accept:IE n/a NN n/a Moz all Saf n/a Op n/a HTML n/a: Optional

 

accept=" MIMETypeList "

A Web Forms 2.0 extension, the accept attribute specifies one or more MIME types for allowable content to be entered into the element. If the browser provides alternate input editors for content other than straight text, this attribute prepares the element for the content and encodes it correctly for submission with the form.

Example

<textarea name="newsItem" accept="message/news"></textarea>

Value

MIME type (content type) value. For multiple items, a comma-delimited list is allowed. Web Forms 2.0 allows wildcards for MIME type ranges.

Default

None.

autofocus:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

autofocus="autofocus"

Web Forms 2.0 extension that brings focus to the element after the page loads. Should be assigned to only one form control element per page.

cols:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

cols=" columnCount "

The width of the editable space of the textarea element. The value represents the number of monofont characters that are to be displayed within the width. For a browser that supports style sheet font sizes, the actual width changes accordingly.

Example

<textarea cols="40">...</textarea>

Value

Any positive integer.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.formName.elementName.cols
[window.]document.forms[i].elements[j].cols
[window.]document.getElementById(elementID).cols

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the content of the textarea element. A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

Example

<textarea name="summary" datasrc="DBSRC3" datafld="summary"></textarea>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.elementName.dataFld
[window.]document.forms[i].elements[j].dataFld
[window.]document.getElementById(elementID).dataFld

datasrc:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datasrc=" dataSourceName "

Used with IE data binding to specify the ID of the page’s object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

Example

<textarea name="summary" datasrc="DBSRC3" datafld="summary"></textarea>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.elementName.dataSrc
[window.]document.forms[i].elements[j].dataSrc
[window.]document.getElementById(elementID).dataSrc

disabled:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

disabled

A disabled textarea element can’t be activated by the user. A disabled textarea cannot receive focus and doesn’t become active within the tabbing order rotation. The name/value pair of a disabled element is not sent when the form is submitted.

The disabled attribute is a Boolean type, which means that its presence in the attribute sets its value to true. Its value can also be adjusted after the fact by scripting (see the textarea object in Chapter 2).

Example

<textarea disabled></textarea>

Value

The presence of the attribute disables the element.

Default

false

Object Model Reference

[window.]document.formName.elementName.disabled
[window.]document.forms[i].elements[j].disabled
[window.]document.getElementById(elementID).disabled

form:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

form=" formID [formID] ... "

Web Forms 2.0 extension that lets you associate a single form control element with one or more forms that do not enclose the controls. Because textarea elements in Web Forms 2.0 are not confined to be descendants of form elements, the textarea elements may be located away from the form element. The form attribute connects the textarea element with one or more form elements on the page.

Example

<textarea name="notes" form="orderForm"></textarea>

Value

ID of one or more form elements on the page. Multiple references are space-delimited.

Default

None.

inputmode:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

inputmode=" ScriptToken [ModifierToken] "

Web Forms 2.0 extension (adopted whole from the W3C XForms 1.0 specification at http://www.w3.org/TR/xforms/sliceE.html) that directs the browser to display the appropriate text input user interface for a written language. Consult the W3C XForms 1.0 documents for details.

Example

<textarea name="notes_jp" inputmode="hiragana"></textarea>

Value

Written language script token with an optional modifier token (space-delimited). Tokens generally correspond to Unicode scripts (http://www.unicode.org/unicode/reports/tr24/).

Default

None.

name:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

name=" elementIdentifier "

If the textarea element is part of a form being submitted to a server, the name attribute is required if the value of the element is to be submitted with the form. Newer DOMs encourage assigning the same identifier to the id attribute for uniform script references to the element object.

Example

<textarea name="comments" id="comments"></textarea>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.elementName.name
[window.]document.forms[i].elements[j].name
[window.]document.getElementById(elementID).name

readonly:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

readonly

When the readonly attribute is present, the textarea element cannot be edited on the page by the user (although scripts can modify the content). A textarea marked as readonly receives focus within the tabbing order. Users can still select and copy text from a read-only textarea.

Example

<textarea name="instructions" readonly></textarea>

Value

The presence of the attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.elementName.readOnly
[window.]document.forms[i].elements[j].readOnly
[window.]document.getElementById(elementID).readOnly

required:IE n/a NN n/a Moz n/a Saf n/a Op 9 HTML n/a: Optional

 

required="required"

Web Forms 2.0 extension that signifies whether the textarea element’s value is required for submission. Sets the missingValue property of the ValidityState object to true if the element receives no value.

rows:IE all NN all Moz all Saf all Op 7 HTML all: Optional

 

rows=" rowCount "

The height of the textarea element based on the number of lines of text that are to be displayed without scrolling. The value represents the number of monospace-font character lines that are to be displayed within the height before the scrollbar becomes active. For a browser that supports style sheet font sizes, the actual width changes accordingly.

Example

<textarea rows="5" cols="40"></textarea>

Value

Any positive integer.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.formName.elementName.rows
[window.]document.forms[i].elements[j].rows
[window.]document.getElementById(elementID).rows

wrap:IE 4 NN 2 Moz all Saf all Op 7 HTML n/a: Optional

 

wrap=" wrapType "

The wrap attribute tells the browser whether it should wrap text in a textarea element and whether wrapped text should be submitted to the server with soft returns converted to hard carriage returns. The HTML specification is silent on the subject, while major browsers have, over the years, clouded the attribute values. But more recently, the mainstream browsers are coming together on a set of three attribute values: off, soft, and hard.

When set to soft, the text automatically wraps as the user types, but the carriage returns and line feeds (CRLFs) do not go with the text when the form is submitted. With a setting of hard, wrapping occurs, and the CRLFs introduced by wrapping become part of the textarea’s value submitted to the server (but not for Safari). Old synonyms for the soft value include virtual and physical. A setting of off means that typing beyond the right edge of the rectangle forces the textarea to scroll horizontally. Only a press of the Return key causes the text insertion pointer to advance to the next line.

Example

<textarea name="comments" wrap="hard"></textarea>

Value

Constant values: hard | off | soft.

Default

soft

Object Model Reference

[window.]document.formName.elementName.wrap
[window.]document.forms[i].elements[j].wrap
[window.]document.getElementById(elementID).wrap

<tfoot>:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Optional

 

<tfoot>...</tfoot>

A tfoot element is a special-purpose container of one or more rows of table cells rendered at the bottom of the table. Typically, the tfoot element mirrors the thead element content for users who have scrolled down the page (or for future browsers that scroll inner table content). No more than one tfoot element may be defined within a single table element, and the tfoot element should be located in the source code before any tbody elements defined for the table. A tfoot element is a row grouping, like the tbody and thead elements. Navigator 4 ignores the tfoot tag and therefore renders the nested tr element(s) as regular tr elements in source code order.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am–12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align	bgcolor	ch	char	charoff
choff	valign

Element-Specific Event Handler Attributes

None.

align:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

align=" alignConstant "

Establishes the horizontal alignment characteristics of content within the row(s) covered by the tfoot element.

Example

<tfoot align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value	IE/Windows	Others	HTML 4
center	·	·	·
char	—	—	·
justify	—	·	·
left	·	·	·
right	·	·	·

The values center, left, and right are self-explanatory. The value justify spaces multiline content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves. In the HTML 4 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column.

It’s important to bear in mind that the align attribute applies to every cell of every row within the tfoot, including any th element you specify for the table. If you want a different alignment for the row header, override the setting with a separate align attribute or text-align style sheet property for the individual th elements.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

bgcolor:IE 4 NN n/a Moz all Saf all Op 7 HTML n/a: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the cells contained by the tfoot element.

Example

<tfoot bgcolor="tan">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor

char:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

char=" character "

The char attribute defines the text character used as an alignment point for text within a cell contained by the tfoot element. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute.

Example

<tfoot align="char" char=".">

Value

Any single text character.

Default

None.

charoff:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

charoff=" length "

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell contained by the tfoot element. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute.

Example

<tfoot align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

valign:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

valign=" alignmentConstant "

Determines the vertical alignment of content within cells of the column(s) covered by the tfoot element. You can override the vertical alignment for a particular cell anywhere in the column.

Example

<tfoot valign="bottom">

Value

Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell’s contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell’s text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign

<th>:IE all NN all Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Optional

 

<th>...</th>

The th element is a container for content that is rendered inside one cell of a table element in a format that distinguishes it as a header. Most browsers render the content as boldface. A cell is the intersection of a column and row. Other elements related to the th element are caption, col, colgroup, table, tbody, td, tfoot, thead, and tr. In addition to providing a wrapper for a cell’s content, the th element defines a number of visible attributes that apply to a single cell, often overriding similar attributes set in lesser-nested elements in the table.

Four attributes—abbr, axis, headers, and scope—are included in the HTML 4 specification in anticipation of nonvisual browsers that will use text-to-speech technology to describe content of an HTML page—a kind of “verbal rendering.” Although these attributes are briefly described here for the sake of completeness, there is much more to their application in nonvisual browsers than is relevant in this book on Dynamic HTML. Consult the HTML 4 recommendation for more details.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am–12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

abbr	align	axis	background	bgcolor
bordercolor	bordercolordark	bordercolorlight	ch	char
charoff	choff	colspan	datafld	headers
height	nowrap	rowspan	scope	valign
width

Element-Specific Event Handler Attributes

Handler	IE	Others	HTML
onafterupdate	4	n/a	n/a
onbeforeupdate	4	n/a	n/a
onrowenter	4	n/a	n/a
onrowexit	4	n/a	n/a

abbr:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

abbr=" text "

Provides an abbreviated string that describes the cell’s content. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream browsers provide no other functionality for this attribute.

Example

<th abbr="What">Event</th>

Value

Any quoted string.

Default

None.

align:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

align=" alignConstant "

Establishes the horizontal alignment characteristics of content within the cell covered by the th element.

Example

<th align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value	IE/Windows and NN 4	Others	HTML 4
center	·	·	·
char	—	—	·
justify	—	·	·
left	·	·	·
right	·	·	·

The values center, left, and right are self-explanatory. The value justify spaces multi-line content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves. In the HTML 4 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

axis:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

axis=" text "

Provides an abbreviated string that describes the cell’s category. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Mozilla’s context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Current mainstream browsers provide no other functionality for this attribute.

Example

<th axis="event">Events</th>

Value

Any quoted string.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).axis

background:IE 3 NN 4 Moz all Saf all Op 7 HTML n/a: Optional

 

background=" URL "

Specifies an image file that is used as a backdrop to the cell. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available cell space. Smaller images download faster but are obviously repeated more often in the background. Navigator 4, however, requires a minimum image size of 16 by 16 pixels. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Example

<th background="watermark.jpg">

Value

Any valid URL to an image file, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).background

bgcolor:IE 3 NN 3 Moz all Saf all Op 7 HTML 3.2: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the cell defined by the th element.

Example

<th bgcolor="yellow">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor

bordercolor:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bordercolor=" colorTripletOrName "

The colors used to render some of the pixels that create the illusion of borders around cells and the entire table. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.

Example

<th bordercolor="green">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColor

bordercolordark, bordercolorlight:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bordercolordark=" colorTripletOrName "bordercolorlight=" colorTripletOrName "

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page’s background or default color (see Figure 1-4 Figure 1-4 in the table element discussion). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark (left and top edges of the cell) and bordercolorlight (right and bottom edges) attributes.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

Example

<th bordercolordark="darkred" bordercolorlight="salmon">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColorDark
[window.]document.getElementById(elementID).borderColorLight

char:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

char=" character "

The char attribute defines the text character used as an alignment point for text within a cell. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute.

Example

<th align="char" char=".">$325.10</th>

Value

Any single text character.

Default

None.

charoff:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a çn/a: Optional

 

charoff=" length "

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute.

Example

<th align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

colspan:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

colspan=" columnCount "

The colspan attribute specifies the number of columns across which the current table cell should extend itself. For each additional column included in the colspan count, one less th or td element is required for the table row. If you set the align attribute to center or right, the alignment is calculated on the full width of the th element across the specified number of columns. Unless the current cell is also specifies a rowspan attribute, the next table row returns to the original column count.

Example

<th colspan="2" align="right">

Value

Any positive integer, usually 2 or larger.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).colSpan

datafld:IE 4 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

datafld=" columnName "

Used with IE data binding to associate a remote data source column name with the content of a table header cell. A datasrc (and optionally, a datapagesize) attribute must also be set for the enclosing table element. Works only with text file data sources in IE 5/Mac.

Example

<table datasrc="DBSRC3" datapagesize="5">
<tr>
  <th datafld="stockNum"></th>
  <th datafld="qtyOnHand"></th>
</tr>
</table>

Value

Case-sensitive identifier.

Default

None.

headers:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

headers=" cellIDList "

Points to one or more th or td elements that act as column or row headers for the current table cell. The assigned value is a space-delimited list of id attribute values that are assigned to the relevant th elements. A nonvisual browser could speak the cell’s header before the content of the cell to help listeners identify the nature of the cell content. Although aome mainstream browsers claim support for this attribute, none have yet connected support for it.

Example

<tr>
<th id="hdr1">Product Number</th>
<th id="hdr2">Description</th>
</tr>
<tr>
<th headers="hdr1">0392</th>
<th headers="hdr2">Round widget</th>
</tr>

Value

A space-delimited list of case-sensitive IDs assigned to cells that act as headers to the current cell.

Default

None.

height, width:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

height=" length " width=" length "

The rectangular dimensions of a cell that may be different from the default size as calculated by the browser. When the values for these attributes are less than the minimum space required to render the table cell content, the browser overrides the attribute settings to make sure that all content appears, even if it means that text lines word-wrap. You can also stretch the dimensions of a table beyond the browser-calculated dimensions. Extra whitespace appears inside table cells to make up the difference. If you specify just one of these attributes, the browser performs all necessary calculations to automatically adjust the dimension along the other axis.

Due to the regular nature of tables, if you set a custom height for one cell in a row taller than the others, the entire row is set to that height; similarly, setting the width of a cell to wider than others in the same column causes the width of all cells in the column to be the same size.

Both the height and width attributes are deprecated in HTML 4 in favor of height and width style sheet properties (which are not available for table cells in Navigator 4).

Example

<th width="80%" height="30">

Value

Any length value in pixels or percentage of available space.

Default

Based on content size.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width

nowrap:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

nowrap

The presence of the nowrap attribute instructs the browser to render the cell as wide as is necessary to display a line of nonbreaking text on one line. Abuse of this attribute can force the user into a great deal of inconvenient horizontal scrolling of the page to view all of the content. The nowrap attribute is deprecated in HTML 4. The nowrap attribute is deprecated in HTML 4 in favor of the white-space:nowrap CSS property and value.

Example

<th nowrap>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).noWrap

rowspan:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

rowspan=" rowCount "

The number of rows through which the current table cell should extend itself downward. For each additional row included in the rowspan count, one less th or td element is required for the next table row in that cell’s position along the row.

Example

<th rowspan="2">

Value

Any positive integer, usually 2 or larger.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).rowSpan

scope:IE 6 NN n/a Moz all Saf all Op n/a HTML 4: Optional

 

scope=" scopeConstant "

The range of cells (relative to the current cell) that behave as though the current cell is the header for those cells. For tables whose structure is quite regular, the scope attribute is a simpler way of achieving what the headers attribute does, without having to define id attributes for the header cells. Although some mainstream browsers claim support for this attribute, none have yet connected support for it.

Example

<tr>
<th scope="col">Product Number</th>
<th scope="col">Description</th>
</tr>
<tr>
<td>0392</td>
<td>Round widget</td>
</tr>

Value

One of four recognized scope constants:

col

Current cell text becomes header text for every cell in the rest of the column.

colgroup

Current cell text becomes header text for every cell in the rest of the colgroup element.

row

Current cell text becomes header text for every cell in the rest of the tr element.

rowgroup

Current cell text becomes header text for every cell in the rest of the tbody element.

Default

None.

valign:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

valign=" alignmentConstant "

Determines the vertical alignment of content within the td element. A value you set for an individual cell overrides the same attribute setting for outer containers, such as tr and tbody.

Example

<th valign="bottom">

Value

Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell’s contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell’s text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign

width

See height.

<thead>:IE 3 NN n/a Moz all Saf all Op 7 HTML 4: HTML End Tag: Optional

 

<thead>...</thead>

A thead element is a special-purpose container of one or more rows of table cells rendered at the top of the table. No more than one thead element may be defined within a single table element, and the thead element should be located in the source code immediately after the table element’s start tag. You are free to use any combination of td and th elements you like within the thead element. A thead element is a row grouping, like the tbody and tfoot elements. Navigator 4 ignores the thead tag and therefore renders the nested tr element(s) as regular tr elements in source code order.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am–12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align	bgcolor	ch	char	charoff
choff	valign

Element-Specific Event Handler Attributes

None.

align:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

align=" alignConstant "

Establishes the horizontal alignment characteristics of content within the row(s) covered by the thead element.

Example

<thead align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value	IE/Windows	Others	HTML 4
center	·	·	·
char	—	—	·
justify	—	·	·
left	·	·	·
right	·	·	·

The values center, left, and right are self-explanatory. The value justify spaces multiline content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves. In the HTML 4 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column.

It is important to bear in mind that the align attribute applies to every cell of every row within the thead, including any th element you specify for the table. If you want a different alignment for the row header, override the setting with a separate align attribute or text-align style sheet property for the individual th elements.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align

bgcolor:IE 4 NN n/a Moz all Saf all Op n/a HTML n/a: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the cells contained by the thead element.

Example

<thead bgcolor="tan">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor

char:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

char=" character "

The char attribute defines the text character used as an alignment point for text within a cell contained by the thead element. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute.

Example

<thead align="char" char=".">

Value

Any single text character.

Default

None.

charoff:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

charoff=" length "

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell contained by the thead element. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute.

Example

<thead align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

valign:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

valign=" alignmentConstant "

Determines the vertical alignment of content within cells of the column(s) covered by the thead element. You can override the vertical alignment for a particular cell anywhere in the column.

Example

<thead valign="bottom">

Value

Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell’s contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell’s text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign

<title>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<title>...</title>

The title element identifies the overall content of a document. The element content is not displayed as part of the document, but browsers display the title in the browser application’s window titlebar. Only one title element is permitted per document and it must be located inside the head element. It is all right to be somewhat verbose in assigning a document title because not everyone will access the document in sequence through your web site. Give the document some context as well.

Example

<title>Declaration of Independence</title>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<tr>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Optional

 

<tr>...</tr>

A tr element is a container for one row of cells. Each cell within a row may be a th or td element. Every row requires at least a start tag to instruct the browser to begin rendering succeeding cell elements on the next line of the table. Other special-purpose row groupings available are the tfoot and thead, as well as the more generic tbody grouping element.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am–12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align	background	bgcolor	bordercolor	bordercolordark
bordercolorlight	ch	char	charoff	choff
height	valign	width

Element-Specific Event Handler Attributes

None.

align:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

align=" alignConstant "

Establishes the horizontal alignment characteristics of content within the row.

Example

<tr align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value	IE/Windows	Others	HTML 4
center	·	·	·
char	—	—	·
justify	—	·	·
left	·	·	·
right	·	·	·

The values center, left, and right are self-explanatory. The value justify spaces multiline content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves. In the HTML 4 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column.

It is important to bear in mind that the align attribute applies to every cell within the tr element, including any th element you specify for the table. If you want a different alignment for the row header, override the setting with a separate align attribute or text-align style sheet property for the tr or individual th elements.

Default

center

Object Model Reference

[window.]document.getElementById(elementID).align

background:IE n/a NN 4 Moz all Saf all Op 7 HTML n/a: Optional

 

background=" URL "

Specifies an image file that is used as a backdrop to the entire row of cells. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available cell space. Smaller images download faster but are obviously repeated more often in the background. Navigator 4, however, requires a minimum image size of 16 by 16 pixels. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Example

<tr background="watermark.jpg">

Value

Any valid URL to an image file, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).background

bgcolor:IE 4 NN 3 Moz all Saf all Op 7 HTML 4: Optional

 

bgcolor=" colorTripletOrName "

Establishes a fill color (behind the text and other content) for the cells contained by the tr element.

Example

<tr bgcolor="lavender">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor

bordercolor:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bordercolor=" colorTripletOrName "

The color used to render some of the pixels that create the illusion of borders around cells and the entire table. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.

Example

<tr bordercolor="green">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColor

bordercolordark, bordercolorlight:IE 3 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

bordercolordark=" colorTripletOrName "bordercolorlight=" colorTripletOrName "

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page’s background or default color (see Figure 1-4 in the table element discussion). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark (left and top edges of the cell) and bordercolorlight (right and bottom edges) attributes.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

Example

<tr bordercolordark="darkred" bordercolorlight="salmon">

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColorDark
[window.]document.getElementById(elementID).borderColorLight

char:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML 4: Optional

 

char=" character "

The char attribute defines the text character used as an alignment point for text within a cell contained by the tr element. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute.

Example

<tr align="char" char=".">

Value

Any single text character.

Default

None.

charoff:IE n/a NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

charoff=" length "

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell contained by the tr element. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute.

Example

<tr align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

valign:IE 4 NN n/a Moz all Saf all Op 7 HTML 4: Optional

 

valign=" alignmentConstant "

Determines the vertical alignment of content within cells of the column(s) covered by the tr element. You can override the vertical alignment for a particular cell anywhere in the row.

Example

<tr valign="bottom">

Value

Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell’s contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell’s text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign

<tt>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<tt>...</tt>

The tt element renders its content as monospaced text (indicating a teletype output). The element is intended to be strictly a formatting—as opposed to a contextual—element. If you are looking for a contextual setting for computer program code or input, see the code, kbd, and samp elements. As with most font-related elements, the use of style sheets is preferred.

Example

<p>The computer said, <tt>"That does not compute."</tt></p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<u>:IE 3 NN 3 Moz all Saf all Op 7 HTML 3.2: HTML End Tag: Required

 

<u>...</u>

The u element renders its content as underlined text. This element is deprecated in HTML 4 in favor of the text-decoration:underline style sheet property. The element does not validate in strict HTML 4 or XHTML DTDs, and may confuse users who regard any underlined text as a clickable link, regardless of color.

Example

<p>You may already be a <u>winner</u>!</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<ul>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<ul>...</ul>

The ul element is a container for an unordered list of items. An “unordered list” means that the items are rendered with a leading symbol (depending on the type attribute setting or list-style-type style sheet property setting) that implies no specific order of items other than by virtue of location within the list. Content for each list item is defined by a nested li element. If you apply a style sheet rule to a ul element, the style is inherited by the nested li elements (except for occasional odd behavior in Navigator 4 only).

Example

<ul>
    <li>Africa</li>
    <li>Antarctica</li>
    <li>Asia</li>
    <li>Australia</li>
    <li>Europe</li>
    <li>North America</li>
    <li>South America</li>
</ul>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

compact

type

Element-Specific Event Handler Attributes

None.

compact:IE 4 NN n/a Moz all Saf all Op n/a HTML 3.2: Optional

 

compact

A Boolean attribute originally designed to let browsers render the list in a more compact style than normal (smaller line spacing between items). Although listed as a supported attribute for HTML compatibility, the compact attribute has no effect on mainstream browsers. Use style sheets to control element sizes and line spacing.

Example

<ul compact>...</ul>

Value

The presence of this attribute makes its value true.

Default

false

type:IE all NN all Moz all Saf all Op 7 HTML 3.2: Optional

 

type=" labelType "

The type attribute provides some flexibility in how the leading symbol or sequence number is displayed in the browser. You can specify whether the leading symbol should be a disc, circle, or square. A disc is a filled circle (also known as a bullet). The square type is rendered as an outline in early Macintosh browsers, and as a filled square in Windows and modern browsers of all OS types. The type attribute is deprecated in HTML 4 in favor of the list-style-type style sheet property.

Example

<ul type="disc">...</ul>

Value

Possible values are circle | disc | square.

Default

disc

Object Model Reference

[window.]document.getElementById(elementID).type

<var>:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Required

 

<var>...</var>

The var element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A var element is one that is used predominantly to display one or more inline characters representing a computer program variable name.

Browsers have free rein to determine how (or whether) to distinguish var element content from the rest of the body element. Current mainstream browsers elect to render var element content in an italic font. Override the default with a style sheet as you see fit.

Example

<p>The value of <var>offsetWidth</var> becomes 20.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<wbr>:IE all NN all Moz n/a Saf n/a Op n/a HTML n/a: HTML End Tag: Forbidden

 

<wbr>

If you use the nobr element to define content that should have no word-wrapping or line breaks, you can use the wbr element to advise the browser that it can break up the content if the width of the browser window requires it. The locations of these provisional breaks are marked in the source code with the wbr element. In a sense, the nobr and wbr elements give the author control over word-wrapping of running content. Neither element is included in the HTML specification, and the wbr element continues forward only in Internet Explorer.

Example

<nobr>This is a long line of text that could run on and on, <wbr>forcing
the browser to display the horizontal scrollbar after awhile.</nobr>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<xml>:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: HTML End Tag: Required

 

<xml>...</xml>

IE 5 and later for Windows supports XML data islands, which are self-contained, unrendered blocks of XML data within an HTML page. The XML data may be delivered as part of the HTML document (embedded between the start and end tags) or loaded from an external source. Once the XML data is loaded, Microsoft’s XML DOM (which in many ways resembles the Core portion of the W3C DOM) allows script access to the data for custom rendering. It is more common these days to use the XMLHttpRequest object and JavaScript to blend XML data into an HTML page. See Online Section VII.

Example

<xml id="xmlData">
  <xmlresults>
     <!-- xml data here -->
  </xmlresults>
</xml>

Object Model Reference

[window.]document.getElementById(elementID)

Attributes

src

Event Handler Attributes

None.

src:IE 5 NN n/a Moz n/a Saf n/a Op n/a HTML n/a: Optional

 

src=" URI "

Points to an external source of XML data to be loaded into the element.

Example

<xml id="xmldata" src="http://www.magacorp.com/data/2003Forecast.xml></xml>

Value

Any valid URI whose return value contains XML data.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).src

<xmp>:IE all NN all Moz all Saf all Op 7 HTML <4: HTML End Tag: Required

 

<xmp>...</xmp>

The xmp element displays its content in a monospace font as a block element, as in computer code listings rendered 80 columns wide. In most browsers, the font size is also reduced from the default size. Browsers observe carriage returns and other whitespace in element content. This element has long been deprecated in HTML and has even been removed from the HTML 4 specification. You are encouraged to use the pre element instead. Note that in the example below, only Opera converts the entities into characters.

Example

<xmp>
&lt;script language="JavaScript"&gt;
   document.write("Hello, world.");
&lt;/script&gt;
</xmp>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<!--comment-->:IE all NN all Moz all Saf all Op 7 HTML all: HTML End Tag: Forbidden

 

<!-- comment -->

A comment element allows the author to insert content that the browser does not render, but is visible to anyone viewing the source code. Although the HTML standard states that a space between the — characters and right angle bracket is permissible, most browsers require that there be no space within the sequence.

Microsoft uses the non-rendering behavior of HTML comments in other browsers to implement a system of directives called conditional comments. First introduced with IE 5 for Windows, conditional comments offer an additional way of specifying HTML content that is to render only in specific IE versions from 5 onward or render only in browsers other than IE 5 or specific later versions. Controlling the rendering are expressions inside the comment tag, such as whether the current browser is IE 6 or later.

There are two types of conditional comments: downlevel-hidden and downlevel-revealed. The former allows you to supply HTML code that is rendered only in designated versions of IE 5 or later; the latter lets you supply HTML that is render only in browsers other than designated IE 5 or later versions. Each type has a slightly different syntax.

A downlevel-hidden conditional comment has the following syntax:

<!--[ifexpression]> HTMLContent <![endif]-->

IE 5 and later for Windows understand that the square brackets with if and endif directives are explicitly for conditional comments, and will render the HTMLContent portion if the expression evaluates to true. Other browsers treat the entire comment as a plain HTML comment, and won’t render anything.

A downlevel-revealed conditional comment has the following syntax:

<![ifexpression]> HTMLContent <![endif]>

Note that there are no hyphens in this form. Browsers other than IE 5 or later will always render the HTMLContent portion. If you also want, say, IE 5 and 5.5 to render the content, but not IE 6 or later, you create an expression that tells IE to render the HTMLContent portion also for those IE browsers whose versions are less than 6, as in the following:

<![if lt IE 6]
<script type="text/javascript" language="JavaScript">
    // statements for non-IE and pre-IE6 here
</script>
<![endif]>

An expression consists of a feature (IE is the only one supported to date), a comparison operator (omitting the operator means “equals”), and a version number (5 or later). Accepted comparison operators are lt (less than), gt (greater than), lte (less than or equal to), and gte (greater than or equal to). You can also negate the expression with a ! symbol in front of the feature (e.g., <![if !IE 7]>, meaning if IE is not version 7).

For more details on precise version vectors and other tips, visit http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp.

Example

<!-- layout inspired by www.example.com/catalog.html -->

Object Model Reference

Via adjacent node references or walking the document tree by node type.

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

---

^[*] Apple has implemented two additional input element types (search and range) which are intended for use in Dashboard widgets. The search type displays a Mac OS X search field, while the range type displays a slider control. Although these elements render in Safari 2, their details are not documented here. Instead, consult the Safari HTML Reference at http://developer.apple.com/documentation/AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf.