O'Reilly logo

Dynamic HTML: The Definitive Reference, 3rd Edition by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:jb@example.com">jb@example.com</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:orders@example.com">
...
</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.

A three-row, two-column frameset
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.

A nested frameset
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.

Heading levels in Internet Explorer 7 and Firefox 1.5
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