home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Dynamic HTML: The Definitive Reference, 2rd Ed.Dynamic HTML: The Definitive ReferenceSearch this book
PreviousNext

8.3. Alphabetical Tag Reference

<a> NN all IE all HTML all

<a>...</a> HTML End Tag: Required
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.megacorp.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.megacorp.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.

charsetNN 6 IE n/a HTML 4

charset="characterSet"Optional
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.

coordsNN n/a IE 6 HTML 4

coords="coord1, ... coordN"Optional
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.

datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
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 
datasrcNN n/a IE 4 HTML n/a

datasrc="dataSourceName"Optional
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 
hrefNN all IE all HTML all

href="URI"Required for links
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 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

In both browsers, other link object properties allow for the extraction of components of the URL, such as protocol and hostname. See the a element in Chapter 9.

hreflangNN 6 IE 6 HTML 4

hreflang="languageCode"Optional
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.

methodsNN n/a IE 4 HTML n/a

methods="http-method"Optional
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.megacorp.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 
nameNN all IE all HTML all

name="elementIdentifier"Required for anchors
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
relNN 6 IE 3 HTML 4

rel="linkTypes"Optional
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 
revNN 6 IE 3 HTML 4

rev="linkTypes"Optional
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 
shapeNN n/a IE n/a HTML 4

shape="shape"Optional
Defines the shape of a server-side image map area whose coordinates are specified with the coords attribute. See the area element.
targetNN all IE all HTML all

target="windowOrFrameName"Optional
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 or a javascript: pseudo-URL 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. 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.links[i].target
[window.]document.getElementById(elementID).target
typeNN 6 IE 6 HTML 4

type="MIMEType"Optional
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.

urnNN n/a IE 4 HTML n/a

urn="urn"Optional
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>NN 6 IE n/a HTML 4

<abbr>...</abbr>HTML End Tag: Required
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.

Netscape 6 renders the abbr element with a dotted underline, and turns the cursor into a help icon. 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.

A related element, acronym, offers the same services for words that are acronyms (although Netscape 6 offers no special rendering). 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>NN 6 IE 4 HTML 4

<acronym>...</acronym>HTML End Tag: Required
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.

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>NN all IE all HTML all

<address>...</address>HTML End Tag: Required
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. Navigator and Internet Explorer display address elements in an italic font. But the increased focus on separating content from form 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@megacorp.com">jb@megacorp.com</a>
</p>
</address>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<applet>NN 2 IE 3 HTML 3.2

<applet>...</applet>HTML End Tag: Required
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 (not implemented in Netscape 6).

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 still spotty. 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

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbeforeupdate

n/a

4

n/a

ondataavailable

n/a

4

n/a

ondatasetchanged

n/a

4

n/a

ondatasetcomplete

n/a

4

n/a

onerrorupdate

n/a

4

n/a

onrowenter

n/a

4

n/a

onrowexit

n/a

4

n/a

alignNN 2 IE 3 HTML 3.2

align="alignmentConstant"Optional
The align attribute determines how the rectangle of the applet aligns within the context of surrounding content. See the
Section 8.1.5, earlier in this chapter for description of the possibilities defined in both Navigator and Internet Explorer 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
altNN 3 IE 3 HTML 3.2

alt="textMessage"Optional
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.

archiveNN 3 IE 6 HTML 4

archive="archiveFileURL"Optional
The precise meaning of the archive attribute varies between the generic HTML 4 recommendation and Netscape's specific implementation. The basic idea behind Netscape's archive attribute is that an author can package multiple 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.

In addition to specifying the archive attribute, be sure to include a code attribute that names the main class to load. Navigator first looks for the presence of that class file in the archive. If the file is missing from the archive, Navigator loads the code class file separately. (That class may then load additional supporting class files individually.) Navigator requires that the archive file have a .zip filename extension. 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. IE 6 supports the existence of the attribute for compatibility only, but it is not operable.

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
codeNN 2 IE 3 HTML 3.2

code="fileName.class"Required
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
codebaseNN 2 IE 3 HTML 3.2

codebase="path"Optional
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, widthNN 2 IE 3 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, vspaceNN 2 IE 3 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 style attributes 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
idNN n/a IE 4 HTML 4

id="elementIdentifier"Optional
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
Chapter 3.

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
mayscriptNN 3 IE 4 HTML n/a

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

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.

nameNN 2 IE 3 HTML 3.2

name="elementIdentifier"Optional
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, 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
objectNN 6 IE n/a HTML 4

object="filename"Optional
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
srcNN n/a IE 4 HTML n/a

src="URL"Optional
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>NN all IE all HTML 3.2

<area>HTML End Tag: Forbidden
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 destination or javascript: pseudo-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.

altNN 6 IE 3 HTML 3.2

alt="textMessage"Required
Nongraphical browsers can use the alt attribute setting to display a brief description of the meaning of the (invisible) image's hotspots. At one time, it was thought that the alt message might be displayed in the browser's status bar by default when the area had focus or the cursor rolled over the area. That function is now typically performed by onmouseover event handlers and scripts. 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 
coordsNN all IE all HTML 3.2

coords="coord1, ... coordN"Optional
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 
hrefNN all IE all HTML 3.2

href="URI"Required
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 IE 3 and Navigator (up to Version 4) 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 9.

nohrefNN all IE all HTML 3.2

nohrefOptional
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 and later and Netscape 6, 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 
shapeNN all IE all HTML 3.2

shape="shapeName"Optional
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

NN

IE

HTML

circ

-

circle

poly

polygon

-

rect

rectangle

-

-

Default

rect

Object Model Reference

[window.]document.getElementById(elementID).shape 
targetNN all IE all HTML 3.2

target="windowOrFrameName"Optional
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 9 for supported browser versions) or a javascript: pseudo-URL 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. 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.links[i].target
[window.]document.getElementById(elementID).target
<b>NN all IE all HTML all

<b>...</b>HTML End Tag: Required
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) 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 attribute 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 would not be surprising to see it lose favor to style sheets in the future.

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>NN all IE all HTML all

<base>HTML End Tag: Forbidden
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.megacorp.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.megacorp.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.megacorp.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. Of course, this is only for true web pages, rather than HTML-enhanced documents such as email messages, which have no default 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.megacorp.com/index.html" target="_top">
</head>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

href

target

Element-Specific Event Handler Attributes

None.

hrefNN all IE all HTML all

href="URL"Optional
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.megacorp.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
targetNN all IE all HTML 4

target="windowOrFrameName"Optional
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. 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.getElementsByTagName("base")[0].target
[window.]document.getElementById(elementID).target
<basefont>NN all IE all HTML 3.2

<basefont>HTML End Tag: Forbidden
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.

colorNN 6 IE 3 HTML 4

color="colorTripletOrName"Optional
Sets the font color of all text below the basefont element. Deprecated in HTML 4 in favor of the color CSS attribute.

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
faceNN 6 IE 4 HTML 4

face="fontFaceName1[, ... fontFaceNameN]"Optional
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 attribute), 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 attribute.

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
nameNN n/a IE |3| HTML n/a

name="fontFaceName"Optional
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.

sizeNN 6 IE all HTML 3.2

size="integerOrRelativeSize"Optional
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>NN 6 IE 5 HTML 4

<bdo>...</bdo>HTML End Tag: Required
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. Because this element is not yet implemented in browsers, it is detailed here for informational purposes only.

Example

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

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<bgsound>NN n/a IE 3 HTML n/a

<bgsound>HTML End Tag: Optional
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.

balanceNN n/a IE 4 HTML n/a

balance="signedInteger"Optional
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
loopNN n/a IE 3 HTML n/a

loop="integer"Optional
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
srcNN n/a IE 3 HTML n/a

src="URL"Optional
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
volumeNN n/a IE 4 HTML n/a

volume="signedInteger"Optional
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>NN all IE all HTML 3.2

<big>...</big>HTML End Tag: Required
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>NN <6 IE n/a HTML n/a

<blink>...</blink>HTML End Tag: Required
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. This element does not have any attributes or event handlers, and it did not survive the migration to Version 6.

Example

<blink>I dare you to read this...and not look at it.</blink>
<blockquote>NN all IE all HTML all

<blockquote>...</blockquote>HTML End Tag: Required
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.

citeNN 6 IE 6 HTML 4

cite="URL"Optional
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 Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 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>NN all IE all HTML all

<body>...</body>HTML End Tag: Optional
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

NN

IE

HTML

onafterprint

n/a

5

n/a

onbeforeprint

n/a

5

n/a

onload

2

3

4

onresize

4

4

n/a

onscroll

n/a

4

n/a

onselect

n/a

4

n/a

onunload

2

3

4

alinkNN all IE all HTML 3.2

alink="colorTripletOrName"Optional
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 11.

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
backgroundNN all IE all HTML 3.2

background="URL"Optional
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 style attribute.

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
bgcolorNN all IE all HTML 3.2

bgcolor="colorTripletOrName"Optional
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 style attribute.

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
bgpropertiesNN n/a IE 3 HTML n/a

bgproperties="property"Optional
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
bottommarginNN n/a IE 4 HTML n/a

bottommargin="integer"Optional
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 attribute 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
leftmarginNN 6 IE 3 HTML n/a

leftmargin="integer"Optional
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 attribute 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 (IE/Macintosh).

Object Model Reference

[window.]document.body.leftMargin
linkNN all IE all HTML 3.2

link="colorTripletOrName"Optional
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 11).

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, marginwidthNN 4 IE n/a HTML n/a

marginheight="integer"marginwidth="integer"Optional
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

nowrapNN n/a IE 4 HTML n/a

nowrapOptional
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
rightmarginNN n/a IE 4 HTML n/a

rightmargin="integer"Optional
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 attribute 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
scrollNN n/a IE 4 HTML n/a

scroll="featureSwitch"Optional
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 attribute (plus IE-specific overflowX and overflowY attributes).

Example

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

Value

Constant values yes or no (case-insensitive).

Default

yes

Object Model Reference

[window.]document.body.scroll
textNN all IE all HTML 3.2

text="colorTripletOrName"Optional
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 attribute.

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
topmarginNN 6 IE 3 HTML n/a

topmargin="integer"Optional
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 attribute 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 (IE/Macintosh).

Object Model Reference

[window.]document.body.topMargin
vlinkNN all IE all HTML 3.2

vlink="colorTripletOrName"Optional
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 11).

Example

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

Value

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

Default

#551a8b (NN); #800080 (IE/Windows); #006010 (IE/Macintosh).

Object Model Reference

[window.]document.vlinkColor
[window.]document.body.vLink
<br>NN all IE all HTML all

<br>HTML End Tag: Forbidden
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.

clearNN all IE all HTML 3.2

clear="constant"Optional
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 attribute 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>NN 6 IE 4 HTML 4

<button>...</button>HTML End Tag: Required
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. Both style sheet mechanisms permit the button label to use custom fonts and styles.

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, recent IE browsers for both Windows and Macintosh render identical buttons. Netscape 6 tends to use less horizontal padding around the label of a button element by default.

Example

<button type="button" onClick="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

datafld

dataformatas

datasrc

name

type

value

       

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbeforeupdate

n/a

4

n/a

onrowenter

n/a

4

n/a

onrowexit

n/a

4

n/a

datafldNN n/a IE 4 HTML |4|

datafld="columnName"Optional
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
dataformatasNN n/a IE 4 HTML |4|

dataformatas="dataType"Optional
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
datasrcNN n/a IE 4 HTML n/a

datasrc="dataSourceName"Optional
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
nameNN 6 IE 4 HTML 4

name="elementIdentifier"Optional
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
typeNN 6 IE 4 HTML 4

type="buttonType"Optional
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: button | reset | submit.

Default

button

Object Model Reference

[window.]document.getElementById(elementID).type
valueNN 6 IE 4 HTML 4

value="text"Optional
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 
<caption>NN all IE all HTML 3.2

<caption>...</caption>HTML End Tag: Required
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.

alignNN all IE all HTML 3.2

align="where"Optional
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.

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

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

NN 6

HTML 4

bottom

center

-

-

-

left

-

right

-

top

For implementation details, see the discussion of text alignment within a containing box in the Section 8.1.5 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
valignNN n/a IE 3 HTML n/a

valign="where"Optional
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>NN all IE all HTML 3.2

<center>...</center>HTML End Tag: Required
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>NN all IE all HTML all

<cite>...</cite>HTML End Tag: Required
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. Both Navigator and Internet Explorer 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>NN all IE all HTML all

<code>...</code>HTML End Tag: Required
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. Both Navigator and Internet Explorer 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>NN 6 IE 3 HTML 4

<col>HTML End Tag: Forbidden
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 IE and Navigator through Version 6. 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 Netscape 6 is based on the browser's DOM implementation. The DOM reports to scripts that the col element and its attributes exist (reflected as properties). But as of Netscape 7, the element does not perform its intended tasks. A later version will likely connect the element's internal wiring.

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.

alignNN 6 IE 3 HTML 4

align="alignConstant"Optional
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. See the col element description about Netscape 6 compatibility.

Example

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

Value

HTML 4 and IE have two sets of attribute values.

Value

IE

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 attribute). 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 attribute for the thead or individual th elements.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align
charNN 6 IE n/a HTML 4

char="character"Optional
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. Netscape 7 has not yet connected support for the char attribute.

Example

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

Value

Any single text character.

Default

None.

charoffNN 6 IE n/a HTML 4

charoff="length"Optional
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. Netscape 7 has not yet connected support for the charoff 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.

spanNN 6 IE 3 HTML 4

span="columnCount"Optional
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. See the col element description about Netscape 6 compatibility.

Example

<col span="3">

Value

Integer value greater than zero.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).span
valignNN 6 IE 4 HTML 4

valign="alignmentConstant"Optional
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. See the col element description about Netscape 6 compatibility.

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
widthNN 6 IE 4 HTML 4

width="multiLength"Optional
Defines the maximum width for the column(s) covered by the col element. In practice (in IE 4 and later for Windows, anyway), 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. See the col element description about Netscape 6 compatibility.

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>NN 6 IE 3 HTML 4

<colgroup>...</colgroup>HTML End Tag: Optional
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:

<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 IE for Windows and Navigator through Version 6. 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 Netscape 6 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 Netscape 7, the element does not perform its intended tasks. A later version will likely connect the element's internal wiring.

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.

alignNN n/a IE 3 HTML 4

align="alignConstant"Optional
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. See the colgroup element description about Netscape 6 compatibility.

Example

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

Value

HTML 4 and IE have two sets of attribute values.

Value

IE

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 attribute for the thead or individual th elements.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align
charNN 6 IE n/a HTML 4

char="character"Optional
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. Netscape 7 has not yet connected support for the char attribute.

Example

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

Value

Any single text character.

Default

None.

charoffNN 6 IE n/a HTML 4

charoff="length"Optional
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. Netscape 7 has not yet connected support for the charoff 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.

spanNN n/a IE 3 HTML 4

span="columnCount"Optional
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. See the colgroup element description about Netscape 6 compatibility.

Example

<colgroup span="3">

Value

Integer value greater than zero.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).span
valignNN 6 IE 3 HTML 4

valign="alignmentConstant"Optional
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. See the colgroup element description about Netscape 6 compatibility.

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
widthNN 6 IE 3 HTML 4

width="multiLength"Optional
Defines the maximum width for the column(s) covered by the colgroup element. In practice (in IE 4 and later for Windows, anyway), 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. See the colgroup element description about Netscape 6 compatibility.

Example

<colgroup 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%").

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>NN n/a IE all HTML n/a

<comment>...</comment>HTML End Tag: Required
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.

<dd>NN all IE all HTML all

<dd>...</dd>HTML End Tag: Optional
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, Navigator and Internet Explorer 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 in IE 4, although it is not necessary for IE-only documents.

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>NN 6 IE 4 HTML 4

<del>...</del>HTML End Tag: Required
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.

citeNN 6 IE 6 HTML 4

cite="text"Optional
A description of the reason for the change or other notation to be associated with the element, but normally hidden from view. In Netscape 6, 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
datetimeNN 6 IE 6 HTML 4

datetime="datetimeString"Optional
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 Netscape 6, 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-ddThh: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>NN 6 IE 3 HTML 3.2

<dfn>...</dfn>HTML End Tag: Required
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>NN all IE all HTML all

<dir>...</dir>HTML End Tag: Required
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.

compactNN 6 IE 3 HTML 3.2

compactOptional
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>NN all IE all HTML 3.2

<div>...</div>HTML End Tag: Required
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.

alignNN 2 IE 3 HTML 3.2

align="alignmentConstant"Optional
See details for horizontal alignment within a block element in the
Section 8.1.5 at the beginning of this chapter.

Example

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

Value

Constant value. Navigator 4 and later and Internet Explorer 4 and later (Windows) 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
datafldNN n/a IE 4 HTML |4|

datafld="columnName"Optional
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
dataformatasNN n/a IE 4 HTML |4|

dataformatas="dataType"Optional
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
datasrcNN n/a IE 4 HTML |4|

datasrc="dataSourceName"Optional
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
nowrapNN n/a IE 4 HTML n/a

nowrapOptional
The nowrap attribute, unique to IE/Windows for this element, 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>NN all IE all HTML all

<dl>...</dl>HTML End Tag: Required
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, Navigator and Internet Explorer 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.

compactNN 3 IE 3 HTML 3.2

compactOptional
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>NN all IE all HTML 3.2

<!DOCTYPE...>HTML End Tag: Forbidden
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 and Netscape 6 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, in IE, 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 (ideally, Version 6 or later), you should gravitate toward the "strict" (Navigator) 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 Version 6 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.

Now here are common DOCTYPE tags that force Version 6 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 9 (client- and offset- properties, the body object, the document.compatMode property) and Chapter 10 (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>NN all IE all HTML all

<dt>...</dt>HTML End Tag: Optional
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, Navigator and Internet Explorer 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 in IE 4, although it is not necessary for IE 4-only documents.

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>NN all IE all HTML all

<em>...</em>HTML End Tag: Required
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>NN 2 IE 3 HTML n/a

<embed>...</embed>HTML End Tag: Optional/Required
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.

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, 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. The object element gets around this object-specific attribute problem by letting you add any number of param elements tailored to the object.

The end tag is required in Internet Explorer but is optional in Navigator.

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.

alignNN all IE 4 HTML n/a

align="where"Optional
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 attribute. 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

NN

IE

absbottom

-

absmiddle

-

baseline

-

bottom

left

middle

right

texttop

-

top

Default

bottom

Object Model Reference

[window.]document.embeds[elementName].align
[window.]document.getElementById(elementID).align
altNN n/a IE 4 HTML n/a

alt="textMessage"Optional
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, widthNN 2 IE 3 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, such as Navigator 4 for the Macintosh, 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
hiddenNN <6 IE 4 HTML n/a

hidden="true" | "false"Optional
Predating style sheet borders, the hidden attribute is a switch that lets you set whether the embedded data's plugin control panel appears on the screen. This might be desirable for background music under script control (via Netscape's LiveConnect). 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
nameNN 2 IE 3 HTML n/a

name="elementIdentifier"Optional
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]).

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
pluginspageNN <6 IE 4 HTML n/a

pluginspage="URL"Optional
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. If you omit this attribute, Navigator 4 presents a generic link to Netscape's own resource listing of plugin vendors.

Example

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

Value

Any valid URL.

Default

None.

pluginurlNN |4| IE n/a HTML n/a

pluginurl="URL"Optional
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.giantco.com/plugin/install.jar">
</embed>

Value

Any valid URL to a JAR file.

Default

None.

srcNN 2 IE 3 HTML n/a

src="URL"Optional
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 typically use the filename extension to determine which plugin to load (based on browser preferences settings for plugins and helper applications).

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
typeNN 2 IE n/a HTML n/a

type="MIMEtype"Optional
Navigator 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. Either the src or type attribute must be present in a Navigator 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.

unitsNN <6 IE 3 HTML n/a

units="measurementUnitType"Optional
The units attribute is supposed to dictate the kind of measurement units used for the element's height and width attribute values. Both Navigator 4 and Internet Explorer appear 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

Not only does this attribute not appear to influence the rendering of an embed element, but Navigator 4 and Internet Explorer 4 disagree on the precise spelling and available units for values. Navigator 4 specifies choices of pixels or en; Internet Explorer goes with px or em.

Default

pixels (or px).

Object Model Reference

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

See height.

<fieldset>NN 6 IE 4 HTML 4

<fieldset>...</fieldset>HTML End Tag: Required
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

Element-Specific Event Handler Attributes

None.

alignNN n/a IE 4 HTML n/a

align="where"Optional
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
<font>NN all IE all HTML 3.2

<font>...</font>HTML End Tag: Required
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.

colorNN 2 IE 3 HTML 3.2

color="colorTripletOrName"Optional
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
faceNN 3 IE 3 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 attribute), 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-sizeNN |4| IE n/a HTML n/a

point-size="pointSize"Optional
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.

sizeNN all IE all HTML 3.2

size="integerOrRelativeSize"Optional
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
weightNN |4 | IE n/a HTML n/a

weight="boldnessValue"Optional
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 attribute 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>NN all IE all HTML all

<form>...</form>HTML End Tag: Required
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 Version 6 browsers, 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.

Default behavior of the Enter key in forms has evolved into a recognized standard. When a form consists of a single text input element, pressing the Enter (or Return) key automatically submits the form (as if the user had clicked on a submit button element. If the form consists of two or more text input elements, the Enter (or Return) key does not automatically submit the form (with the exception of IE/Mac).

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 handler. This event fires prior to the form being submitted. If the event handler evaluates to return false, the form is not submitted, and the user may continue to edit the form elements.

Example

<form name="orders" method="POST" action="http://www.giantco.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

enctype

method

name

target

 

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onreset

3

4

4

onsubmit

2

3

4

acceptNN n/a IE n/a HTML 4

accept="MIMETypeList"Optional
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, acceptcharsetNN 6 IE 5 HTML 4

accept-charset="MIMETypeList"Optional
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/Windows and Netscape 6 implement the attribute name without the 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

actionNN all IE all HTML all

action="URL"Optional
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.

You may also substitute a mailto: URL for the action attribute value. Navigator turns the name/value pairs of the form into a document for attachment to an email message (or as the message body with the enctype attribute set to "text/plain" and the enctype attribute precedes the action attribute). For privacy reasons, client users are notified of the impending email transmission and have the chance to cancel the message.

Form-mailing capabilities are essentially disabled in Netscape 6 and 7. Implementations 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.giantco.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
autocompleteNN n/a IE 5 HTML n/a

autocomplete="featureSwitch"Optional
If an IE user has automatic form completion preference enabled, the autocomplete attribute governs the feature for the entire form. You must also 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.

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
enctypeNN all IE all HTML all

enctype="MIMEType"Optional
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@giantco.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
methodNN all IE all HTML all

method="GET" | "POST"Optional
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@giantco.com/orders/order.html">
...
</form>

Value

Constant values of GET or POST. Browsers respond to upper- or lowercase values.

Default

GET

Object Model Reference

[window.]document.forms[i].method
[window.]document.forms[formName].method
[window.]document.formName.method
[window.]document.getElementById(elementID).method
nameNN 2 IE 3 HTML n/a

name="elementIdentifier"Optional
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.giantco.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
targetNN all IE all HTML all

target="windowOrFrameName"Optional
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.giantco.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>NN 2 IE 3 HTML 4

<frame>HTML End Tag: Forbidden
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.

allowtransparencyNN n/a IE 5.5 HTML n/a

allowtransparency="featureSwitch"Optional
More applicable to the iframe element, the allowtransparency attribute, when engaged, turns the frame's background transparent. See the iframe element.
bordercolorNN 3 IE 4 HTML n/a

bordercolor="colorTripletOrName"Optional
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 for Windows ignores this attribute.

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
datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
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
datasrcNN n/a IE 4 HTML n/a

datasrc="dataSourceName"Optional
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
frameborderNN 3 IE 3 HTML 4

frameborder="borderSwitch"Optional
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 Netscape 6 accept both sets of values.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).frameBorder
height, widthNN n/a IE 4 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.

longdescNN 6 IE6 HTML 4

longdesc="URL"Optional
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 Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 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, marginwidthNN 6 IE 3 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, Internet Explorer automatically inserts a margin of 14 (Windows) or 8 (Macintosh) 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 (IE/Macintosh).

Object Model Reference

[window.]document.getElementById(elementID).marginHeight
[window.]document.getElementById(elementID).marginWidth
nameNN 2 IE 3 HTML 4

name="elementIdentifier"Optional
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
noresizeNN 2 IE 3 HTML 4

noresizeOptional
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
scrollingNN 2 IE 3 HTML 4

scrolling="auto" | "no" | "yes"Optional
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 later and all versions of Internet Explorer, 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
securityNN n/a IE 6 HTML n/a

security="restricted"Optional
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.

srcNN 2 IE 3 HTML 4

src="URL"Optional
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. However, Navigator 2 and 3 for the Macintosh display an unwanted message with this URL in a window or frame.

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>NN 2 IE 3 HTML 4

<frameset>...</frameset>HTML End Tag: Required
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 8-1 shows the resulting frame organization.

Figure 8-1

Figure 8-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 8-2.

Figure 8-2

Figure 8-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

NN

IE

HTML

onload

2

3

4

onunload

2

3

4

borderNN 3 IE 4 HTML n/a

border="pixelCount"Optional
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 4 is 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; Navigator loses its 3-D effect when the value is 2 or less. Navigator 4 also has a nasty habit of rendering an odd divot in the center of frame bars on the Macintosh.

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 attribute 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
bordercolorNN 3 IE 4 HTML n/a

bordercolor="colorTripletOrName"Optional
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
colsNN 2 IE 3 HTML 4

cols="columnLengthsList"Optional
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
frameborderNN 3 IE 3 HTML n/a

frameborder="borderSwitch"Optional
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
framespacingNN n/a IE 3 HTML n/a

framespacing="pixelLength"Optional
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
rowsNN 2 IE 3 HTML 4

rows="rowLengthsList"Optional
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>NN all IE all 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 8-3 shows examples of how Netscape 6 and Internet Explorer 6 renders all six heading levels in Windows. By and large, this pattern applies to other browser versions and operating systems.

Figure 8-3

Figure 8-3. Heading levels in Internet Explorer 6 and Netscape 6

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.

alignNN all IE all HTML 3.2

align="where"Optional
Determines how the element's text is aligned inside the element's block. Both Navigator and Internet Explorer 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 attribute.

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

NN 4+

IE 4+

HTML4

center

justify

-

-

left

right

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align 
<head>NN all IE all HTML all

<head>...</head>HTML End Tag: Optional
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

NN 4+

IE 4+

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.

profileNN 6 IE 6 HTML 4

profile="URLList"Optional
A meta data profile is a separate file that defines one or more meta data property behaviors. The W3C leaves the precise application of this attribute to the whims of the browsers makers. As of Version 6 browsers, nothing special occurs as a result of assigning this attribute.

Example

<head profile="http://www.giantco.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>NN all IE all HTML all

<hr>HTML End Tag: Forbidden
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.

alignNN all IE all HTML 3.2

align="where"Optional
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 attribute.

Example

<hr align="right">

Value

One of three case-insensitive values: center | left | right.

Default

center

Object Model Reference

[window.]document.getElementById(elementID).align
colorNN n/a IE 4 HTML n/a

color="colorTripletOrName"Optional
Sets the color of the hr element in Internet Explorer. Setting the color attribute also turns on the noshade attribute. If you want a 3-D effect rule to appear with a color, use the style sheet color attribute. Navigator 4 and later, however, doesn't apply color style sheet rules to hr elements.

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
noshadeNN all IE all HTML 3.2

noshadeOptional
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
sizeNN all IE all HTML 3.2

size="pixelCount"Optional
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 attribute.

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
widthNN all IE all HTML 3.2

width="length"Optional
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 attribute.

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>NN all IE all HTML all

<html>...</html>HTML End Tag: Optional
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 Netscape 6 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

scroll

version

xmlns

Element-Specific Event Handler Attributes

None.

scrollNN n/a IE 6 HTML n/a

scroll="featureSwitch"Optional
When IE 6 is in standards-compliant mode (see the DOCTYPE element earlier in this chapter), it treats the html element as the "canvas" on which it draws the document content. By default, the canvas gains scrollbars if the content overflows the content region of the window. You can force the display of scrollbars (on or off) regardless of the overflow state by setting the scroll attribute in the html element. If your pages will also be loading into older IE/Windows versions, set the same attribute in the body element — the "canvas" for older versions.

Example

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

Value

String constant: auto | no | yes.

Default

auto

Object Model Reference

[window.]document.getElementById(elementID).scroll
versionNN 6 IE 6 HTML 3.2

version="string"Optional
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.

xmlnsNN n/a IE 5 HTML X1.0

xmlns="namespaceSpec"Optional
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).

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>NN all IE all HTML all

<i>...</i>HTML End Tag: Required
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) 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 attribute 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>NN 6 IE 3 HTML 4

<iframe>...</iframe>HTML End Tag: Required
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.

Because an iframe element draws its content from a separate server file, it may be used as a way to accomplish client-side "includes" (see Chapter 5). 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 datafld datasrc frameborder height
hspace longdesc marginheight marginwidth name
scrolling security src vspace width

Element-Specific Event Handler Attributes

None.

alignNN 6 IE 3 HTML 4

align="alignmentConstant"Optional
Determines how the rectangle of the iframe element aligns within the context of surrounding content. See
Section 8.1.5 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
datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
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
datasrcNN n/a IE 4 HTML n/a

datasrc="dataSourceName"Optional
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
frameborderNN 6 IE 3 HTML 4

frameborder="borderSwitch"Optional
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 Netscape 6 accept the HTML value and yes or no.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).frameBorder
height, widthNN 6 IE 4 HTML 4

Optional
height="length" 
width="length"

These attributes establish the dimensions of the iframe element. IE 4.5 or later on the Mac is required. Both attributes are deprecated in HTML 4 in favor of CSS height and width style attributes.

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, vspaceNN n/a IE 4 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
longdescNN 6 IE 6 HTML 4

longdesc="URL"Optional
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 Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 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, marginwidthNN 6 IE 3 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
nameNN 6 IE 3 HTML 4

name="elementIdentifier"Optional
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
scrollingNN 6 IE 3 HTML 4

scrolling="featureSwitch"Optional
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 attribute. Microsoft provides extra axis-specific control over scrollbars via their overflow-x and overflow-y style attributes.

Example

<iframe src="news.html" scrolling="no"></iframe>

Value

Constant values: auto | no | yes.

Default

auto

Object Model Reference

[window.]document.getElementById(elementID).scrolling
securityNN n/a IE 6 HTML n/a

security="restricted"Optional
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">

Value

Constant value: restricted.

Default

None.

srcNN 6 IE 3 HTML 4

src="URL"Optional
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>NN |4| IE n/a HTML n/a

<ilayer>...</ilayer>HTML End Tag: Required
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

IE

HTML

onblur

4

n/a

n/a

onfocus

4

n/a

n/a

onload

4

n/a

n/a

onmousedown

4[10]

n/a

n/a

onmouseout

4a

n/a

n/a

onmouseover

4a

n/a

n/a

onmouseup

4a

n/a

n/a

[10]Event capture mode only.

aboveNN |4| IE n/a HTML n/a

above="layerID"Optional
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
backgroundNN |4| IE n/a HTML n/a

background="URL"Optional
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
belowNN |4| IE n/a HTML n/a

below="layerID"Optional
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
bgcolorNN |4| IE n/a HTML n/a

bgcolor="colorTripletOrName"Optional
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
clipNN |4| IE 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, widthNN |4| IE 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
idNN |4| IE n/a HTML n/a

id="elementIdentifier"Optional
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, topNN |4| IE 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
nameNN |4| IE n/a HTML n/a

name="elementIdentifier"Optional
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
srcNN |4| IE n/a HTML n/a

src="URL"Optional
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.

visibilityNN |4| IE n/a HTML n/a

visibility="visibilityConstant"Optional
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-indexNN |4| IE n/a HTML n/a

z-index="layerNumber"Optional
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>NN all IE all HTML all

<img>HTML End Tag: Forbidden
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 and later and Netscape 6. The downside is that you'll have to control the cursor style with other events because the :hover pseudo-class works reliably (if at all) only on a elements.

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

NN

IE

HTML

onabort

3

4

n/a

onerror

3

4

n/a

onload

3

4

n/a

alignNN all IE all HTML all

align="where"Optional
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 attributes. But if you require backward compatibility for your document, stick with the align attribute.

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

NN 4+

IE 4+

HTML 4

absbottom

-

absmiddle

-

baseline

-

bottom

left

middle

right

texttop

-

top

Default

bottom

Object Model Reference

[window.]document.imageName.align
[window.]document.images[i].align
[window.]document.getElementById(elementID).align
altNN all IE all HTML all

alt="textMessage"Required
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
borderNN all IE all HTML 3.2

border="pixels"Optional
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
datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
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
datasrcNN n/a IE 4 HTML n/a

datasrc="dataSourceName"Optional
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
dynsrcNN n/a IE 4 HTML n/a

dynsrc="URL"Optional
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
galleryimgNN n/a IE 6 HTML n/a

dynsrc="featureSwitch"Optional
Sets whether images that are at least 130 pixels high and wide display the Windows OS "My Pictures" toolbar during mouse rollovers. 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, widthNN all IE all 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 (optionally quoted) or percentage values (quoted).

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, vspaceNN all IE all 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 attributes.

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
ismapNN all IE all HTML all

ismapOptional
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.giantco.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.

More recent browsers 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.giantco.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
longdescNN 6 IE 6 HTML 4

longdesc="URL"Optional
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 Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 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
loopNN n/a IE 3 HTML n/a

loop="loopCount"Optional
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
lowsrcNN 3 IE 4 HTML n/a

lowsrc="URL"Optional
Both Navigator and Internet Explorer recognize the fact that 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
nameNN 3 IE 4 HTML 4

name="elementIdentifier"Optional
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
srcNN all IE all HTML all

src="URL"Required
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
startNN n/a IE 4 HTML n/a

start="videoStartType"Optional
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
suppressNN |4| IE n/a HTML n/a

suppress="featureSwitch"Optional
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

usemapNN all IE all HTML 3.2

usemap="mapURL"Optional
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>NN all IE all HTML all

<input>HTML End Tag: Forbidden
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: button, checkbox, file, hidden, image, password, radio, reset, submit, or text. 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.giantco.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
[window.]document.forms[i].elements[j]
[window.]document.getElementById(elementID)

Element-Specific Attributes

accept

accesskey

align

alt

border

checked

datafld

datasrc

disabled

dynsrc

height

hspace

ismap

loop

lowsrc

maxlength

name

readonly

size

src

start

type

usemap

value

vspace

width

       

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbeforeupdate

n/a

4

n/a

onchange

2

3

4

onselect

2

3

4

Not all events are active in all input types.

acceptNN 6 IE 6 HTML 4

accept="MIMETypeList"Optional
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. As of Version 6 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.

Default

None.

accesskeyNN 6 IE 4 HTML 4

accesskey="character"Optional
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.

alignNN all IE all HTML 3.2

align="alignmentConstant"Optional
Determines how the rectangle of the input image aligns within the context of the surrounding content. See
Section 8.1.5 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
altNN 6 IE 4 HTML 4

alt="textMessage"Optional
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
borderNN 4 IE 4(Mac) HTML n/a

border="pixels"Optional
Navigator 4 and later on all OS platforms and IE 4 and later on the Mac let you specify a border around the input element image. Because an input element whose type attribute is "image" acts as a submit-style button, the border is rendered in the browser's link colors, unless overridden by a style sheet. If you want a different color for a plain border, use style sheets (with the appropriate div or span wrapper for Navigator 4). 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
checkedNN all IE all HTML 4

checkedOptional
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. This default characteristic doesn't provide enough information for most server-side programs to work with. 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
datafldNN n/a IE 4 HTML |4|

datafld="columnName"Optional
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
datasrcNN n/a IE 4 HTML |4|

datasrc="dataSourceName"Optional
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
disabledNN 6 IE 4 HTML 4

disabledOptional
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 Netscape 6, which let unhighlighted buttons uncheck a disabled checked member of the group.

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 button object in Chapter 9).

Input Types

All.

Example

<button type="submit" disabled>Ready to Submit </button>

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
dynsrcNN n/a IE 4 HTML n/a

dynsrc="URL"Optional
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
height, widthNN 4 IE 4 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

All.

Example

<input type="image" src="submit.jpg" height="20" width="60">

Value

Positive integers.

Default

Default image size.

hspace, vspaceNN 6 IE 4 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.

Input Types

All.

Example

<input type="image" src="submit.jpg" alt="Submit Button" 
height="20" width="60" hspace="10" vspace="20">

Value

Positive integers.

Default

0

ismapNN all IE all HTML all

ismapOptional
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
loopNN n/a IE 3 HTML n/a

loop="loopCount"Optional
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
lowsrcNN all IE 4 HTML n/a

lowsrc="URL"Optional
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
maxlengthNN all IE all HTML all

maxlength="characterCount"Optional
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
nameNN all IE all HTML all

name="elementIdentifier"Optional/Required
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 but are helpful just the same in creating scripted references to these objects and their properties or methods.

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 many 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 through Version 6 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
readonlyNN 6 IE 4 HTML 4

readonlyOptional
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
sizeNN all IE all HTML all

size="elementWidth"Optional
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 the Version 6 browsers, this is not the case. In the meantime, you can use CSS attributes 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
srcNN all IE all HTML all

src="URL"Required
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
startNN n/a IE 4 HTML n/a

start="videoStartType"Optional
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
typeNN all IE all HTML all

type="elementType"Required
Advises the browser how to render the input element (or even whether the element should be rendered at all). Possible choices 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.

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
usemapNN 6 IE 6 HTML 4

usemap="mapURL"Optional
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
valueNN all IE all HTML all

value="text"Optional/Required
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  
vspace

See hspace.

width

See height.

<ins>NN 6 IE 4 HTML 4

<ins>...</ins>HTML End Tag: Required
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.

citeNN 6 IE 6 HTML 4

cite="text"Optional
A description of the reason for the change or other notation to be associated with the element, but normally hidden from view. In Netscape 6, 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
datetimeNN 6 IE 6 HTML 4

datetime="datetimeString"Optional
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 Netscape 6 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-ddThh:mm:ssTZD.

yyyy
Four-digit year

MM
Two-digit month (01 through 12)

dd
Two-digit date (01 through 31)

T
Uppercase "T" to separate date from time

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

mm
Two-digit minute (00 through 59)

ss
Two-digit second (00 through 59)

TZD
Time Zone Designator

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

2003-01-30T02:00:00Z

UTC

2003-01-29T21:00:00-05:00

Eastern Standard Time

2003-01-29T18:00:00-08:00

Pacific Standard Time

2003-01-30T13:00:00+11:00

Sydney, Australia

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

Default

None.

<isindex>NN all IE all HTML all

<isindex>HTML End Tag: Forbidden
The isindex element is a longtime holdover from the earliest days of HTML and is deprecated in HTML 4 in favor of the text input element. The isindex element tag belongs in the head element. In modern browsers, it is rendered as a simple text field between two hr elements. When a user types text into the field and presses the Enter/Return key, the content of the field is URL-encoded (with + symbols substituted for spaces) and sent to the server with the URL of the current document. A CGI program on the server must know how to process this URL and return HTML for display in the current window or frame.

Example

<head>
<isindex prompt="Enter a search string:">
</head>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

prompt

Element-Specific Event Handler Attributes

None.

promptNN all IE all HTML 4

prompt="message"Optional
This attribute lets you assign the prompt message that appears with the element.

Example

<isindex prompt="Enter a search string:">

Value

Any quoted string.

Default

None.

<kbd>NN all IE all HTML all

<kbd>...</kbd>HTML End Tag: Required
The kbd element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A kbd element is one that displays text that a user is supposed to type on the keyboard, presumably to fill a text field or issue some command.

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

Example

<p>If you don't know the answer, type <kbd>NONE</kbd> into the text box.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<keygen>NN all IE n/a HTML n/a

<keygen>HTML End Tag: Forbidden
A keygen element allows a form to be submitted with key encryption, where the server expects a form to be packaged with an encrypted key. The client browser must have a digital certificate installed. The user sees two results of including the keygen element inside a form element. First, a select list of available encryption key sizes is rendered in the form where the keygen element appears. When the user submits the form, the user may see one or more security-related dialogs for confirmation. This element builds on the public-key encryption systems in Navigator and Netscape's Certificate Management System (CMS). Documentation is available at
developer.netscape.com/docs/manuals/cms/41/dep-guide/contents.htm.

Example

<form ...>
...
<keygen name="encryptedOrder" challenge="39457582201">
</form>

Element-Specific Attributes

challenge

keytype

name

pqg

Element-Specific Event Handler Attributes

None.

challengeNN all IE n/a HTML n/a

challenge="challengeString"Required
If the server is equipped to interpret a challenge string for verification of an encrypted package, the challenge attribute is the challenge string. If you assign an empty string to the attribute, the key is encoded as an IA5STRING.

Example

<keygen name="encryptedOrder" challenge="39457582201">

Value

Any string.

Default

Empty string.

keytypeNN all IE n/a HTML n/a

keytype="keyType"Optional/Required
Sets the type of key to be created by the CMS prior to submitting the form data. This attribute is required only for the secondary type, DSA.

Example

<keygen name="encryptedOrder" challenge="39457582201" keytype="DSA">

Value

One of two constant values: RSA | DSA.

Default

RSA

nameNN all IE n/a HTML n/a

name="identifier"Required
Encrypting a form turns the entire form into a value that is part of a name/value pair. The name attribute assigns the "name" part of the name/value pair. If the server successfully decrypts the package, the individual form element name/value pairs are available to the server for further processing.

Example

<keygen name="encryptedOrder" challenge="39457582201">

Value

Case-insensitive identifier.

Default

None.

pqgNN all IE n/a HTML n/a

pqg="dssParams"Optional/Required
If you specify the DSA key type for the keytype attribute, you must also assign associated parameter values to the pqg attribute. An explanation of the algorithms used to derive these values may be found at
ftp://ftp.ietf.org/internet-drafts/draft-ietf-pkix-ipki-pkalgs-05.txt.

<label>NN 6 IE 4 HTML 4

<label>...</label>HTML End Tag: Required
The label element defines a structure and container for the label associated with an input element. Because the rendered labels for most form controls are not part of the element's tag, the label attribute provides a way for an author to associate the context of the label with its control. A label element also simplifies assigning uniform styles to all form labels.

You have two ways to provide the association. One is to assign the id attribute value of the control to the for attribute of the label element. The other is to wrap the input element inside a label element. The latter is possible only if the label and control are part of running body content; if you must physically separate the label from the control because they exist inside separate td elements of a table, you must use the for attribute linkage. Whether the label is rendered in front of or after the control depends entirely on the relative locations of the tags in the source code.

Example

<form>
<label>Company:<input type="text" name="company"></label><br>
<label for="stateEntry">State:</label>
<input type="text" name="state" id="stateEntry">
...
</form>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

accesskey

datafld

dataformatas

datasrc

for

Element-Specific Event Handler Attributes

None.

accesskeyNN 6 IE 4 HTML 4

accesskey="character"Optional
A single character key that brings focus to, or activates, the associated input element. See the description of this shared attribute at the beginning of this chapter for general characteristics.

Example

<label for="stateEntry" accesskey="s">State:</label>

Value

Single character of the document set.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).accessKey
datafldNN n/a IE 4 HTML n/a

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

Example

<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML">
</label>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataFld
dataformatasNN n/a IE 4 HTML n/a

dataformatas="dataType"Optional
Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. This attribute setting depends entirely on how the data source is constructed. Works only with text file data sources in IE 5/Mac.

Example

<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML">
</label>

Value

IE recognizes two possible settings: text | html.

Default

text

Object Model Reference

[window.]document.getElementById(elementID).dataFormatAs
datasrcNN n/a IE 4 HTML n/a

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

Example

<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML">
</label>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc
forNN 6 IE 4 HTML 4

for="inputElementIdentifier"Optional
A unique identifier that is also assigned to the id attribute of the input element to which the label is to be associated. The for attribute is necessary only when you elect not to wrap the input element inside the label element, in which case the for attribute performs the binding between the two elements.

Example

<label for="stateEntry">State:</label>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).htmlFor
<layer>NN |4| IE n/a HTML n/a

<layer>...</layer>HTML End Tag: Required
A layer element is a positionable element in Navigator 4's object model (e.g., like a block-level element whose CSS position attribute is set to absolute). As a result, many of the attributes are named according to the Navigator 4 way of positioning, sizing, and stacking positionable elements. The element was removed from the Netscape DOM for Version 6, and will not be implemented in new browsers or W3C standards.

Content for a layer element can be read from a separate file (with the src attribute) or wired into the current document by placing the HTML between the start and end tags. You can include both types of content in the same layer element. Content from the src document is rendered first (as its own block-level element), with additional content starting on its own line below the external content's rectangle.

A layer element can be positioned anywhere within a document and can overlap content belonging to other layers (including the base document layer). Under link or script control, content for an individual layer can be changed without having to reload the other content on the page. Moreover, layer elements may be nested inside one another.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>

Object Model Reference

[window.]document.layerName

Element-Specific Attributes

above

background

below

bgcolor

clip

height

id

left

pagex

pagey

src

top

visibility

width

z-index

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onblur

4

n/a

n/a

onfocus

4

n/a

n/a

onload

4[11]

n/a

n/a

onmousedown

4a

n/a

n/a

onmouseout

4a

n/a

n/a

onmouseover

4a

n/a

n/a

onmouseup

4a

n/a

n/a

[11]Event capture mode only.

aboveNN |4| IE n/a HTML n/a

above="layerID"Optional
Names the positionable element that is to be above (in front of) the current layer in the stacking order. This is a different way to set the z-index attribute that does not rely on an arbitrary numbering system. If you use the above attribute, do not use the below or z-index attribute for the same layer element.

Example

<layer id="instrux" bgcolor="yellow" src="instrux.html" above="help1"
width="200" height="300">
</layer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.above
backgroundNN |4| IE n/a HTML n/a

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

Example

<layer background="blueCrinkle.jpg" src="instrux.html" width="200" height="300">
</layer>

Value

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

Default

None.

Object Model Reference

[window.]document.layerName.background
belowNN |4| IE n/a HTML n/a

below="layerID"Optional
Names the positionable element that is to be below (behind) the current layer in the stacking order. This is a different way to set the z-index attribute that does not rely on an arbitrary numbering system. If you use the below attribute, do not use the above or z-index attribute for the same layer element.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" below="thankyou">
</layer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.below
bgcolorNN |4| IE n/a HTML n/a

bgcolor="colorTripletOrName"Optional
Establishes a fill color (behind the text and other content) for the entire layer rectangle. If you combine a bgcolor and background, any transparent areas of the background image let the background color show through.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>

Value

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

Default

Varies with operating system.

Object Model Reference

[window.]document.layerName.bgColor
clipNN |4| IE n/a HTML n/a

Optional
clip="[leftPixel,
topPixel,]rightPixel,bottomPixel"

A clipping region is a rectangular view to the full layer content. Only content that is within the clipping rectangle can be seen on the page. The default value of the clip attribute is either the default size of the content or the layer element's width by the automatically flowing content length. Setting the clip attribute lets you rein in long content that might flow beyond a fixed rectangle desired for the page design.

Example

<layer bgcolor="yellow" src="instrux.html" clip="50,50" width="200" height="300">
</layer>

Value

clip attribute values are pixel measures from the top and left edges of the element as it flows in the document. The order of values is clockwise from the left edge, around the rectangle sides: left, top, right, bottom. If you supply only two values, Navigator 4 assumes the left and top values are zero, meaning that you wish to adjust only the right and bottom edges. Thus, a setting of "50,50" means that the clipping region is 50 pixels square, starting at the top-left corner of the layer's rectangle. If you want the same size view starting 10 pixels in from the left, the clip attribute setting becomes "10,0,60,50".

Default

Naturally flowing viewing area of layer content.

Object Model Reference

[window.]document.layerName.clip.left
[window.]document.layerName.clip.top
[window.]document.layerName.clip.right
[window.]document.layerName.clip.bottom
height, widthNN |4| IE n/a HTML n/a

Optional
height="length"
width="length"

Define the minimum size of the layer element. When you add content to the layer during initial loading, however, the attribute settings do not restrict the amount of the content that is visible along either axis. For example, if you display an image in a layer that is 120 pixels wide by 90 pixels high, the actual visible size of a layer element whose height and width attributes are set to a smaller size expands to allow the full image to appear. The same happens to text or other content: the viewable region expands to allow all content to appear. To restrict the visible portion of the content, set the clip attribute.

Setting the height and width attributes to specific sizes is helpful when you are creating a colored or patterned rectangle (via the bgcolor or background attributes) to act as an underlying layer beneath some other positioned content. Without content pushing on the edges of the layer, the height and width attributes set the clipping region to their sizes.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>

Value

Positive integer values or percentage values. You can reduce both values to zero to not only hide the element (which you can also do with the visibility attribute), but also prevent the element from occupying any page space.

Default

Naturally flowing viewing area of layer content.

Object Model Reference

[window.]document.layerName.height
[window.]document.layerName.width
idNN |4| IE n/a HTML n/a

id="elementIdentifier"Optional
A unique identifier that distinguishes this element from all the rest in the document. This is the identifier used as values for the above and below attributes. Scripts also use the id attribute value as the layer element's name for object references.

Example

<layer id="oldYeller" bgcolor="yellow" src="instrux.html" width="200" height="300">
</layer>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.layerName.name
left, topNN |4| IE n/a HTML n/a

Optional
left="pixelCount"
top="pixelCount"

Define the positioned offset of the left and top edges of the layer relative to the spot in the document where the layer element would normally appear in source code order. This precise location relative to the page varies unless you also set the pagex and pagey attributes, which absolutely position the element in the document space. Unlike what it does for the ilayer element, Navigator does not preserve the space in the document where a layer element appears. The element is placed in its own plane, and the surrounding source code content is cinched up—usually overlapping the layer content unless the layer is positioned elsewhere.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" left="10" top="50">
</layer>

Value

Positive integer values (optionally quoted).

Default

0

Object Model Reference

[window.]document.layerName.left
[window.]document.layerName.top
pagex, pageyNN |4| IE n/a HTML n/a

Optional
pagex="pixelCount"
pagey="pixelCount"

To truly position a layer element with repeatable accuracy, you can use the top-left corner of the document (page) as the point of reference. When you set the pagex and/or pagey attributes, you establish an offset for the left and top edges of the layer element relative to the corresponding edges of the entire document. Therefore, the zero point for a vertically scrolled page may be above the visible area of the browser window.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" pagex="50" 
pagey="350">
</layer>

Value

Positive integer values (optionally quoted).

Default

0

Object Model Reference

[window.]document.layerName.pageX
[window.]document.layerName.pageY
srcNN |4| IE n/a HTML n/a

src="URL"Optional
To load the content of an external HTML file into a layer element, assign the URL of that file to the src attribute. Any HTML content between the layer start and end tags is rendered on the page after the content is loaded from the src URL. If you omit the src attribute, only content between the tags is rendered. Scripts can change the corresponding object property (src) after the document has loaded to dynamically change content within the layer element (without reloading the main document).

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.layerName.src
top

See left.

visibilityNN |4| IE n/a HTML n/a

visibility="visibilityConstant"Optional
Determines whether Navigator 4 displays the layer element. The default behavior is for a layer to inherit the visibility attribute of its next outermost (parent) layer. For a layer element that is part of the basic document body, this means that the layer is seen by default (the base layer is always visible). To hide a layer when the page loads, set the visibility attribute to "hidden". You need to set the attribute to "show" only if the layer element is nested within another layer (or ilayer) whose visibility value is set to (or is inherited as) "hidden".

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" 
pagex="50" pagey="350" visibility="hidden">
</layer>

Value

One of the accepted constants: hidden | inherit | visible.

Default

inherit

Object Model Reference

[window.]document.layerName.visibility
width

See height.

z-indexNN |4| IE n/a HTML n/a

z-index="layerNumber"Optional
Controls the positioning of layers along the Z-axis (front-to-back) of the document relative to the next outermost layer container. When the z-index values of two or more positionable elements within the same container (such as the base document layer) are identical numbers, the loading order of the elements in the HTML source code controls the stacking order, with the later elements stacked in front of earlier ones. The default z-index value for all positionable elements is zero. Therefore, if you want only one positionable element to appear in front of all the others that stack in their default order, you simply assign any positive value (even 1) to that standout element. Stacking order of positionable elements can be changed on-the-fly via scripting. See also the above and below attributes.

Example

<layer bgcolor="yellow" src="instrux.html" width="200" height="300" z-index="1">
</layer>

Value

Any integer.

Default

0

Object Model Reference

[window.]document.layerName.zIndex  
<legend>NN 6 IE 4 HTML 4

<legend>...</legend>HTML End Tag: Required
The legend element acts as a label for a fieldset element. In visual browsers, this usually means that the label is visually associated with the group border rendered for the fieldset element. A text-to-speech browser might read the label aloud as a user navigates through a form. Place the legend element immediately after the start tag of the fieldset element for the association to stick. Because the content of the legend element is HTML content, you can assign styles to make the label stand out, if you like.

Example

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

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

accesskey

align

Element-Specific Event Handler Attributes

None.

accesskeyNN 6 IE 5 HTML 4

accesskey="character"Optional
A single character key that brings focus to, or activates, the first focusable control of the form associated with the legend element. See the description of this shared attribute at the beginning of this chapter for general characteristics.

Example

<legend accesskey="c">Credit Card Information</legend>

Value

Single character of the document set.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).accessKey
alignNN 6 IE 4 HTML 4

align="where"Optional
Controls the alignment of the legend element with respect to the containing fieldset element. See the discussion about text alignment inside a containing box in the
Section 8.1.5, earlier in this chapter.

Example

<legend align="right">Credit Card Information</legend>

Value

Allowed values in HTML 4 are bottom | left | right | top. IE 4 and later and Netscape 6 add center.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align
<li>NN all IE all HTML all

<li>...</li>HTML End Tag: Optional
The li element is a single list item that is nested inside an ol or ul list container. The outer container determines whether the li item is preceded with a number or letter (indicating sequence within an order) or a symbol that doesn't connote any particular order. A special category of style sheet attributes are devoted to list formatting.

If you apply a style sheet rule to an li element to adjust the color in Navigator 4, only the leading symbol is colored. To color the text as well, wrap the li element inside a span element and apply the style to the span element. This workaround operates fine in other CSS-capable browsers.

Example

<ul>
    <li>Larry</li>
    <li>Moe</li>
    <li>Curly</li>
</ul>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

type

value

Element-Specific Event Handler Attributes

None.

typeNN all IE all HTML 3.2

type="labelType"Optional
The type attribute provides some flexibility in how the browser displays the item's leading symbol or sequence number. Values are divided into two groups, with one group each dedicated to ol and ul items. For an unordered list (ul), you can specify whether the leading symbol should be a disc, circle, or square; for an ordered list (ol), the choices are among letters (uppercase or lowercase), Roman numerals (uppercase or lowercase), or Arabic numerals. The type attribute is deprecated in HTML 4 in favor of the list-style-type style sheet attribute.

Be aware that in Version 4 browsers, the type attribute for a li element sets the type for subsequent li elements in the list unless overridden by a type attribute setting in another li element. More recent versions restrict the effect to the current li element. In general, though, it is best to set the type attribute of the ol or ul element and let that setting govern all nested elements.

Example

<li type="square">Chicken Curry</li>

Value

When contained by a ul element, possible values are disc | circle | square. When contained by an ol element, possible values are A | a | I | i | 1. Sequencing is performed automatically as shown in the following table.

Type

Example

A

A, B, C, ...

a

a, b, c, ...

I

I, II, III, ...

i

i, ii, iii, ...

1

1, 2, 3, ...

Default

1 and disc.

Object Model Reference

[window.]document.getElementById(elementID).type
valueNN all IE all HTML 3.2

value="number"Optional
The value attribute applies only when the li element is nested inside an ol element. You can manually set the number used as a starting point for the sequencing of ordered list items. This can come in handy when you need to break up an ol element with some running text that is not part of the list.

Even though the value assigned to this attribute is a number, it does not affect the type setting. For example, setting value to 3 when type is A means that the sequence starts from that li element with the letter C.

Example

<li value="3">Insert Tab C into Slot M. Tighten with a wingnut.</li>

Value

Any positive integer.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).value  
<link>NN 4 IE 3 HTML all

<link>HTML End Tag: Forbidden
Unlike the a element (informally called a link when it contains an href attribute), the link element belongs inside the head element and is a place for the document to establish links with external documents, such as style sheet definition files or font definition files. By and large, browsers have yet to exploit the intended powers of this element. A variety of attributes let the author establish relationships between the current document and potentially related documents. In theory, some of these relationships could be rendered as part of the document or browser controls. Implementations of this element as of Version 6 of Navigator and Internet Explorer are rather weak compared to the HTML 4 specification. At the same time, several attributes (and all event handlers) defined in the HTML 4 specification and listed among shared items at the beginning of this chapter aren't very helpful because they more typically apply to elements that actually display content on the page. No explicit document content is rendered as a result of the link element. Some of those attributes may be associated with the link element by mistake or merely for consistency.

Example

<head>
<title>Section 3</title>
<link rev="Prev" href="sect2.html">
<link rel="Next" href="sect4.html">
<link rel="stylesheet" type="text/css" href="myStyles.css">
</head>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

charset

href

hreflang

media

rel

rev

src

target

type

 

Element-Specific Event Handler Attributes

None.

charsetNN 6 IE n/a HTML 4

charset="characterSet"Optional
Character encoding of the content at the other end of the link.

Example

<link charset="csISO5427Cyrillic" href="moscow.html">

Value

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

Default

Determined by browser.

hrefNN 6 IE 3 HTML all

href="URI"Required
The URI of the document associated with the link (also known in W3C jargon as the destination, even though there is no page navigation involved). Navigator 4 uses the src attribute for this purpose. Include both attributes for a backward-compatible implementation.

Example

<link rel="Prev" href="sect2.html" src="sect2.html">

Value

Any valid URI, including complete and relative URLs.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).href
hreflangNN 6 IE 6 HTML 4

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

Example

<link hreflang="HI" href="hindi/Chap3.html">

Value

Case-insensitive language code.

Default

Browser default.

Object Model Reference

[window.]document.getElementById(elementID).hrefLang
mediaNN 6 IE 4 HTML 4

media="descriptorList"Optional
Sets the intended output device for the content of the destination document pointed to by the href attribute. The media attribute looks forward to the day when browsers are able to tailor content to specific kinds of devices such as pocket computers, text-to-speech digitizers, or fuzzy television sets. The HTML 4 specification defines a number of constant values for anticipated devices, but the list is open-ended, allowing future browsers to tailor output to yet other kinds of media and devices.

Example

<link rel="Glossary" href="gloss.html" media="screen, tv, handheld">

Value

Constant values. Multiple values can be grouped together in a comma-delimited list within a quoted string. Values defined in HTML 4 are all | aura | braille | handheld | print | projection | screen | tty | tv . IE 4 and later claims support for all | print | screen.

Default

screen

Object Model Reference

[window.]document.getElementById(elementID).media
relNN 4 IE 3 HTML 3.2

rel="linkTypes"Optional
Defines the relationship between the current element and the destination of the link. The HTML 4 recommendation defines several link types; it is up to the browser to determine how to employ the value. The element must include an href attribute for the rel attribute to be applied.

Example

<link rel="Next" href="sect6.html">

Value

Case-insensitive, space-delimited list of standard link types applicable to the document and browser. HTML 4-sanctioned link types are:

alternate

appendix

bookmark

chapter

contents

copyright

glossary

help

index

next

prev

section

start

stylesheet

subsection

IE 4 and later and Navigator 4 and later use stylesheet to link in an external CSS file. Navigator 4 recognizes stylesheet and fontdef. In IE 5 and later for Windows, you can also use the value shortcut icon (with the space) and assign a URL to a custom icon file (.ico) on your server so that your icon appears in the Favorites list if the user chooses to add the page to his list.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).rel
revNN 6 IE 4 HTML 4

rev="linkTypes"Optional
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. Version 6 browsers provide no practical functionality for this attribute.

Example

<link rev="Prev" href="sect4.html">

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).rev
srcNN 4 IE n/a HTML n/a

src="URL"Optional
The URL of the destination of a link. Internet Explorer 4 and later, Netscape 6, and HTML 4 use the href attribute for this purpose. Include both attributes for a cross-browser implementation.

Example

<link rel="fontdef" src="fonts/garamond.pfr" href="fonts/garamond.pfr">

Value

Any valid URL, including complete and relative URLs.

Default

None.

targetNN 6 IE 4 HTML 4

target="windowOrFrameName"Optional
Presumably, the target attribute is provided in HTML 4 as a way to specify the destination for the display of a document at the other end of the href attribute of the link element.

Value

Identifier when the frame or window name has been assigned via the target element's name attribute. Four reserved target names act as constants:

_blank
Browser creates a new window for the destination document.

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

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

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

IE for Windows implements two other values: _search (IE 5 and later) and _media (IE 6). These supposedly direct the browser to load linked content into the browser's Search pane and Media Bars, respectively. Precise implementation details are not yet clear.

Default

_self

Object Model Reference

[window.]document.getElementById(elementID).target
typeNN 4 IE 4 HTML 4

type="MIMEType"Optional
An advisory about the content type of the destination document or resource. In practice, this attribute has been used so far to prepare the browser for the style sheet type being linked to.

Example

<link rel="stylesheet" type="text/css" href="styles/mainStyle.html">

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).type 
<listing>NN all IE all HTML <4

<listing>...</listing>HTML End Tag: Required
The listing element displays its content in a monospace font as a block element, as in computer code listings rendered 132 columns wide. In most browsers, the font size is also reduced from the default size. Browsers observe carriage returns and other whitespace in element content. This element has been long deprecated in HTML and has even been removed from the HTML 4.0 specification. You are encouraged to use the pre element instead.

Example

<listing>
&lt;script language="JavaScript"&gt;
   document.write("Hello, world.")
&lt;/script&gt;
</listing>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None

<map>NN all IE all HTML 3.2

<map>...</map>HTML End Tag: Required
A map element is a container for area elements that define the location and links of hotspots of client-side image maps. The primary purpose of the map element is to associate an identifier (the name attribute) that the usemap attribute points to when turning an img element into a client-side image map. Most other attributes are style-related and may be applied to the map element so that they are inherited by elements nested within.

Example

<img src="images/logo.gif" alt="Scroll to the bottom for navigation links."
height="300" width="250" usemap="#navigation">
<map name="navigation">
<area shape="rect" coords="0,0,100,100" href="products.html">
<area shape="rect" coords="0,100,300,100" href="support.html">
</map>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

name

Element-Specific Event Handler Attributes

None.

nameNN all IE all HTML 3.2

name="identifier"Required
The identifier to which the usemap attribute of an img element points. Because the usemap attribute is actually a URL type, its value resembles that of a link to an anchor: the name is preceded by a hash symbol (only in the usemap attribute). Despite XHTML's preference for id attributes over name attributes, browsers continue to rely on the name attribute as the connection between an image and an area map. Strict HTML 4 and XHTML DTDs continue to validate the name attribute.

Example

<map name="navigation"> ...</map>

Value

Case-sensitive unique identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).name   
<marquee>NN n/a IE 3 HTML n/a

<marquee>...</marquee>HTML End Tag: Optional
The marquee element is unique to Internet Explorer. It displays HTML content in a scrolling region on the page. Scrolled content goes between the start and end tags. There is no corresponding element in Navigator, although the effect can be duplicated in a cross-browser fashion with a Java applet or more cumbersomely through Dynamic HTML.

Example

<marquee behavior="slide" direction="left" width="250" bgcolor="white">
Check out our monthly specials.
</marquee>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

behavior

bgcolor

datafld

dataformatas

datasrc

direction

height

hspace

loop

scrollamount

scrolldelay

truespeed

vspace

width

 

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbounce

n/a

4

n/a

onfinish

n/a

4

n/a

onstart

n/a

4

n/a

behaviorNN n/a IE 3 HTML n/a

behavior="motionType"Optional
Sets the motion of the content within the rectangular space reserved for the marquee element. You have a choice of three motion types.

Example

<marquee behavior="slide" direction="left" width="250" bgcolor="white">
...</marquee>

Value

One of the case-insensitive marquee element motion types:

alternate
Content alternates between marching left and right.

scroll
Content scrolls (according to the direction attribute) into view and out of view before starting again.

slide
Content scrolls (according to the direction attribute) into view, stops at the end of its run, blanks, and then starts again.

Default

scroll

Object Model Reference

[window.]document.getElementById(elementID).behavior
bgcolorNN n/a IE 3 HTML n/a

bgcolor="colorTripletOrName"Optional
Establishes a fill color (behind the text and other content) for the rectangular space reserved for the marquee element.

Example

<marquee behavior="slide" direction="left" width="250" bgcolor="white">
...</marquee>

Value

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

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor
datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
Used with IE data binding to associate a remote data source column name with the content scrolled by the marquee element. The data source column must be either plain text or HTML (see dataformatas). A datasrc attribute must also be set for the marquee element. Works only with text file data sources in IE 5/Mac.

Example

<marquee behavior="slide" direction="left" width="200" 
datasrc="DBSRC3" datafld="news" dataformatas="HTML"></marquee>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

IE
dataformatasNN n/a IE 4 HTML n/a

dataformatas="dataType"Optional
Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. This attribute setting depends entirely on how the data source is constructed. Works only with text file data sources in IE 5/Mac.

Example

<marquee behavior="slide" direction="left" width=200 
datasrc="DBSRC3" datafld="news" dataformatas="HTML"></marquee>

Value

Constant values: text | html.

Default

text

Object Model Reference

[window.]document.getElementById(elementID).dataFormatAs
datasrcNN n/a IE 4 HTML n/a

datasrc="dataSourceName"Optional
Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. Works only with text file data sources in IE 5/Mac.

Example

<marquee behavior="slide" direction="left" width="200" 
datasrc="DBSRC3" datafld="news" dataformatas="HTML"></marquee>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc
directionNN n/a IE 3 HTML n/a

direction="scrollDirection"Optional
A marquee element's content may scroll in one of four directions. For optimum readability in languages written left to right, it is easier to grasp the content when it scrolls either to the left or downward.

Example

<marquee behavior="slide" direction="left" width="200">...</marquee>

Value

Four possible directions: down | left | right | up.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).direction
height, widthNN n/a IE 3 HTML n/a

Optional
height="length"
width="length"

A marquee element renders itself as a rectangular space on the page. You can override the default size of this rectangle by assigning values to the height and width attributes. The default value for height is determined by the font size of the largest font assigned to content in the marquee. Default width is set to 100% of the width of the next outermost container (usually the document body). The width defines how much space is used at one time or another by horizontally scrolling content. When the marquee is embedded within a td element that lets the browser determine the table cell's calculated width, you must set the width of the marquee element or risk having the browser set it to 1, making the content unreadable.

If you want extra padding around the space, see the hspace and vspace attributes.

Example

<marquee behavior="slide" direction="left" height="20" width="200">
...
</marquee>

Value

Any length value in pixels or percentage of available space.

Default

A width of 100%; a height of 12 pixels.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width
hspace, vspaceNN n/a IE 3 HTML n/a

Optional
hspace="pixelCount"
vspace="pixelCount"

Internet Explorer provides attributes for setting padding around a marquee element. The hspace attribute controls padding along the left and right edges (horizontal padding), whereas the vspace attribute controls padding along the top and bottom edges (vertical padding). Adding such padding provides an empty cushion around the marquee's rectangle. As an alternative, you can specify the various margin style sheet settings, especially if you want to open space along only one edge.

Example

<marquee behavior="slide" direction="left" height="20" width="200" 
hspace="10" vspace="15">...</marquee>

Value

Any positive integer.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).hspace
[window.]document.getElementById(elementID).vspace
loopNN n/a IE 3 HTML n/a

loop="count"Optional
Sets the number of times the marquee element scrolls its content. After the final scroll, the content remains in a fixed position. Constant animation can sometimes be distracting to page visitors, so if you have the marquee turn itself off after a few scrolls, you may be doing your visitors a favor.

Example

<marquee behavior="slide" direction="left" height="20" width="200" loop="3">
...</marquee>

Value

Any positive integer if you want the scrolling to stop. Otherwise, set the value to -1 or infinite.

Default

-1

Object Model Reference

[window.]document.getElementById(elementID).loop
scrollamountNN n/a IE 3 HTML n/a

scrollamount="pixelCount"Optional
marquee content looks animated by virtue of the browser clearing and redrawing its content at a location offset from the previous location (in a direction set by the direction attribute). You can make the scrolling appear faster by increasing the amount of space between positions of each drawing of the content; conversely, you can slow down the scrolling by decreasing the space. See also scrolldelay.

Example

<marquee behavior="slide" direction="left" height="20" width="200" scrollamount="2">
...</marquee>

Value

Any positive integer.

Default

6

Object Model Reference

[window.]document.getElementById(elementID).scrollAmount
scrolldelayNN n/a IE 3 HTML n/a

scrolldelay="milliseconds"Optional
Apparent scrolling speed can be influenced by the frequency of the redrawing of the content as its position shifts with each redraw (see scrollamount). Increasing the scrolldelay value slows down the scroll speed, whereas decreasing the value makes the scrolling go faster. Be aware that on slower computers, you can reach a value at which no increase of speed is discernible no matter how small you make the scrolldelay value (see truespeed).

Example

<marquee behavior="slide" direction="left" height="20" width="200" scrolldelay="100">
...</marquee>

Value

Any positive integer representing the number of milliseconds between content redraws.

Default

85 (Windows 95); 90 (Macintosh).

Object Model Reference

[window.]document.getElementById(elementID).scrollDelay
truespeedNN n/a IE 4 HTML n/a

truespeedOptional
The marquee element includes a built-in speed bump to prevent scrolling from being accidentally specified as too fast for visitors to read. If you genuinely intend the content to scroll very fast, you can include the truespeed attribute to tell the browser to honor scrolldelay settings below 60 milliseconds.

Example

<marquee behavior="slide" direction="left" height="20" width="200" 
scrolldelay="45" truespeed>...</marquee>

Value

The presence of this attribute sets the value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).trueSpeed
vspace

See hspace.

width

See height.

<menu>NN all IE all HTML all

<menu>...</menu>HTML End Tag: Required
The original idea of the menu element was to allow browsers to generate single-column lists of items. Virtually every browser, however, treats the menu element the same as a ul element to present an unordered single column list of items (usually preceded by bullets). The menu element is deprecated in HTML 4. You should be using the ul element for it in any case, because you are assured backward compatibility and forward compatibility should this element ever disappear from the browser landscape. Everything said here also applies to the deprecated dir element.

Example

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

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

compact

Element-Specific Event Handler Attributes

None.

compactNN 6 IE 6 HTML 3.2

compactOptional
A Boolean attribute originally designed to let browsers render the list in a more compact style than normal (smaller line spacing between items).

Example

<menu compact>...</menu>

Value

The presence of this attribute makes its value true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).compact
<meta>NN all IE all HTML all

<meta>HTML End Tag: Forbidden
A meta element conveys hidden information about the document. Some browsers respond to this element to derive header information that may be important to the document but is not sent by the server in response to the request for the document. The element is also used to embed document information that some search engines use for indexing and categorizing documents on the World Wide Web.

More than one meta element may be included in a document, and all meta elements belong nested inside the head element. The specific purpose of each meta element is defined by its attributes. Typically, a meta element reduces to a name/value pair that is of use to either the server or the client. For example, most browsers recognize attribute settings that force the page to reload (or redirect to another page) after a timed delay. This would be useful in a page whose content is updated minute-by-minute, because the browser keeps reloading the latest page as often as indicated in the meta element.

Several other elements and attributes in HTML 4 contain the same kind of metadata that might otherwise be located in meta elements. Use the avenue that is best suited to your intended server and browser environments. See also the address, del, ins, link, and title elements, as well as the profile attribute of the head element.

Much mythology surrounds meta element usage. Some attribute values affect only some browsers (controlling the browser cache, for example), and not all search engine bots respond to meta tag attribute values the same way (if at all). At the same time, commonly-used powers, such as refresh, are frowned upon by the standards. There are no mandated standards for acceptable values, but the W3C validators for HTML 4 and XHTML point toward acceptance of the character set value shown in the example below.

Example

<head profile="http://www.giantco.com/profiles/common">
    <meta name="Author" content="Jane Smith">
    <meta name="keywords" content="benefits,insurance,plan">
    <meta http-equiv="refresh" 
    content="1;URL=http://www.giantco.com/truindex.html">
    <meta http-equiv="Content-Type" content="text/html; 
    charset=ISO-8859-5">
</head>

Element-Specific Attributes

content

http-equiv

name

scheme

Element-Specific Event Handler Attributes

None.

contentNN all IE all HTML all

content="valueString"Required
The equivalent of the value of a name/value pair. The attribute is usually accompanied by either a name or http-equiv attribute, either of which act as the name portion of the name/value pair. Specific values of the content attribute vary with the value of the name or http-equiv attribute. Sometimes, the content attribute value contains multiple values. In such cases, the values are delimited by commas, semicolons, or whatever delimiter the browser expects for that content. Some of these values may be name/value pairs in their own right, such as the content for a refresh meta element. The first value is a number representing the number of seconds delay before loading another document; the second value indicates a URL of the document to load after the delay expires.

Example

<meta http-equiv="refresh" 
content="2;URL=http://www.giantco.com/basicindex.html">

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).content
http-equivNN all IE all HTML all

http-equiv="identifier"Optional
When a server sends a document to the client with the HTTP protocol, a number of HTTP header fields are sent along, primarily as directives to the client about the content on its way. meta elements can add to those HTTP headers when the http-equiv attribute is assigned to a document. Browsers convert the http-equiv and content attribute values into the HTTP response header format of "name: value" and treat them as if they came directly from the server.

Web standards define a long list of HTTP headers (see Webmaster in a Nutshell by Stephen Spainhour and Valerie Quercia, published by O'Reilly & Associates), but some of the more common values are shown in the following examples. Not all browsers respond to all header types, and some browsers respond to browser-specific headers (e.g., the IE 6 MSTHEMECOMPATIBLE header). You can have either the http-equiv or name attribute in a meta element, but not both.

Example

<meta http-equiv="refresh" 
content="1,http://www.giantco.com/truindex.html">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
<meta http-equiv="expires" content="Sun, 15 Jan 1998 17:38:00 GMT">

Value

Any string identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).httpEquiv
nameNN all IE all HTML all

name="identifier"Optional
An identifier for the name/value pair that constitutes the meta element. Typically, the attribute value is a plain-language term that denotes the purpose of the meta element, such as "author" or "keywords". You can assign a value to either the name or http-equiv attribute, but not both, in the same meta element.

Example

<meta name="Author" content="Jane Smith">
<meta name="keywords" content="benefits,insurance,plan">

Value

Any string identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).name
schemeNN 6 IE 6 HTML 4

scheme="identifier"Optional
Provides one more organizational layer to metadata supplied with a document. For example, a university campus with several libraries might generate documents associated with each of the libraries. Assuming that a browser is equipped to interpret metadata about this, one approach at assembling the tags is to create a separate name attribute value for each library: name="law", name="main", name="engineering", and so on. But it may also be necessary to associate these name values with a specific university. The scheme attribute could be called into service to align the metadata with a particular university: scheme="Harvard". Now, other university library systems could use the same organization of name attributes, but the scheme attribute clearly associates a given meta element with a specific university and library. Again, this assumes that the browser is empowered to do something special with this metaknowledge.

Example

<meta scheme="Chicago" name="classicalFM" content="98.7">

Value

Any string identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).scheme
<multicol>NN <6 IE n/a HTML n/a

<multicol>...</multicol>HTML End Tag: Required
A Navigator-specific (Versions 3 and 4) element that renders its content in any number of evenly spaced flowing columns on the page. The way this element flows content might remind you of a desktop publishing program that automatically flows long content into column space that has been defined for the page. There is no equivalent for this element in HTML or Internet Explorer, but a CSS-related proposal for a multicolumn layout attribute may find its way into CSS3. None of these attributes are built into Version 6 browsers.

Example

<multicol cols="2" gutter="20" width="500">
LongFlowingHTMLContent
</multicol>

Element-Specific Attributes

cols

gutter

width

Element-Specific Event Handler Attributes

None.

colsNN <6 IE n/a HTML n/a

cols="columnCount"Required
Defines the number of columns across which the browser distributes and renders the content of the element. For a given width of the content, the browser does its best to make each column the same length. The proposed CSS equivalent attribute is column-number.

Example

<multicol cols="2" gutter="20" width="500">
LongFlowingHTMLContent
</multicol>

Value

Any positive integer.

Default

1

gutterNN <6 IE n/a HTML n/a

gutter="pixelCount"Optional
Specifies the number of pixels to be placed between columns. The browser then calculates the width of the content columns by subtracting all the gutters from the total available width. The proposed CSS equivalent attribute is column-gap.

Example

<multicol cols="2" gutter="20" width="500">
LongFlowingHTMLContent
</multicol>

Value

Any positive integer.

Default

10

widthNN <6 IE n/a HTML n/a

width="elementWidth"Optional
Defines the total width of the columns plus gutters. You can specify the width in pixels or as a percentage of the width of the next outer container (usually the document body). The proposed CSS equivalent attribute is the existing width attribute.

Example

<multicol cols="2" gutter="20" width="500">
LongFlowingHTMLContent
</multicol>

Value

Any length value in pixels or percentage of available space.

Default

100%

<nextid>NN n/a IE all HTML <2

<nextid>HTML End Tag: Prohibited
The nextid element was at one time intended to assist document-editing application. It went inside a document's head element. Deprecated in HTML 2.0, it is no longer used.

<nobr>NN all IE all HTML n/a

<nobr>...</nobr>HTML End Tag: Required
The nobr element instructs the browser to render its content without wrapping the text to the next line at the right edge of the window or container. Even if there are carriage returns in the source code for the element's content, the browser flows the text as one line. Although this might seem convenient in circumstances involving careful layout of pages, it may mean the user has to scroll horizontally to view the text—not something most users like to do. Despite the longevity of the nobr element in commercial browsers, it has never been mentioned in formal HTML recommendations.

Example

<nobr>
Now is the time for all good men to 
come to the aid of their country, even if
the text forces them to scroll horizontally.
</nobr>

Object Model Reference

[window.]document.getElementById(elementID)  

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<noembed>NN 2 IE n/a HTML n/a

<noembed>...</noembed>HTML End Tag: Required
Navigator provides a tag for isolating advisory content that displays in browsers incapable of working with plugins. All content between the start and end tags of the noembed element is not rendered in Navigator (or Internet Explorer) but is rendered in other browsers (which ignore the tag but not the content). There are no attributes for this element.

Example

<embed name="jukebox" src="jazz.aif" height="100" width="200"></embed>
<noembed>
To play the music associated with this page, you need a modern graphical browser.
</noembed>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<noframes>NN 2 IE 3 HTML 4

<noframes>...</noframes>HTML End Tag: Required
The noframes element contains HTML that is rendered by browsers incapable of displaying frames. Browsers that are capable of displaying frames ignore the noframes element and all content it contains. Content for this element should instruct the user about using frames or perhaps offer a link to a frameless version of the page. The most common location for the noframes element is inside a frameset element. The HTML 4 specification, however, sees nothing wrong with embedding the element in a rendered document, if it makes sense for your application. It could be useful if your page employs an iframe element, and you want browsers not equipped for that element to alert users about what they're missing.

All standard attributes of the noframes element were added to support Cascading Style Sheets. This seems odd, because it would seem very unlikely that a browser would support CSS but not frames (with the exception of Navigator 4's lack of iframe support).

Example

<frameset cols="150,*">
    <frame name="navbar" src="nav.html">
    <frame name="main" src="page1.html">
    <noframes>Your browser does not support frames. 
    Click <a href="noFramesIndex.html">here</a> for a frameless version.
    </noframes>
</frameset>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<nolayer>NN |4| IE n/a HTML n/a

<nolayer>...</nolayer>HTML End Tag: Required
Navigator 4 provides a tag for isolating advisory content that displays in browsers that don't recognize the layer element. All content between the start and end tags of the nolayer element is not rendered in Navigator 4 but is rendered in other browsers (which ignore the tag but not the content). You can place the nolayer element anywhere you want, but be aware that it won't be positioned like the layer element is intended to be. Netscape 6 (a nonlayer browser) renders the nolayer element's content.

There are no attributes for this element. If you attempt to set style sheet rules for the nolayer element, they are ignored by browsers such as Internet Explorer. You can, however, wrap the nolayer element inside a div or span element to associate a style sheet rule with the advisory text.

Example

<layer bgcolor="yellow" src="instrux.html" width=200 height=300></layer>
<nolayer>
You are not seeing some content that requires Netscape Navigator 4 to view.
</nolayer>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<noscript>NN 3 IE 4 HTML 4

<noscript>...</noscript>HTML End Tag: Required
The noscript element is intended to display content when a browser is not set to run the scripts embedded in the current document. In practice, the element is observed only starting with Navigator 3 and Internet Explorer 4. When a user disables scripting in a browser, the noscript element's content is rendered wherever it falls in the source code. For older browsers, and those that don't support scripting, the noscript element is ignored, which means that its content is rendered within the next outermost container's context. Going forward, the HTML 4.0 specification recommends that browsers also render the noscript element's content when scripts earlier in the document are of a language type not supported or enabled in the browser. Also, if an HTML 4-compatible browser should be developed that lacks scripting altogether, it, too, should render the noscript element's contents.

All standard attributes of the noscript element were added to support Cascading Style Sheets, internationalization, and events for HTML 4.

Example

<noscript>
This document contains programming that requires a scriptable browser, such
as Microsoft Internet Explorer or Netscape Navigator. You may not have full
access to this page's powers at this time.
</noscript>

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<object>NN 4 IE 3 HTML 4

<object>...</object>HTML End Tag: Required
The object element supplies the browser with information to load and render data types that are not natively supported by the browser. If the browser must load some external program (a Java applet, a plugin, or some other helper), the information about the content that is to be rendered is contained by the object element, its attributes, and optionally, associated param elements nested inside of it. Although today's browsers recognize elements such as applet and embed, the HTML specification indicates that the trend is to combine all of this into the object element.

The HTML 4 specification allows nesting of object elements to give the browser a chance to load alternate content if no plugin or other necessary content aids are available in the browser. Essentially, the browser should be able to walk through nested object elements until it finds one it can handle. For example, the outer object element may try to load an MPEG2 video; if no player is available, the browser looks for the next nested object, which is a JPEG still image from the video; if the browser is not a graphical browser, it would render some straight HTML that is the most nested item (although not as an object element) within the hierarchy of nested objects:

<div>
<object data="proddemo.mpeg" type="application/mpeg">
    <object data="prodStill.jpg" type="image/jpeg">
        The all-new Widget 3000!
    </object>
</object>
</div>

To determine which attributes apply to a particular content type or object and what their values look like, you have to rely on documentation from the supplier of the object or plugin. That same documentation should let you know whether the functionality is available across browser brands and operating systems.

Example

<object id="earth" classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D">
<param name="srcStart" value="images/earth0.gif">
<param name="frameCount" value="12">
<param name="loop" value="-1"
<param name="fps" value="10">
</object>

Element-Specific Attributes

align

alt

archive

border

classid

code

codebase

codetype

data

declare

height

hspace

name

standby

type

usemap

vspace

width

   

Element-Specific Event Handler Attributes

None.

alignNN 4 IE 3 HTML 4

align="alignmentConstant"Optional
Determines how the rectangle of the object element aligns within the context of surrounding content. See the discussion about alignment of elements with respect to content outside an element's box in the
Section 8.1.5 earlier in this chapter.

Example

<object ... align="baseline"></object>

Value

Constant value. See Section 8.1.5.

Default

bottom

Object Model Reference

[window.]document.getElementById(elementID).align
archiveNN 6 IE 6 HTML 4

archive="URIList"Optional
A space-delimited list of URIs of files that support the loading and running of the object element. By explicitly specifying the files in the archive attribute, the browser doesn't have to wait for the supporting files to be called by the content running in the object element. Instead, the supporting files can be downloaded simultaneously with the primary content. The archive attribute may also include URIs assigned to the classid or data attributes, but one of these two attributes still needs to point to the primary content URI. Version 6 browsers provide no particular functionality for this attribute.

Example

<object ... archive="/images/anim3.gif/images/anim4.gif"></object>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).archive
borderNN 6 IE 6 HTML 4

border="pixels"Optional
The thickness of a border around the object element. The attribute is deprecated in HTML 4 in favor of style sheet borders. If you use the object element to load an image for a client-side image map, you can set the border attribute to zero to eliminate the typical link border in IE 5/Mac and Netscape 6 (see usemap later in this section).

Example

<object ... border="4"></object>

Value

Any integer pixel value.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).bprder
classidNN 4 IE 3 HTML 4

classid="URL"Optional
The URL of the object's implementation. This attribute typically directs the browser to load a program, an applet, or a plugin class file. In Internet Explorer, the URL can point to the CLSID directory that stores all of the IDs for registered ActiveX controls, such as DirectAnimation. You must obtain the classid value from the supplier of an ActiveX control (or root around the Registry with Regedit if you know what you're looking for). In Navigator 4, the Java Archive (JAR) Installation Manager attempts to install a plugin from the classid URL if the plugin is not installed for data specified in the data attribute. Eventually, this attribute may be used to load Java applets (IE 4 includes a code attribute to handle this now), but through Version 6 of both browsers, Java applets are not yet supported in this fashion.

Example

<object id="earth" classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D"></object>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.elementID.classid
codeNN n/a IE 4 HTML n/a

code="fileName.class"Optional
Internet Explorer uses the code attribute to allow the object element to perform the same job as an applet element, using the same kind of attributes. The code attribute value is the name of the Java applet class file. If the class file is in a directory other than the document, the path to the directory must be assigned to the codebase attribute, just like in the applet element. Parameters are passed to applets via param elements, just like the ones nested inside applet elements. IE appears to preserve the classid attribute for referencing ActiveX controls only.

Example

<object code="fileReader.class" codebase="classes"></object>

Value

Applet class filename.

Default

None.

Object Model Reference

[window.]document.elementID.code
codebaseNN 4 IE 3 HTML 4

codebase="path"Optional
Path to the directory holding the class file designated in either the code or classid attribute. The codebase attribute does not name the class file, just the path. You can make this attribute a complete URL to the directory, but don't try to access a codebase outside of the domain of the current document.

Example

<object code="fileReader.class" codebase="classes"></object>

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).codeBase
codetypeNN 6 IE 3 HTML 4

codetype="MIMEType"Optional
An advisory about the content type of the object referred to by the classid attribute. A browser might use this information to assist in preparing support for a resource requiring a multimedia player or plugin. If the codetype attribute is missing, the browser looks next for the type attribute setting (although it is normally associated with content linked by the data attribute URL). If both attributes are missing, the browser gets the content type information from the resource as it downloads.

Example

<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D" 
codetype="application/x-crossword"></object>

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).codeType
dataNN 4 IE 3 HTML 4

data="URL"Optional
URL of a file containing data for the object element (as distinguished from the object itself). For data with a content type that can be opened (and viewed or played) with any compatible object or plugin, the data and type attributes are generally sufficient to launch the plugin and get the content loaded. But if the content requires a very specific plugin or ActiveX control, you should include a classid attribute that points to the object's implementation as well. In that case, you can specify the content type with either the codetype or type attributes. Relative URLs are calculated relative to the codebase attribute, if one is assigned; otherwise the URL is relative to the document's URL.

Example

<object data="proddemo.mpeg" type="application/mpeg"></object>

Value

A complete or relative URL.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).data
declareNN 6 IE 6 HTML 4

declareOptional
The presence of the declare attribute instructs the browser to regard the current object element as a declaration only, without instantiating the object. A browser may use this opportunity to precache data that does not require the object being loaded or run. Another object element pointing to the same classid and/or data attribute values, but without the declare attribute, gets the object running. Version 6 browsers provide no particular functionality for this attribute.

Example

<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D" declare></object>

Value

The presence of the attribute sets it to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).declare
height, widthNN 4 IE 3 HTML 4

Optional
height="length"
width="length"

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

When an object is scriptable, and you don't want its controller to appear, you can set its dimensions to zero or one. Place the tag at the end of the document.

Example

<object data="blues.aif" height="150" width="250"></object>

Value

Positive integer values (optionally quoted) or percentage values (quoted).

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width
hspace, vspaceNN 6 IE 3 HTML 4

Optional
hspace="pixelCount"
vspace="pixelCount"

A margin that acts as whitespace padding around the visual content of the object element's rectangular space. hspace establishes a margin on the left and right sides of the rectangle; vspace establishes a margin on the top and bottom sides of the rectangle.

Example

<object data="blues.aif" height="150" width="250" vspace="10" hspace="10"></object>

Value

Integer representing the number of pixels for the width of the margin on the relevant sides of the object element's rectangle.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).hspace
[window.]document.getElementById(elementID).vspace
nameNN 6 IE 6 HTML 4

name="elementIdentifier"Optional
The HTML 4 specification provides for a name attribute of the object element for instances in which the object is part of a form that is submitted to the server. The name attribute in this case performs the same function as the name attribute of an input element; it acts as a label for some data being submitted. The code that is loaded into the object element must be programmed to return a value if it is to be submitted via an HTML form. Through Version 6, mainstream browsers list support for this attribute for compatibility claims, but do not respond to its value. Use the id attribute to assign an identifier that scripts use to reference the object.

Example

<object name="embedded" classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
height="150" width="250"></object>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).name
standbyNN 6 IE 6 HTML 4

standby="HTMLText"Optional
HTML content to be displayed while the object is loading. This attribute has not been implemented in Version 6 browsers (although it works in IE 5/Mac); presumably the message is to be displayed in the rectangular region intended for the object element, just as the alt message appears in an img element space while the image loads.

Example

<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
height="150" width="250" standby="Loading movie..."></object>

Value

Any HTML content.

Default

None.

typeNN 4 IE 3 HTML 4

type="MIMEType"Required
An advisory about the content type of the data referred to by the data attribute. A browser might use this information to assist in preparing support for a resource requiring a multimedia player or plugin. The data element first looks to the codetype attribute for this information. But if the codetype attribute is missing, the browser looks next for the type attribute setting. If both attributes are missing, the browser tries to get the content type information from the resource as it downloads. To be on the safe side, always specifiy a MIME type for image data (e.g., image/jpeg or image/gif).

Example

<object data="movies/prodDemo.mpeg" type="application/mpeg"></object>

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).type
usemapNN 6 IE 6 HTML 4

usemap="mapURL"Optional
The HTML 4 specification lists the usemap attribute for an object element, thus offering the possibility of using the object element to load an image that gets used as an image map. Version 6 browsers (and IE 5/Mac) provide this capability.

Assign the URI of the image to the data attribute, and assign a MIME type for the image to the type property. Create a separate map element with one or more nested area elements, and assign the map element's name identifier to the object element's usemap attribute. IE/Windows pads the image and adds scrollbars, so you may not achieve successful cross-browser deployment. Netscape 6 and IE 5/Mac essentially duplicate the traditional client-side image map functionality through the object element. They also display the typical link border around the image unless you also set the border attribute to zero.

Example

<object data="navbar.jpg" type="image/jpeg" alt="Navigation Bar" usemap="#navbarMap" 
border="0"></object>

Value

See the usemap attribute of the img element.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).useMap
vspace

See hspace.

width

See height.

<ol>NN all IE all HTML all

<ol>...</ol>HTML End Tag: Required
The ol element is a container for an ordered list of items. An "ordered list" means that the items are rendered with a leading sequence number or letter (depending on the type attribute setting or list-style-type style sheet attribute setting). Content for each list item is defined by a nested li element. If you apply a style sheet rule to an ol element, the style is inherited by the nested li elements.

Example

<ol>
    <li>Choose Open from the File menu.</li>
    <li>Locate the file you wish to edit, and click on the filename.</li>
    <li>Click the Open button.</li>
</ol>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

compact

start

type

Element-Specific Event Handler Attributes

None.

compactNN 6 IE4 HTML 3.2

compactOptional
A Boolean attribute originally designed to let browsers render the list in a more compact style than normal (smaller line spacing between items). Although listed as a supported attribute for HTML compatibility, the compact attribute has no effect on mainstream browsers. Use style sheets to control element sizes and line spacing.

Example

<ol compact>...</ol>

Value

The presence of this attribute makes its value true.

Default

false

startNN all IE all HTML all

start="number"Optional
Assigns a custom starting number for the sequence of items in the ol element. This is convenient when a sequence of items must be disturbed by running body text. Although the value is a number, the corresponding Arabic numeral, Roman numeral, or alphabet letter is used to render the value.

Example

<ol start="5"> ...</ol>

Value

Any positive integer.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).start
typeNN all IE all HTML 3.2

type="labelType"Optional
The type attribute provides some flexibility in how the sequence number is displayed in the browser. For an ordered list, the choices are among letters (uppercase or lowercase), Roman numerals (uppercase or lowercase), or Arabic numerals. The type attribute is deprecated in HTML 4 in favor of the list-style-type style sheet attribute.

Example

<ol type="a">...</ol>

Value

Possible values are A | a | I | i | 1. Sequencing is performed automatically as follows.

Type

Example

A

A, B, C, ...

a

a, b, c, ...

I

I, II, III, ...

i

i, ii, iii, ...

1

1, 2, 3, ...

Default

1

Object Model Reference

[window.]document.getElementById(elementID).type   
<optgroup>NN 6 IE 5(Mac)/6(Win) HTML 4

<optgroup>...</optgroup>HTML End Tag: Required
The optgroup element is a container for option elements within a select element. Each optgroup can represent a subgroup of options within the total list of select elements. In IE 6/Windows and Netscape 6, the label text appears in a bold-italic font and is not selectable. Regular option element text is then listed below the label and is indented. In IE 5/Mac, the presence of optgroup elements turns a popup menu into a two-level hierarchical menu.

Example

<select name="carCos">
    <optgroup label="American">
        <option value="General Motors">General Motors</option>
        <option value="Ford">Ford Motor Company</option>
        <option value="Chrysler">DaimlerChrysler</option>
    </optgroup>
    <optgroup label="Japanese">
        <option value="Toyota">Toyota</option>
        <option value="Honda">Honda</option>
        <option value="Nissan">Nissan</option>
    </optgroup>
</select>

Object Model Reference

[window.]document.getElementById(elementID) 

Element-Specific Attributes

disabled

label

Element-Specific Event Handler Attributes

None.

disabledNN 6 IE 5/6 HTML 4

disabledOptional
The presence of this attribute disables the optgroup element and its nested option elements. Other optgroup elements remain enabled.

Example

<optgroup label="Engineering" disabled>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).disabled
labelNN 6 IE 5/6 HTML 4

label="labelText"Required
The text of the select element entry for the optgroup is defined by the label attribute. This is plain text, not HTML, and the user cannot select this text from the list.

Example

<optgroup label="Engineering" disabled>

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).label
<option>NN all IE all HTML all

<option>...</option>HTML End Tag: Optional
The option element defines an item that appears in a select element listing, whether the listing is in a pop-up menu or scrolling list. option elements associated with a select element must be nested within the start and end tags of the select element.

select elements supply name/value pairs when the element is submitted as part of a form element. Typically, the name attribute of the select element and the value attribute of the selected option are submitted as the name/value pair. Therefore, it is important to assign a meaningful value to the value attribute of each option element in a select list. You can use the value attribute to disguise user-unfriendly (but server- or script-friendly) values from the user, while presenting a user-friendly entry that appears in the select list. Content for the human-readable entry of a select list is entered after the option element's start tag. The end tag is optional because the entry is delimited either by the next option element start tag or the select element's end tag. See also the optgroup attribute for possible future grouping of option elements into hierarchical menu groupings.

Example

<select name="chapters">
    <option value="1">Chapter 1</option>
    <option value="2">Chapter 2</option>
    <option value="3">Chapter 3</option>
    <option value="4">Chapter 4</option>
</select>

Object Model Reference

[window.]document.formName.selectName.optionName
[window.]document.forms[i].elements[j].options[k].optionName
[window.]document.getElementById(elementID)

Element-Specific Attributes

disabled

label

selected

value

Element-Specific Event Handler Attributes

None.

disabledNN 6 IE 5/Mac HTML 4

disabledOptional
The presence of this attribute disables the option element in the list. Note that although the attribute disables the list choice in IE 5/Mac, as of Version 6, IE/Windows provides no other functionality for this attribute.

Example

<option value="Met101" disabled>Meteorology 101</option>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.selectName.optionName.disabled
[window.]document.forms[i].elements[j].options[k].optionName.disabled
[window.]document.getElementById(elementID).disabled
labelNN n/a IE n/a HTML 4

label="labelText"Required
The label attribute is included in HTML 4.0 in anticipation of possible hierarchical select lists. The label is intended to be a shorter alternate entry for an option element when it is rendered hierarchically. It overrides the normal text associated with the option element. Note that IE 5/Mac incorrectly displays the label attribute value in lieu of the element's text. Version 6 browsers provide no practical functionality for this attribute.

Example

<option label="Meteo 101" value="met101">Meteorology 101</option>

Value

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

Default

None.

selectedNN all IE all HTML all

selectedOptional
The presence of the selected attribute preselects the item within the select element. When the select element is set to multiple, more than one option element may have the selected attribute set.

Example

<option value="met101" selected>Meteorology 101</option>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.selectName.optionName.selected
[window.]document.forms[i].elements[j].options[k].selected
[window.]document.getElementById(elementID).selected
valueNN all IE all HTML all

value="text"Optional
Associates a value with an option that may or may not be the same as the text displayed in the select element. When the select element is in a form submitted to the server, the value of the value attribute is assigned to the name/value pair for the select element if the option has been selected by the user (or is designated as selected with that attribute and the user has made no other selection). For scripting purposes, the value attribute might contain values such as URLs or string representations of objects that may subsequently be processed by scripts.

Example

<option value="met101">Meteorology 101</option>

Value

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

Default

None.

Object Model Reference

[window.]document.formName.selectName.optionName.value
[window.]document.forms[i].elements[j].options[k].optionName.value
[window.]document.getElementById(elementID).value
<p>NN all IE all HTML all

<p>...</p>HTML End Tag: Optional
A p element defines a paragraph structural element in a document. With HTML 4, the p element is formally a block-level element, which means that content for a p element begins on its own line, and content following the p element starts on its own line. No other block-level elements may be nested inside a p element. If you omit the end tag (not permissible in XHTML), the element ends at the next block-level element start tag.

The nature of the p element has changed over time. In early implementations of HTML, the element represented only a paragraph break (a new line with some extra line spacing). Version 4 and later browsers render p elements in a hybrid way such that the start tag of a p element inserts a line space before the block. This means that a p element cannot start at the very top of a page unless it is positioned via CSS. Use the p element for structural purposes, rather than formatting purposes.

The content of a p element does not recognize extra whitespace that appears in the source code. Other elements, such as pre, render content just as it is formatted in the source code.

Example

<p>This is a simple, one-sentence paragraph.</p>
<p>This second paragraph starts on its own line, with a little extra 
line spacing.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

Element-Specific Event Handler Attributes

None.

alignNN all IE all HTML 3.2

align="where"Optional
Determines how the paragraph text is justified within the box that the p element occupies. See the discussion about horizontal alignment for a block element's content in
Section 8.1.5 earlier in this chapter.

The align attribute is deprecated in HTML 4 in favor of the text-align style sheet attribute.

Example

<p align="center">...</p>

Value

Text alignment values are center | justify | left| right, although the justify value does not validate in strict HTML or XHTML DTDs.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align   
<param>NN 2 IE 3 HTML 3.2

<param>HTML End Tag: Forbidden
The param element may be nested within an applet or object element to pass parameters to the Java applet or object (typically, an ActiveX control in IE) as it is being loaded. Parameters provide ways for HTML authors to adjust settings of an applet or object without having to recode the applet or object. A parameter typically passes a name/value pair, which is assigned to the name and value attributes. You can have more than one param element per applet or object. The documentation for the applet or object should provide you with the information necessary to pass those parameter values.

Example

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

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

datafld

dataformatas

datasrc

name

type

value

valuetype

     

Element-Specific Event Handler Attributes

None.

datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
Used with IE data binding to associate a remote data source column name with the parameter passed to a Java applet or object. In the following example, data from a data source's column named backColor is assigned to the value attribute, even though the attribute is not explicitly shown in the tag. More complex relationships are also possible with both object and applet elements. datafld works only with text file data sources in IE 5/Mac.

Example

<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">

Value

Case-sensitive identifier.

Default

None.

dataformatasNN n/a IE 4 HTML n/a

dataformatas="dataType"Optional
Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. This attribute setting depends entirely on how the data source is constructed and what kind of data the param element is expecting. dataformatas works only with text file data sources in IE 5/Mac.

Example

<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">

Value

IE recognizes two possible settings: text | html.

Default

text

datasrcNN n/a IE 4 HTML n/a

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

Example

<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">

Value

Case-sensitive identifier.

Default

None.

nameNN 2 IE 3 HTML 3.2

name="elementIdentifier"Required
Assigns an identifier for the parameter that the applet or object is expecting. Parameters generally supply a name/value pair. An applet, for example, includes a routine that fetches each parameter by name and assigns the passed value to a variable within the applet. Documentation for the applet or object should provide a list of names and value types corresponding to the param elements.

Example

<param name="loop" value="4">

Value

Case-sensitive identifier.

Default

None.

typeNN 6 IE 6 HTML 4

type="MIMEType"Optional
When the valuetype attribute is set to "ref", the type attribute value advises the browser about the content type of the file referenced by the URL assigned to the value attribute. Omit the type attribute for other settings of the valuetype attribute.

Example

<param name="help" value="http://www.giantco.com/help.html" valuetype="ref"
type="text/html">

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).type
valueNN 2 IE 3 HTML 3.2

value="runTimeParameterValue"Optional
The parameter value to be passed to an applet or object as the executable program or data loads. Parameter values are passed as string values, and it is up to the applet or object to perform the necessary internal coercion of the data to the desired data type. The value attribute is listed as optional because there may be instances in which the presence of the param element name attribute may be sufficient for the object. Once the applet or object loads its associated parameter values, scripts cannot dynamically modify those values unless the applet or object is scriptable and exposes methods designed to modify the values.

Example

<param name="loop" value="4">

Value

Any string value.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).value
valuetypeNN 6 IE 6 HTML 4

valuetype="paramValueType"Optional
object element parameters can come in three flavors: data, object, and ref. The valuetype attribute uses these constants to tell the browser how to treat the value assigned to the value attribute for passing to the object. When the valuetype is data, the value attribute is passed as a plain text string. A valuetype of object means that the value attribute consists of an identifier (id attribute value) of some other object element defined earlier in the same document. The other object may be one whose declare attribute is set, and now the parameter values are being passed to instantiate the object. When valuetype is ref, the value attribute is a URL that points to a file or other resource where runtime values are stored (perhaps a set of parameter values).

Example

<param name="anime" value="http://www.giantco.com/params/animation.txt"
valuetype="ref" type="text/html">

Value

Three possible constant values: data | object | ref.

Default

data

Object Model Reference

[window.]document.getElementById(elementID).valueType
<plaintext>NN all IE all HTML <4

<plaintext>...</plaintext>HTML End Tag: Optional
The plaintext element displays its content in a monospace font as a block element, but with a twist. All document source code coming after the start tag is rendered as-is in the browser window. You cannot turn off the plaintext element. Even the end tag is rendered as-is. This element has been long deprecated in HTML and has even been removed from the HTML 4.0 specification. You are encouraged to use the pre element instead.

Specifying any element attribute in Internet Explorer 4 for the Macintosh causes the plaintext element to be ignored. In other words, the source code is rendered and the attribute is applied to the content contained by the element if applicable (such as a style sheet rule).

Example

<p>The rest of the HTML code follows:</p>
<plaintext>
...
</plaintext>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<pre>NN all IE all HTML all

<pre>...</pre>HTML End Tag: Required
The pre element defines a block of preformatted text. Preformatted text is usually rendered by default in a monospace font and, more importantly, it preserves the whitespace (multiple spaces between words and new lines) entered into the source code for the content. Unlike the deprecated plaintext element, the pre element doesn't ignore HTML tags. Instead, it passes such tags onto the browser for normal rendering. If you want to display HTML tags in a block of preformatted text, use entities for the less-than (&lt;) and greater-than (&gt;) symbols. This prevents the HTML tags from being interpreted as genuine tags but renders the symbols within the preformatted text block.

Browsers are supposed to ignore a whitespace line break immediately following a pre element start tag in case you wish to start the content on a new line in the source code. By and large, the Version 4 browsers follow this rule (with the exception of IE 4 for the Mac).

The HTML 4 specification is adamant about the pre element maintaining its monospaced font size and line spacing. It lists the following elements that should not be included inside a pre element: applet, basefont, big, font, img, object, small, sub, and sup. Any one of these destroys the fixed-size pitch of the pre element. The recommendation also encourages authors to avoid overriding the monospaced font settings with style sheets.

One last admonition concerns using tab characters to indent or align text within a pre element. Not all browsers render tab characters the same way. Avoid potential problems by using space characters and let the pre element's preservation of whitespace do the job. No nonbreaking space entities (&nbsp;) are necessary in a pre element.

Example

<p>Here is the script example:</p>
<pre>
&lt;script language="JavaScript"&gt;
   document.write("Hello, world.")
&lt;/script&gt;
</pre>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

cols

width

wrap

Element-Specific Event Handler Attributes

None.

colsNN all IE n/a HTML n/a

cols="columnCount"Optional
The maximum number of characters per line of preformatted code. This Navigator-specific attribute automatically sets the wrap attribute to true. Without this attribute, the source code formatting (or width attribute, where supported) governs the line width.

Example

<pre cols="80">...</pre>

Value

Any positive integer.

Default

None.

widthNN n/a IE n/a HTML 4

width="columnCount"Optional
The HTML 4 specification introduces the width attribute to allow you to set a maximum number of characters to be rendered on a preformatted line of text. Presumably, browsers that support this attribute in the future will wrap lines so that words do not break in the middle. Without this attribute, the source code formatting governs the line width. Navigator provides this functionality with the cols attribute. Note that the CSS width attribute does not affect this element in IE 5/Mac or IE 6/Windows. Even when it does, however, the units of measure do not include a character count.

Example

<pre width="80">...</pre>

Value

Any positive integer.

Default

None.

wrapNN all IE n/a HTML n/a

wrapOptional
The presence of the wrap attribute instructs Navigator to wrap preformatted text so that text does not run beyond the right edge of the browser window or frame. wrap is set to true automatically when the cols attribute is set.

Example

<pre wrap>...</pre>

Value

The presence of the attribute sets its value to true.

Default

false

<q>NN 6 IE 4 HTML 4

<q>...</q>HTML End Tag: Required
The q element is intended to set off an inline quote inside a document. The HTML 4 specification indicates that browsers should automatically surround the content of a q element with language-sensitive quotation marks, and that authors should not include quotes. Netscape 6 supports this requirement, but IE 6/Windows does not. IE 5/Mac inserts quotes, but if the element's parent container is not left-aligned, the quotes float out of place. Internet Explorer 4 does not render such quote marks. If you need quotes around quoted text, you have no choice at this point but to include them yourself and not use the q element (because a future browser may add those quotes to the content). For a block-level quotation, see the blockquote element.

Example

<p>The preamble to the u.s. Constitution begins,
<q>We the People of the United States</q></p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

cite

Element-Specific Event Handler Attributes

None.

citeNN 6 IE 6 HTML 4

cite="URL"Optional
A URL pointing to an online source document from which the quotation is taken. This is not in any way a mechanism for copying or extracting content from another document. Presumably, the purpose of this HTML 4 recommendation is to encourage future browsers and search engines to utilize a reference to online source material for the benefit of readers and surfers. Version 6 browsers provide no practical functionality for this attribute.

Value

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

Default

None.

<rb>NN n/a IE n/a HTML X1.1

<rb>...</rb>End Tag: Required
The rb element denotes the base text within a ruby-enhanced section of content. This is the regular text to which ruby annotation is added. IE 5 and later supports ruby text, but the rb element is not explicitly supported, and is assumed to automatically apply to text other than what is encased inside rt elements.

Example

<ruby>
  <rb>03</rb><rt>Month</rt>
  <rb>04</rb><rt>Day</rt>
  <rb>2003</rb><rt>Year</rt>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<rbc>, <rtc>NN n/a IE n/a HTML X1.1

End Tag: Required
<rbc>...</rbc>
<rtc>...</rtc>

If you want to string together a contiguous sequence of ruby base items and their associated ruby text items, you can group all base items and all text items together inside rbc and rtc containers, respectively. The number of items inside the rbc and rtc elements should be the same so that the browser can keep the base and ruby text items together. Using this approach does not degrade well in browsers that do not support ruby text.

Example

<ruby>
  <rbc>
    <rb>03</rb><rb>04</rb><rb>2003</rb>
  </rbc>
  <rtc>
    <rt>Month</rt><rt>Day</rt><rt>Year</rt>
  </rtc>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<rp>NN n/a IE 5 HTML X1.1

<rp>...</rp>End Tag: Required
The ruby markup module features the rp element to ease compatibility with browsers that don't support ruby markup directly. Non-ruby browsers render both the rp and rt element content as inline text. The rp element gives you a chance to include parentheses (or other character) around the ruby text so that the ruby text acts as an inline label. Content of each rp element is traditionally either a left or right parenthesis symbol. A complete rp element goes before and after each rt element. Browsers that support ruby text ignore the rp element content, and, thus, don't display the parentheses.

Example

<ruby>
  <rb>03</rb><rp>(</rp><rt>Month</rt><rp>)</rp>
  <rb>04</rb><rp>(</rp><rt>Day</rt><rp>)</rp>
  <rb>2003</rb><rp>(</rp><rt>Year</rt><rp>)</rp>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<rt>NN n/a IE 5 HTML X1.1

<rt>...</rt>End Tag: Required
The rt element contains the text that is the annotation for a corresponding rb element. Browsers that support ruby text usually render rt elements in a smaller font size than the base text. Through style sheet assignment, you can also use alternate font families. You can also assign different a language set for the ruby text via the xml:lang attribute of the rt element.

Example

<ruby>
  <rb>03</rb><rt>Month</rt>
  <rb>04</rb><rt>Day</rt>
  <rb>2003</rb><rt>Year</rt>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

rbspan

Element-Specific Event Handler Attributes

None.

rbspanNN n/a IE n/a HTML X1.1

rbspan="integer"Optional
In some cases, you may want one rt element to span two or more contiguous rb elements. Assign the number of rb elements to the rt element's rbspan attribute. The mechanism is similar to the td element colspan attribute.

Value

Integer number of rb elements.

Default

1

<ruby>NN n/a IE 5 HTML X1.1

<ruby>...</ruby>End Tag: Required
Ruby text is small-font annotation that usually appears above or below the main body text (or to one side in vertically-oriented writing systems). The name comes from a small font that was used in typography to create the small annotation text. Ruby text is more commonly employed in pictographic languages, where the ruby text supplies a pronounciation guide to the main text pictographic symbols. But ruby text can be used with Latin alphabet languages, too.

The ruby element is a master container for all content to be affected by ruby markup, including the main text. The main text is known as the ruby base, while the annotation is called ruby text. Each of these types has its own tag (rb and rt, respectively), and any such tags must be encased within a ruby element. IE implemented the basics of ruby markup starting with Version 5 (Windows and Mac).

The W3C ruby markup specification was developed independently of the HTML recommendation, and was added to XHTML 1.1 as one of the first modules to take advantage of the extensible nature of XHTML.

Example

<ruby>
  <rb>03</rb><rt>Month</rt>
  <rb>04</rb><rt>Day</rt>
  <rb>2003</rb><rt>Year</rt>
</ruby>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<s>NN 3 IE 3 HTML 3.2

<s>...</s>HTML End Tag: Required
The s element renders its content as strikethrough text. This element is identical to the strike element; it was adopted because it more closely resembled the one-character element names for other type formatting (such as b, i, and u elements). In any case, both s and strike elements are deprecated in HTML 4 in favor of the text-decoration:line-through style sheet attribute.

Example

<p>If at first you don't succeed, <s>do it over</s> try, try again.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<samp>NN all IE all HTML all

<samp>...</samp>HTML End Tag: Required
The samp element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A samp element is one that contains text that is sample output from a computer program or script. This is different from a code example, which is covered by the code element.

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

Example

<p>When you press the Enter key, you will see <samp>Hello, world!</samp>
on the screen.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<script>NN 2 IE 3 HTML 4

<script>...</script>HTML End Tag: Required
The script element provides a container for lines of script code written in any scripting language that the browser is capable of interpreting. Script statements that are not written inside a function definition are executed as the page loads; function definitions are loaded but their execution is deferred until explicitly invoked by user or system action (events). You can have more than one script element in a document, and you may include script elements written in different script languages within the same document.

An important shift in attribute syntax is introduced with HTML 4. To specify the scripting language of the statements within a script element, the language attribute has been used since the first scriptable browsers. HTML 4 deprecates that attribute in favor of the type attribute, whose value is a MIME type. Until you know for certain that your page visitors use only newer browsers that support the type attribute, you should include both attributes in documents for long-term backward compatibility with older browsers. The language attribute validates with transitional DTDs.

All but the earliest scriptable browsers also allow script statements to be imported into the document from a document whose URL is specified for the src attribute.

Older, nonscriptable browsers don't recognize the script element and may attempt to render the script statements as regular HTML content. To prevent this, wrap the script statements inside HTML block comment markers. The end-of-comment marker (-->) must be preceded by a JavaScript comment marker (//) to prevent JavaScript from generating a script error.

Due to character conflicts between JavaScript and XHTML, and the lack of browser support for the XHTML-preferred <![CDATA[...]]> script wrapper, you should use imported script libraries for pages that must validate under XHTML. This prevents XML parsers from misinterpreting symbols such as the less-than operator (<) as XML markup symbols.

Example

<script type="text/javascript" language="JavaScript">
<!--
function howdy( ) {
    alert("Hello, HTML world!");
}
//-->
</script>

<script type="text/javascript" scr="scripts/myscript.js"></script>

Element-Specific Attributes

charset

defer

event

for

language

src

type

version

xml:space

 

Element-Specific Event Handler Attributes

None.

charsetNN 6 IE n/a HTML 4

charset="characterSet"Optional
Character encoding of the content in the file referred to by the src attribute.

Example

<script charset="csISO5427Cyrillic" src="moscow.js"> . . . </script>

Value

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

Default

Determined by browser.

deferNN 6 IE 4 HTML 4

deferOptional
The presence of the defer attribute instructs the browser to render regular HTML content without looking for the script to generate content as the page loads. This is an advisory attribute only. The browser doesn't have to hold up rendering further HTML content as it parses the content of the script element in search of document.write( ) statements. As of Version 7, Netscape allows but does not respond to the defer attribute.

Example

<script type="text/javascript" language="JavaScript" defer>...</script>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).defer
eventNN n/a IE 4 HTML |4|

event="eventName"Optional
Internet Explorer's event model allows the binding of object events to script elements with the help of the event and for attributes. As the page loads, the browser registers each script element with its event and object binding so that when the object generates the event, the script statements inside the script element execute—without having to write event handlers for the objects or wrap the script statements inside function definitions. Event values are written either as unquoted event names or as quoted event names formatted as functions (with trailing parentheses and optional parameter names). Use this type of script-event binding only in Internet Explorer. Navigator attempts to execute the script statements while the page loads. The transitional HTML 4 DTD reserves this attribute for possible future use, but the reservation doesn't hold for XHTML 1.0.

Example

<script for="window" event="onresize( )">...</script>

Value

Case-sensitive event name or the event name as a function inside a quote pair. The object described in the for attribute must support the event named in the event attribute.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).event
forNN n/a IE 4 HTML |4|

for="elementID"Optional
Internet Explorer's event model allows the binding of object events to script elements with the help of the event and for attributes. As the page loads, the browser registers each script element with its event and object binding so that when the object generates the event, the script statements inside the script element execute—without having to write event handlers for the objects or wrap the script statements inside function definitions. Use the unique id attribute value of the element whose event you wish to handle. Use this type of script-event binding only in Internet Explorer. Navigator attempts to execute the script statements while the page loads. The transitional HTML 4 DTD reserves this attribute for possible future use, but the reservation doesn't hold for XHTML 1.0.

Example

<script for="firstNameEntry" event="onchange( )">...</script>

Value

Case-sensitive ID value of the event-generating element. The object described in the for attribute must support the event named in the event attribute.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).htmlFor
languageNN 2 IE 3 HTML 4

language="scriptingLanguage"Optional
Sets the scripting language for script statements defined in the element. This attribute is deprecated in HTML 4 (in favor of the type attribute), but it has been so widely used since the first days of scriptable browsers that its use and support will continue for a long time to come. Moreover, it is so far the only accepted way to convey the JavaScript version for the script block (e.g., see the Array object in
Chapter 12).

Example

<script language="JavaScript">...</script>

Value

Internet Explorer recognizes four case-insensitive language names: JavaScript | JScript | vbs | vbscript. Navigator recognizes only JavaScript. Versions of JavaScript are also supported in appropriate browsers. To keep the attribute values one-word identifiers, the version numbers are tacked onto the end of the "JavaScript" language name. The version-less "JavaScript" is observed by all browsers; "JavaScript1.1" is recognized only by Navigator 3; "JavaScript1.2" is recognized by Navigator 4.0-4.05 and Internet Explorer 4; "JavaScript1.3" applies to Navigator 4.06-4.7x and IE 5-6; "JavaScript1.5" applies to Netscape 6-7. When script elements are assigned these later version values, older browsers that don't support the named version ignore the script elements.

Default

JavaScript (NN); JScript (IE).

Object Model Reference

[window.]document.getElementById(elementID).language
srcNN 3 IE 4 HTML 4

src="URL"Optional
Imports a file of script statements from an external file. Once the external statements are loaded, the browser treats them as if they were embedded in the main HTML document. This attribute had some support in Internet Explorer 3, but it relied on a specific JScript.dll version, which makes it unreliable to blindly use in IE 3.

In theory, you should be able to add script statements inside a script element that loads an external script library file. In practice, it is more reliable to provide a separate script element for each external library file and for in-document scripts.

Current implementations limit the src attribute to point to JavaScript external files. Such files must have a .js filename extension, and the server must have the extension and application/x-javascript MIME type set to serve up such files.

When assigning the src attribute in an XHTML document, browsers may not like the shortcut end tag format. Don't think of the tag as an empty element, but rather as one with content that arrives from an external source. Use an explicit </script> end tag.

Example

<script language="JavaScript" type="text/javascript" src="stringParseLib.js">
</script>

Value

Any valid URL. Current browsers require files with names that end in the .js extension. A complete URL may help overcome difficulties in earlier browsers that implement this feature.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).src
typeNN 6 IE 4 HTML 4

type="MIMEType"Required
An advisory about the content type of the script statements. The content type should tell the browser which scripting engine to use to interpret the script statements. The type attribute will eventually replace the language attribute as the one defining the scripting language in which the element's statements are written. To be compatible with future and past browsers, you may include both the language and type attributes in a script element.

Example

<script type="text/javascript" language="JavaScript">...</script>

Value

Case-insensitive MIME type. Values are limited to one(s) for which a particular browser is equipped. IE 4 and later and Netscape 6 accept text/javascript and application/x-javascript for scripts in an ECMAScript-compatible language. IE also accepts the following types: text/ecmascript, text/jscript, text/vbs (IE/Windows), text/vbscript (IE/Windows), and text/xml (IE 5 and later).

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).type  
versionNN n/a IE n/a HTML n/a

version="x.y"Optional
This attribute is listed here as a possible future implementation for Mozilla-based browsers. Most of the pieces that support this attribute (to complement the type attribute) are in place in the Netscape 6 (Mozilla) browser engine, but as of Netscape 7, are not yet connected.

Example

<script type="text/javascript" version="1.5">...</script>

Value

Language version expressed as major and minor version integers, separated by a period.

xml:spaceNN n/a IE n/a HTML X1.0

xml:space="preserve"Optional
An XHTML parser is supposed to expunge all source code whitespace as it processes the document. This removal may harm scripts. By including the XML namespace space attribute, you instruct the parser to keep source code whitespace of script element content intact.

Example

<script type="text/javascript" xml:space="preserve">...</script>

Value

Constant value: preserve.

Default

None.

<select>NN all IE all HTML all

<select>...</select>HTML End Tag: Required
The select element displays information from nested option elements as either a scrolling list or pop-up menu in a document. Users typically make a selection from the list of items (or multiple selections from a scrolling list if the size attribute is set greater than 1 and the multiple attribute is set). The value attribute of the selected option item is submitted as the value part of a name/value pair to the server with a form. When the element is set to allow multiple selections, multiple ampersand-delimited name/value pairs (repeating the name of the element) are submitted with the form. Navigator 4 requires that a select element be placed inside a form element.

Example

<select name="chapters">
    <option value="chap1.html">Chapter 1</option>
    <option value="chap2.html">Chapter 2</option>
    <option value="chap3.html">Chapter 3</option>
    <option value="chap4.html">Chapter 4</option>
</select>

Object Model Reference

[window.]document.formName.selectName
[window.]document.forms[i].elements[j]
[window.]document.getElementById(elementID) 

Element-Specific Attributes

accesskey

align

datafld

datasrc

disabled

multiple

name

size

tabindex

 

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbeforeupdate

n/a

4

n/a

onchange

2

3

4

accesskeyNN n/a IE 4 HTML n/a

accesskey="character"Optional
This widely shared attribute is listed here to remind you that only IE supports the attribute for the select element. See the discussion among the shared attributes earlier in this chapter.
alignNN n/a IE 4 HTML n/a

align="alignmentConstant"Optional
Determines how the rectangle of the select element (particularly when the size attribute is set greater than 1) aligns within the context of surrounding content. See
Section 8.1.5 earlier in this chapter. Note that only Internet Explorer supports the align attribute for the select element.

Example

<select name="chapters" multiple align="baseline">...</select>

Value

Case-insensitive constant value.

Default

bottom (IE/Windows); absmiddle (IE/Macintosh).

Object Model Reference

[window.]document.formName.selectName.align
[window.]document.forms[i].elements[j].align
[window.]document.getElementById(elementID).align  
datafldNN n/a IE 4 HTML |4|

datafld="columnName"Optional
Used with IE data binding to associate a remote data source column name to the selectedIndex property of a select element (i.e., a zero-based index value of the item currently selected in the list, as described in the select object of
Chapter 9). As such, you can use data binding only with select elements that do not specify the multiple attribute. A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

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

Example

<select name="chapters" datasrc="DBSRC3" datafld="chapterRequest">
    <option value="chap1.html">Chapter 1</option>
    <option value="chap2.html">Chapter 2</option>
    <option value="chap3.html">Chapter 3</option>
    <option value="chap4.html">Chapter 4</option>
</select>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.selectName.dataFld
[window.]document.forms[i].elements[j].dataFld
[window.]document.getElementById(elementID).dataFld  
datasrcNN n/a IE 4 HTML |4|

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

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

Example

<select name="chapters" datasrc="#DBSRC3" datafld="chapterRequest">
    <option value="chap1.html">Chapter 1</option>
    <option value="chap2.html">Chapter 2</option>
    <option value="chap3.html">Chapter 3</option>
    <option value="chap4.html">Chapter 4</option>
</select>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.selectName.dataSrc
[window.]document.forms[i].elements[j].dataSrc
[window.]document.getElementById(elementID).dataSrc  
disabledNN 6 IE 4 HTML 4

disabledOptional
The presence of this attribute disables the entire select element and its nested option elements. The element receives no events when it is disabled. You can also disable individual options through those elements' disabled properties.

Example

<select name="chapters" disabled>
    <option value="chap1.html">Chapter 1</option>
    <option value="chap2.html">Chapter 2</option>
    <option value="chap3.html">Chapter 3</option>
    <option value="chap4.html">Chapter 4</option>
</select>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.selectName.disabled
[window.]document.forms[i].elements[j].disabled
[window.]document.getElementById(elementID).disabled  
multipleNN all IE all HTML all

multipleOptional
The presence of the multiple attribute instructs the browser to render the select element as a list box and to allow users to make multiple selections from the list of options. By default, the size attribute is set to the number of nested option elements, but the value may be overridden with the size attribute setting. Users can select contiguous items by Shift-clicking on the first and last items of the group. To make discontiguous selections, Windows users must Ctrl-click on each item; Mac users must Command-click on each item. The multiple attribute has no effect when size is set to 1 to display a pop-up menu.

Example

<select name="equipment" multiple>
    <option value="monitor">Video monitor</option>
    <option value="modem">Modem</option>
    <option value="printer">Printer</option>
    ...
</select>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.selectName.multiple
[window.]document.forms[i].elements[j].multiple
[window.]document.getElementById(elementID).multiple  
[window.]document.formName.selectName.type
[window.]document.forms[i].elements[j].type
[window.]document.getElementById(elementID).type  
nameNN all IE all HTML all

name="elementIdentifier"Optional
The name submitted as part of the element's name/value pair with the form. It is similar to the name attribute of input elements.

Example

<select name="cpu" id="cpu">
    <option value="486">486</option>
    <option value="pentium">Pentium</option>
    <option value="pentium2">Pentium II</option>
    ...
</select>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.selectName.name
[window.]document.forms[i].elements[j].name
[window.]document.getElementById(elementID).name  
sizeNN all IE all HTML all

size="rowCount"Optional
Controls the number of rows of option elements that appear in the select element. With a value of 1, the select element displays its content as a pop-up menu; with a value greater than 1, option items are rendered in a list box. Browsers control the width of the element, based on the widest text associated with nested option elements.

Example

<select name="equipment" size="3">
    <option value="monitor">Video monitor</option>
    <option value="modem">Modem</option>
    <option value="printer">Printer</option>
    ...
</select>

Value

Any positive integer.

Default

1

Object Model Reference

[window.]document.formName.selectName.size
[window.]document.forms[i].elements[j].size
[window.]document.getElementById(elementID).size  
tabindexNN 6 IE 4 HTML 4

tabindex="integer"Optional
This shared attribute is listed here to remind you that Netscape 6 and HTML 4 support it to facilitate accessibility to a complex form control. Once the select element has focus, the user can continue using the keyboard to make item choices. See the discussion about this attribute earlier in this chapter.

<small>NN 2 IE 3 HTML 3.2

<small>...</small>HTML End Tag: Required
The small element renders its content in a relative size one level smaller than the text preceding the element. Given the font element's way of specifying sizes in a range of 1 through 7, the small element displays its content one size smaller than the text that comes before it. This attribute is the same as specifying <font size=-1>.

Example

<p>Let's get really <small>small</small>.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<spacer>NN <6 IE n/a HTML n/a

<spacer>HTML End Tag: Forbidden
As a solution to the need for creating blank space without forcing &nbsp; entities, incessant <p> tags, or transparent images, Navigator 3 introduced the spacer element. This element creates empty space within a line of text, between lines, or as a rectangular space. Some of this functionality can be re-created in a cross-browser implementation with style sheets. The element is supported only in Navigator 3 and Navigator 4.

Example

<p>This is one line of a paragraph.
<spacer type="vertical" size="36">
And this completes the paragraph with a three-line gap from the first line.</p>

Element-Specific Attributes

align

height

size

type

width

Element-Specific Event Handler Attributes

None.

alignNN <6 IE n/a HTML n/a

align="alignmentConstant"Optional
Determines how a block type of spacer element aligns within the context of surrounding content. See
Section 8.1.5 earlier in this chapter for a description of the possibilities.

Example

<spacer type="block" height="90" width="40" align="absmiddle">

Value

Case-insensitive constant value.

Default

bottom

height, widthNN <6 IE n/a HTML n/a

Required
height="length"
width="length"

The size that a block type spacer element occupies in a document is governed by the height and width attribute settings. These attributes apply only when the type attribute is block.

Example

<spacer type="block" height="150" width="250">

Value

Positive integer or percentage values.

Default

0

sizeNN <6 IE n/a HTML n/a

size="pixelCount"Optional
The number of pixels of whitespace to insert either horizontally or vertically, depending on whether the type attribute is set to line or vertical. If the type attribute is set to block, the size attribute is ignored.

Example

<spacer type="line" size="40">

Value

Any positive integer.

Default

0

typeNN <6 IE n/a HTML n/a

type="spacerType"Required
Defines which of the three spacer geometries is being specified for the spacer element. A type of line adds empty space in the same line of text as the preceding content; a type of vertical (or vert) adds empty space between lines of text; and a type of block defines a rectangular space that extends in two dimensions. For the line and vertical types, the size attribute must be assigned; for the block type, the height and width attributes must be assigned.

Example

<spacer type="line" size="40">

Value

Any of four case-insensitive constant values: block | line | vertical | vert.

Default

line

width

See height.

<span>NN 4 IE 3 HTML 4

<span>...</span>HTML End Tag: Required
The span element gives structure and context to any inline content in a document. Unlike some other structural elements that have very specific connotations attached to them (the p element, for instance), the author is free to give meaning to each particular span element by virtue of the element's attribute settings and nested content. Each span element becomes a generic container for all content within the required start and end tags.

It is convenient to use the span element as a wrapper for a small inline chunk of content that is to be governed by a style sheet rule. For example, if you want to differentiate a few words in a paragraph with the equivalent of a small caps look, you would wrap the affected words with a span element whose style sheet defines the requested font and text styles. Such a style sheet could be defined as an inline style attribute of the span element or assigned via the class or id attribute depending on the structure of the rest of the document.

If you need an arbitrary container for block-level content, use the div element.

Example

<span style="font-size:10pt; text-transform:uppercase">
30-day special offer</span>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

datafld

dataformatas

datasrc

Element-Specific Event Handler Attributes

None.

datafldNN n/a IE 4 HTML |4|

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

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

Example

<span datasrc="DBSRC3" datafld="quote" dataformatas="HTML">...</span>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataFld
dataformatasNN n/a IE 4 HTML |4|

dataformatas="dataType"Optional
Used with IE data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. A span element should receive data only in HTML format.

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

Example

<span datasrc="DBSRC3" datafld="quote" dataformatas="HTML">...</span>

Value

Case-insensitive constants: html | text.

Default

text

Object Model Reference

[window.]document.getElementById(elementID).dataFormatAs
datasrcNN n/a IE 4 HTML |4|

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

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

Example

<span datasrc="DBSRC3" datafld="quote" dataformatas="HTML">...</span>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc
<strike>NN 3 IE 3 HTML 3.2

<strike>...</strike>HTML End Tag: Required
The strike element renders its content as strikethrough text. This element is identical to the s element, which was adopted because it more closely resembled the one-character element names for other type formatting (such as b, i, and u elements). In any case, both strike and s elements are deprecated in HTML 4 in favor of the text-decoration:line-through style sheet attribute. Neither strike nor s elements validate with strict HTML 4 or XHTML DTDs.

Example

<p>If at first you don't succeed, <strike>do it over</strike> try, try again.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<strong>NN all IE all HTML all

<strong>...</strong>HTML End Tag: Required
The strong element is one of a large group of elements that the HTML 4 recommendation calls phrase elements. Such elements assign structural meaning to a designated portion of the document. A strong element is one that contains text that indicates a stronger emphasis than the em element. Whereas an em element is typically rendered as italic text, a strong element is generally rendered as boldface text. Override the default with a style sheet as you see fit.

Example

<p>Don't delay. <strong>Order today</strong> to get the maximum discount.
</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<style>NN 4 IE 3 HTML 4

<style>...</style>HTML End Tag: Required
The style element is a container for style sheet rules. Use the style element only inside the head element. You may include more than one style element in a head element (see the media attribute).

Older browsers may attempt to render the content of a style element. To prevent that, you should wrap the style sheet rules inside HTML comment tags. See Chapter 3 for details on the makeup of style sheet rules.

Example

<style type="text/css">
<!--
h1 {font-size:18pt; text-transform:capitalize}
p  {font-size:12pt}
-->
</style>

Object Model Reference

[window.]document.getElementsByTagName("style")[i]
[window.]document.getElementById(elementID)

Element-Specific Attributes

disabled

media

type

Element-Specific Event Handler Attributes

None.

disabledNN n/a IE 4 HTML n/a

disabledOptional
Disables the entire style element, as if it didn't exist in the document. IE/Mac responds to this attribute starting in Version 5.

The disabled attribute is a Boolean type, which means that its presence in the attribute sets its value to true. Its value can also be adjusted after the fact by scripting (see the style object in Chapter 9).

Example

<style type="text/css" disabled>...</style>

Value

The presence of the attribute disables the element.

Default

false

Object Model Reference

[window.]document.getElementsByTagName("style")[i].disabled
[window.]document.getElementById(elementID).disabled
mediaNN 6 IE 4 HTML 4

media="descriptorList"Optional
Sets the intended output device for the content of the element. The media attribute looks forward to the day when browsers are able to tailor content to specific kinds of devices such as pocket computers, text-to-speech digitizers, or fuzzy television sets. The HTML 4 specification defines a number of constant values for anticipated devices, but the list is open-ended, allowing future browsers to tailor output to yet other kinds of media and devices.

Example

<style type="text/css" media="print">...</style>

Value

Case-sensitive constant values. Multiple values can be grouped together in a comma-delimited list within a quoted string. Values defined in HTML 4 are all | aura | braille | handheld | print | projection | screen | tty | tv. Internet Explorer values are all | print |screen.

Default

all

Object Model Reference

[window.]document.getElementsByTagName("style")[i].media
[window.]document.getElementById(elementID).media
typeNN 4 IE 4 HTML 4

type="MIMEType"Required
The type attribute tells the browser which style sheet syntax to use to interpret the style rules defined in the current element.

Example

<style type="text/css">...</style>

Value

Case-insensitive MIME type. A type accepted by both Navigator 4 and later and IE 4 and later is "text/css". Navigator 4 (only) also recognizes "text/javascript" when using JavaScript syntax style sheets.

Default

text/css

Object Model Reference

[window.]document.getElementsByTagName("style")[i].type
[window.]document.getElementById(elementID).type
<sub>NN 2 IE 3 HTML 3.2

<sub>...</sub>HTML End Tag: Required
The sub element is a typographical element that instructs the browser to render its content as a subscript in a font size consistent with the surrounding content. Browsers tend to render this content in a smaller size than surrounding content.

Example

<p>"Heavy water" (H<sub>3</sub>O) has one more hydrogen atom than regular water.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<sup>NN 2 IE 3 HTML 3.2

<sup>...</sup>HTML End Tag: Required
The sup element is a typographical element that instructs the browser to render its content as a superscript in a font size consistent with the surrounding content. Browsers tend to render this content in a smaller size than surrounding content.

Example

<p>This book is published by O'Reilly<sup>&#153;</sup>.</p>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

None.

Element-Specific Event Handler Attributes

None.

<table>NN all IE all HTML 3.2

<table>...</table>HTML End Tag: Required
The table element is a container for additional elements that specify the content for a table. A table consists of rows and columns of content. Other elements related to the table element are caption, col, colgroup, tbody, td, tfoot, th, thead, and tr. The purpose of the table element is to define a number of visible attributes that apply to the entire table, regardless of the number of rows or columns within it. Many of these attributes can be overridden for a given row, column, or cell. The number of rows and columns is strictly a factor of the structure of tr and td elements within the table.

Tables have been used for a relatively long time not only to organize rows and columns of content but also to position content. With no visible borders, table rows and columns can be set to empty space. With the advent of positionable content, the tables-for-positioning practice is not encouraged.

Deeply nested tables (tables within tables) can cause problems in some browsers. Navigator 4 has severe difficulty with style sheet inheritance and overall performance in complex tables (nesting beyond three levels is asking for trouble). IE 5/Mac can inexplicably explode cell dimensions when scripts create or modify table-related elements. The simpler you keep your table structure, the more reliable your pages will be across browsers. Heavy editing of table structures in visual HTML authoring tools can leave hidden complexities (e.g., lots of empty cells) in your source code. Temporarily turn on a thin table border to see the exact row and column structure.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am-12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

background

bgcolor

border

bordercolor

bordercolordark

bordercolorlight

cellpadding

cellspacing

cols

datapagesize

datasrc

frame

height

hspace

layout

rules

summary

vspace

width

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbeforeupdate

n/a

4

n/a

onrowenter

n/a

4

n/a

onrowexit

n/a

4

n/a

alignNN all IE all HTML 3.2

align="where"Optional
Determines how the table is aligned relative to the next outermost container (usually the document body or html element). The align attribute is deprecated in HTML 4 in favor of style sheet attributes.

Example

<table align="center">...</table>

Value

Alignment constant: center | left | right.

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align
backgroundNN 4 IE 3 HTML n/a

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

Navigator 4 can be quirky with this attribute. Be prepared to wrap your main table (without a background) inside another table element, whose background property has a graphic file assigned to it.

Example

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

Value

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

Default

None (table is transparent).

Object Model Reference

[window.]document.getElementById(elementID).background
bgcolorNN 3 IE 3 HTML 3.2

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

Example

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

Value

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

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor
borderNN all IE all HTML 3.2

border="pixelCount"Optional
The thickness (in pixels) of the border drawn around a table element. If you set the border attribute to any value, browsers by default render narrow borders around each of the cells inside the table. With a table element's border showing, the thickness of internal borders between cells is defined by the cellspacing attribute of the table element.

If you include only the border attribute without assigning any value to it, the browser renders default-sized borders around the entire table and between cells, unless overridden by other attributes.

Browsers render the border in a 3-D style, with the border appearing to be raised around the flat content in the cells. Numerous other attributes affect the look of the border, including: bordercolor, bordercolordark, bordercolorlight, frame, and rules. The type of border rendered for tables is different from the borders defined by style sheet rules. You get better control of the border look by using the dedicated attributes of the table element.

Example

<table border="1">...</table>

Value

A positive integer value.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).border
bordercolorNN 4 IE 3 HTML n/a

bordercolor="colorTripletOrName"Optional
The colors used to render some of the pixels that create the illusion of borders around cells and the entire table. The border attribute must have a nonzero value assigned for the color to appear. The 3-D effect of borders in is created by careful positioning of light (or white) and dark lines around the page's background or default color (see
Figure 8-4). Standard colors are usually shades of gray and white, depending on the browser.

Figure 8-4

Figure 8-4. Components of table border color

Applying color to a table border has a different effect in Navigator and Internet Explorer. In Navigator, the color is applied to what is normally the darker of the two shades used to create the border. Moreover, Navigator automatically adjusts the darkness of some of the lines to enhance the 3-D effect of the border. In contrast, Internet Explorer applies the color to all lines that make up the border. The net effect is to flatten the 3-D effect (refer to the bordercolordark and bordercolorlight attributes to color borders and maintain the 3-D effect in IE).

Example

<table bordercolor="green" border="2">...</table>

Value

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

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColor
bordercolordark, bordercolorlightNN n/a IE 3 HTML n/a

Optional
bordercolordark="colorTripletOrName"
bordercolorlight="colorTripletOrName"

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page's background or default color (see Figure 8-4). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark and bordercolorlight attributes. The border attribute must have a nonzero value assigned for the colors to appear.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

To achieve the identical look in Navigator and IE, you must determine the complementary colors that Navigator uses for its 3-D effect from the bordercolor attribute. Then assign those values to the bordercolordark and bordercolorlight attributes. You may place all three attributes in the same <table> tag.

Example

<table bordercolordark="darkred" bordercolorlight="salmon" border="3">...
</table>

Value

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

Default

Varies with operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColorDark
[window.]document.getElementById(elementID).borderColorLight
cellpaddingNN all IE 3 HTML 3.2

cellpadding="length"Optional
The amount of empty space between the border of a table cell and the content of the cell. Note that this attribute applies to space inside a cell. Without setting this attribute, most browsers render text content so that its leftmost pixels abut the left edge of the cell. If the table displays borders, adding a few pixels of breathing space between the border edge and the content makes the content more readable. Large padding may also be desirable in some design instances. This attribute is not as noticeable when the table does not display borders (in which case the cellspacing attribute can assist in adjusting the space between cells).

Example

<table border="2" cellpadding="3">...</table>

Value

Any length value in pixels or percentage of available space. Percentage values are based on the total available space in the horizontal and vertical dimensions of the cell. For example, a value of 10% means that the left and right padding will each be 5% of the total width of the cell; the top and bottom padding will each be 5% of the total height of the cell.

Default

0

Object Model Reference

[window.]document.getElementById(elementID).cellPadding
cellspacingNN all IE 3 HTML 3.2

cellspacing="length"Optional
The amount of empty space between the outer edges of each table cell. If you set the border attribute of the table element to any positive integer value, the effect of setting cellspacing is to define the thickness of borders rendered between cells. Even without a visible border, the readability of a table often benefits from cell spacing.

Example

<table border="2" cellspacing="10">...</table>

Value

Any positive integer.

Default

0 (no table border); 2 (with table border).

Object Model Reference

[window.]document.getElementById(elementID).cellSpacing
colsNN 4 IE 3 HTML n/a

cols="columnCount"Optional
The number of columns of the table. The HTML specification never adopted this attribute. In HTML 4, the functionality of this attribute is covered by the colgroup and col elements. In the meantime, the cols attribute is recognized by older and current browsers. The attribute assists the browser in preparation for rendering the table. Without this attribute, the browser relies on its interpretation of all downloaded tr and td elements to determine how the table is to be divided.

Example

<table cols="4">...</table>

Value

Any positive integer.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).cols
datapagesizeNN n/a IE 4 HTML n/a

datapagesize="recordCount"Optional
Used with IE data binding, this attribute advises the browser how many instances of a table row must be rendered to accommodate the number of data source records set by this attribute. A common application is setting a table cell to display a text input element whose datafld attribute is bound to a particular column of the data source (the datasrc is set in the table element). If the datapagesize attribute is set to 5, the browser must display five rows of the table (but the row is specified in the HTML only once).

Example

<table datasrc="DBSRC3" datapagesize="5">
<tr>
  <td><input type="text" datafld="stockNum"></td>
  <td><input type="text" datafld="qtyOnHand"></td>
</tr>
</table>

Value

Any positive integer.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataPageSize
datasrcNN n/a IE 4 HTML n/a

datasrc="dataSourceName"Optional
Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute.

A block of contiguous records can be rendered in the table when you also set the datapagesize attribute of the table. Works only with text file data sources in IE 5/Mac.

Example

<table datasrc="DBSRC3" datapagesize="5">...</table>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).dataSrc
frameNN 6 IE 3 HTML 4

frame="frameConstant"Optional
Defines which (if any) sides of a table's outer border (set with the border attribute) are rendered. This attribute does not affect the interior borders between cells. Including the border attribute without assigning any value to it is the same as setting the frame attribute to border. All settings can be replicated with CSS border-related attributes if you prefer.

Example

<table border="3" frame="void">...</table>

Value

Any one case-insensitive frame constant:

above
Renders border along top edge of table only

below
Renders border along bottom edge of table only

border
Renders all four sides of the border (default in IE and NN)

box
Renders all four sides of the border (same as border)

hsides
Renders borders on top and bottom edges of table only (a nice look)

lhs
Renders border on left edge of table only

rhs
Renders border on right edge of table only

void
Hides all borders (default in HTML 4)

vsides
Renders borders on left and right edges of table only

Default

Navigator: void (when border=0); border (when border is any other value). Internet Explorer: border.

Object Model Reference

[window.]document.getElementById(elementID).frame
height, widthNN all IE 3 HTML 3.2 (width)

Optional
height="length"
width="length"

The rectangular dimensions of a table that may be different from the default size as calculated by the browser. When the values for these attributes are less than the minimum space required to render the table cell content, the browser overrides the attribute settings to make sure that all content appears, even if it means that text lines word-wrap. You can also stretch the dimensions of a table beyond the browser-calculated dimensions. Extra whitespace appears inside table cells to make up the difference. If you specify just one attribute, the browser performs the necessary calculations to automatically adjust the dimension along the other axis.

Note that the height attribute is not in the HTML specification. The assumption there is that the table height is calculated by the browser to best show all cell content given either the default or attribute-established width. Because different browsers on different operating systems can render text content in varying relative font sizes, it is not unusual to let the height of a table be calculated by the browser.

Example

<table width="80%">...</table>

Value

Any length value in pixels or percentage of available space.

Default

Governed by content, but width not to exceed 100% of the next outermost container. IE does accept percentage values beyond 100%, which may cause the table's container to display scroll bars and perhaps disturb the graphical integrity of the layout design.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width
hspace, vspaceNN 6 IE n/a HTML n/a

Optional
hspace="pixels"
vspace="pixels"

Inserts transparent padding outside the edges of the entire table on the page. Use CSS-padding-related attributes instead. Note that Netscape 6 responds to these table element attributes only in "quirks" mode (see DOCTYPE element).

Example

<table hspace="20" vspace="40">...</table>

Value

Integer pixel count.

Default

0

layoutNN 6 IE n/a HTML n/a

layout="layoutType"Optional
Controls the table-layout-rendering algorithm. A value of fixed directs the browser to size the table and cells according to explicit height and width settings, rather than respecting content size minimums. This attribute mimics the table-layout CSS attribute.

Example

<table layout="fixed" width="500">...</table>

Value

Constant values: auto | fixed.

Default

auto

rulesNN 7 IE 3 HTML 4

rules="rulesConstant"Optional
Defines where (if at all) interior borders between cells are rendered by the browser. In addition to setting the table to draw borders to turn the cells into a matrix, you can also set borders to be drawn only to separate rows, columns, or any sanctioned cell grouping (thead, tbody, tfoot, colgroup, or col). The border attribute must be present—either as a Boolean or set to a specific border size—for any cell borders to be drawn. IE 5/Mac leaves gaps in inter-cell borders where rules are removed.

Example

<table border="3" rules="groups">...</table>

Value

Any one case-insensitive rules constant:

all
Renders borders around each cell

cols
Renders borders between columns only

groups
Renders borders between cell groups as defined by the thead, tfoot, tbody, colgroup, or col elements

none
Hides all interior borders

rows
Renders borders between rows only

Default

none (when border=0); all (when border is any other value).

Object Model Reference

[window.]document.getElementById(elementID).rules
summaryNN 6 IE 6 HTML 4

summary="text"Optional
A textual description of the table, including, but not limited to, instructions that nonvisual browsers might follow to describe the purpose and organization of the table data. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

Example

<table summary="Order form for entry of up to five products.">...</table>

Value

Any quoted string of characters.

Default

None.

vspace

See hspace.

width

See height.

<tbody>NN 6 IE 3 HTML 4

<tbody>...</tbody>HTML End Tag: Optional
A tbody element is an arbitrary container of one or more rows of table cells. More than one tbody element may be defined within a single table element. Use the tbody element to define structural segments of a table that may require their own styles or border treatments (see the rules attribute). A tbody element is the row-oriented equivalent of the colgroup element for columns. Other types of row groupings available are the tfoot and thead elements, neither of which overlaps with a tbody element.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am-12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

bgcolor

ch

char

charoff

choff

valign

     

Element-Specific Event Handler Attributes

None.

alignNN 6 IE 4 HTML 4

align="alignConstant"Optional
Establishes the horizontal alignment characteristics of content within the row(s) covered by the tbody element.

Example

<tbody align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value

IE/Windows

IE/Mac and NN 6

HTML 4

center

char

-

-

justify

-

left

right

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

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

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align
bgcolorNN 6 IE 4 HTML n/a

bgcolor="colorTripletOrName"Optional
Establishes a fill color (behind the text and other content) for the cells contained by the tbody element.

Example

<tbody bgcolor="tan">

Value

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

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor
charNN 6 IE n/a HTML 4

char="character"Optional
The char attribute defines the text character used as an alignment point for text within a cell contained by the tbody element. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the char attribute.

Example

<tbody align="char" char=".">

Value

Any single text character.

Default

None.

charoffNN 6 IE n/a HTML 4

charoff="length"Optional
The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell contained by the tbody element. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the charoff attribute.

Example

<tbody align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

valignNN 6 IE 4 HTML 4

valign="alignmentConstant"Optional
Determines the vertical alignment of content within cells of the column(s) covered by the tbody element. You can override the vertical alignment for a particular cell anywhere in the column.

Example

<tbody valign="bottom">

Value

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

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign  
<td>NN all IE all HTML 3.2

<td>...</td>End Tag: Optional
The td element is a container for content that is rendered inside one cell of a table element. One cell is the intersection of a column and row. Other elements related to the td element are caption, col, colgroup, table, tbody, tfoot, th, thead, and tr. In addition to providing a wrapper for a cell's content, the td element defines a number of visible attributes that apply to a single cell, often overriding similar attributes set in lesser-nested elements in the table.

Four attributes—abbr, axis, headers, and scope—are included in the HTML 4 specification in anticipation of nonvisual browsers that will use text-to-speech technology to describe content of an HTML page—a kind of "verbal rendering." Although these attributes are briefly described here for the sake of completeness, there is much more to their application in nonvisual browsers than is relevant in this book on Dynamic HTML. Consult the HTML 4 recommendation for more details.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am-12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

abbr

align

axis

background

bgcolor

bordercolor

bordercolordark

bordercolorlight

ch

char

charoff

choff

colspan

datafld

dir

headers

height

nowrap

rowspan

scope

valign

width

     

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbeforeupdate

n/a

4

n/a

onrowenter

n/a

4

n/a

onrowexit

n/a

4

n/a

abbrNN 6 IE 6 HTML 4

abbr="text"Optional
Provides an abbreviated string that describes the cell's content. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

Example

<td abbr="Main Event">Keynote Speakers</td>

Value

Any quoted string.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).abbr
alignNN all IE all HTML 3.2

align="alignConstant"Optional
Establishes the horizontal alignment characteristics of content within the cell covered by the td element.

Example

<td align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value

IE/Windows and NN 4

IE/Mac and NN 6

HTML 4

center

char

-

-

justify

-

left

right

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

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align
axisNN 6 IE 6 HTML 4

axis="text"Optional
Provides an abbreviated string that describes the cell's category. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

Example

<td axis="event">Keynote Speakers</td>

Value

Any quoted string.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).axis
backgroundNN 4 IE 3 HTML n/a

background="URL"Optional
Specifies an image file that is used as a backdrop to the cell. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available cell space. Smaller images download faster but are obviously repeated more often in the background. Navigator 4, however, requires a minimum image size of 16 by 16 pixels. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Example

<td background="watermark.jpg">

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).background
bgcolorNN 3 IE 3 HTML 3.2

bgcolor="colorTripletOrName"Optional
Establishes a fill color (behind the text and other content) for the cell defined by the td element.

Example

<td bgcolor="yellow">

Value

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

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor
bordercolorNN n/a IE 3 HTML n/a

bordercolor="colorTripletOrName"Optional
The colors used to render some of the pixels that create the illusion of borders around cells and the entire table. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.

Example

<td bordercolor="green">

Value

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

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColor
bordercolordark, bordercolorlightNN n/a IE 3 HTML n/a

Optional
bordercolordark="colorTripletOrName"
bordercolorlight="colorTripletOrName"

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page's background or default color (see Figure 8-4 in the table element discussion). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark (left and top edges of the cell) and bordercolorlight (right and bottom edges) attributes.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

Example

<td bordercolordark="darkred" bordercolorlight="salmon">

Value

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

Default

Varies with operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColorDark
[window.]document.getElementById(elementID).borderColorLight
charNN 6 IE n/a HTML 4

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

Example

<td align="char" char=".">203.00</td>

Value

Any single text character.

Default

None.

charoffNN 6 IE n/a HTML 4

charoff="length"Optional
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. Netscape 7 has not yet connected support for the charoff attribute.

Example

<td align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

colspanNN all IE all HTML 3.2

colspan="columnCount"Optional
The number of columns across which the current table cell should extend itself. For each additional column included in the colspan count, one less td element is required for the table row. If you set the align attribute to center or right, the alignment is calculated on the full width of the td element across the specified number of columns. Unless the current cell also specifies a rowspan attribute, the next table row returns to the original column count.

Example

<td colspan="2" align="center">

Value

Any positive integer, usually 2 or larger.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).colSpan
datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
Used with IE data binding to associate a remote data source column name with the content of a table cell. A datasrc (and optionally a datapagesize) attribute must also be set for the enclosing table element. Works only with text file data sources in IE 5/Mac.

Example

<table datasrc="DBSRC3" datapagesize="5">
<tr>
  <td datafld="stockNum"></td>
  <td datafld="qtyOnHand"></td>
</tr>
</table>

Value

Case-sensitive identifier.

Default

None.

headersNN 6 IE 6 HTML 4

headers="cellIDList"Optional
Points to one or more th or td elements that act as column or row headers for the current table cell. The assigned value is a space-delimited list of id attribute values that are assigned to the relevant th elements. A nonvisual browser could speak the cell's header before the content of the cell to help listeners identify the nature of the cell content. Although maintstream Version 6 browsers claim support for this attribute, neither have yet connected support for it.

Example

<tr>
<th id="hdr1">Product Number</th>
<th id="hdr2">Description</th>
</tr>
<tr>
<td headers="hdr1">0392</td>
<td headers="hdr2">Round widget</td>
</tr>

Value

A space-delimited list of case-sensitive IDs assigned to cells that act as headers to the current cell.

Default

None.

height, widthNN all IE all HTML 3.2

Optional
height="length"
width="length"

The rectangular dimensions of a cell that may be different from the default size as calculated by the browser. When the values for these attributes are less than the minimum space required to render the table cell content, the browser overrides the attribute settings to make sure that all content appears, even if it means that text lines word-wrap. You can also stretch the dimensions of a table beyond the browser-calculated dimensions. Extra whitespace appears inside table cells to make up the difference. If you specify just one of these attributes, the browser performs all necessary calculations to automatically adjust the dimension along the other axis. The cell must have some content assigned to it, or it may close up to minimum size.

Due to the regular nature of tables, if you set a custom height for one cell in a row, the entire row is set to that height; similarly, setting the width of a cell causes the width of all cells in the column to be the same size.

Both the height and width attributes are deprecated in HTML 4 in favor of height and width style sheet attributes (which are not available for table cells in Navigator 4).

Example

<td width="80%" height="30">

Value

Any length value in pixels or percentage of available space.

Default

Based on content size.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width
nowrapNN all IE all HTML 3.2

nowrapOptional
The presence of the nowrap attribute instructs the browser to render the cell as wide as is necessary to display a line of nonbreaking text on one line. Abuse of this attribute can force the user into a great deal of inconvenient horizontal scrolling of the page to view all of the content. The nowrap attribute is deprecated in HTML 4 in favor of the white-space:nowrap CSS attribute and value.

Example

<td nowrap>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).noWrap
rowspanNN all IE all HTML 3.2

rowspan="rowCount"Optional
The number of rows through which the current table cell should extend itself downward. For each additional row included in the rowspan count, one less td element is required for the next table row in that cell's position along the row.

Example

<td rowspan="2">

Value

Any positive integer, usually 2 or larger.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).rowSpan
scopeNN 6 IE 6 HTML 4

scope="scopeConstant"Optional
Used more with a th element than with a td element, the scope attribute sets the range of cells (relative to the current cell) that behave as though the current cell is the header for those cells. For tables whose structure is quite regular, the scope attribute is a simpler way of achieving what the headers attribute does, without having to define id attributes for the header cells. Although maintstream Version 6 browsers claim support for this attribute, neither have yet connected support for it.

Example

<tr>
<th scope="col">Product Number</th>
<th scope="col">Description</th>
</tr>
<tr>
<td>0392</td>
<td>Round widget</td>
</tr>

Value

One of four recognized scope constants:

col
Current cell text becomes header text for every cell in the rest of the column.

colgroup
Current cell text becomes header text for every cell in the rest of the colgroup element.

row
Current cell text becomes header text for every cell in the rest of the tr element.

rowgroup
Current cell text becomes header text for every cell in the rest of the tbody element.

Default

None.

valignNN all IE all HTML 3.2

valign="alignmentConstant"Optional
Determines the vertical alignment of content within the td element. A value you set for an individual cell overrides the same attribute setting for outer containers, such as tr and tbody.

Example

<td valign="bottom">

Value

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

Default

middle

Object Model Reference

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

See height.

<textarea>NN all IE all HTML all

<textarea>...</textarea>HTML End Tag: Required
The textarea element is a multiline text input control primarily used inside form elements (required in Navigator 4 or earlier). Unlike the text type input element, a textarea element can be sized to accept more than one line of text. Word-wrapping is available on more recent browsers, and users may enter carriage return characters (a combination of characters ASCII decimal 13 and 10) inside the text box. When a textarea element is inside a submitted form, the name/value pair is submitted, with the value being the content of the text box (and the name attribute must be assigned). The CGI program on the server must be able to handle the possibility of carriage returns in the text data.

If you wish to display text in the textarea element when it loads, that text goes between the start and end tags; otherwise, there are no intervening characters in the source code between start and end tags. A label for the textarea element must be placed before or after the element, and may be encased in a label element for structural purposes (optionally in newer browsers).

Example

<textarea rows="5" cols="60" name="notes">Use this area for extra notes.
</textarea>

Object Model Reference

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

Element-Specific Attributes

cols

datafld

datasrc

disabled

name

readonly

rows

wrap

   

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbeforeupdate

n/a

4

n/a

onchange

2

3

4

onscroll

n/a

3

4

onselect

2

3

4

colsNN all IE all HTML all

cols="columnCount"Optional
The width of the editable space of the textarea element. The value represents the number of monofont characters that are to be displayed within the width. For a browser that supports style sheet font sizes, the actual width changes accordingly.

Example

<textarea cols="40">...</textarea>

Value

Any positive integer.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.formName.elementName.cols
[window.]document.forms[i].elements[j].cols
[window.]document.getElementById(elementID).cols
datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
Used with IE data binding to associate a remote data source column name with the content of the textarea element. A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

Example

<textarea name="summary" datasrc="DBSRC3" datafld="summary"></textarea>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.elementName.dataFld
[window.]document.forms[i].elements[j].dataFld
[window.]document.getElementById(elementID).dataFld
datasrcNN n/a IE 4 HTML n/a

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

Example

<textarea name="summary" datasrc="DBSRC3" datafld="summary"></textarea>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.elementName.dataSrc
[window.]document.forms[i].elements[j].dataSrc
[window.]document.getElementById(elementID).dataSrc
disabledNN 6 IE 4 HTML 4

disabledOptional
A disabled textarea element can't be activated by the user. In IE/Windows and Netscape 6, a disabled textarea cannot receive focus and doesn't become active within the tabbing order rotation. The name/value pair of a disabled element is not sent when the form is submitted.

The disabled attribute is a Boolean type, which means that its presence in the attribute sets its value to true. Its value can also be adjusted after the fact by scripting (see the textarea object in Chapter 9).

Example

<textarea disabled></textarea>

Value

The presence of the attribute disables the element.

Default

false

Object Model Reference

[window.]document.formName.elementName.disabled
[window.]document.forms[i].elements[j].disabled
[window.]document.getElementById(elementID).disabled
nameNN all IE all HTML all

name="elementIdentifier"Optional
If the textarea element is part of a form being submitted to a server, the name attribute is required if the value of the element is to be submitted with the form. For forms that are in documents for the convenience of scripted form elements, textarea element names are not required but are helpful just the same in creating scripted references to these objects and their properties or methods. Newer DOMs encourage assigning the same identifier to the id attribute for uniform script references to the element object.

Example

<textarea name="comments" id="comments"></textarea>

Value

Case-sensitive identifier.

Default

None.

Object Model Reference

[window.]document.formName.elementName.name
[window.]document.forms[i].elements[j].name
[window.]document.getElementById(elementID).name
readonlyNN 6 IE 4 HTML 4

readonlyOptional
When the readonly attribute is present, the textarea element cannot be edited on the page by the user (although scripts can modify the content). A textarea marked as readonly should not receive focus within the tabbing order (although IE for the Macintosh allows the field to receive focus). Users can still select and copy text from a read-only textarea.

Example

<textarea name="instructions" readonly></textarea>

Value

The presence of the attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.formName.elementName.readOnly
[window.]document.forms[i].elements[j].readOnly
[window.]document.getElementById(elementID).readOnly
rowsNN all IE all HTML all

rows="rowCount"Optional
The height of the textarea element based on the number of lines of text that are to be displayed without scrolling. The value represents the number of monospace-font character lines that are to be displayed within the height before the scrollbar becomes active. For a browser that supports style sheet font sizes, the actual width changes accordingly.

Example

<textarea rows="5" cols="40"></textarea>

Value

Any positive integer.

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.formName.elementName.rows
[window.]document.forms[i].elements[j].rows
[window.]document.getElementById(elementID).rows
wrapNN 2 IE 4 HTML n/a

wrap="wrapType"Required
The wrap attribute tells the browser whether it should wrap text in a textarea element and whether wrapped text should be submitted to the server with soft returns converted to hard carriage returns. The HTML specification is silent on the subject, while Navigator and IE have, over the years, clouded the attribute values. But more recently, the mainstream browsers are coming together on a set of three attribute values: off, soft, and hard.

When set to soft, the text automatically wraps as the user types, but the carriage returns and line feeds (CRLFs) do not go with the text when the form is submitted. With a setting of hard, wrapping occurs, and the CRLFs introduced by wrapping become part of the textarea's value submitted to the server. Old synonyms for the soft value include virtual and physical. A setting of off means that typing beyond the right edge of the rectangle forces the textarea to scroll horizontally. Only a press of the Return key causes the text insertion pointer to advance to the next line.

Example

<textarea name="comments" wrap="hard"></textarea>

Value

Constant values: hard | off | soft.

Default

soft

Object Model Reference

[window.]document.formName.elementName.wrap
[window.]document.forms[i].elements[j].wrap
[window.]document.getElementById(elementID).wrap  
<tfoot>NN 6 IE 3 HTML 4

<tfoot>...</tfoot>HTML End Tag: Optional
A tfoot element is a special-purpose container of one or more rows of table cells rendered at the bottom of the table. Typically, the tfoot element mirrors the thead element content for users who have scrolled down the page (or for future browsers that scroll inner table content). No more than one tfoot element may be defined within a single table element, and the tfoot element should be located in the source code before any tbody elements defined for the table. A tfoot element is a row grouping, like the tbody and thead elements. Navigator 4 ignores the tfoot tag and therefore renders the nested tr element(s) as regular tr elements in source code order.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am-12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

align

bgcolor

ch

char

charoff

choff

valign

     

Element-Specific Event Handler Attributes

None.

alignNN n/a IE 4 HTML 4

align="alignConstant"Optional
Establishes the horizontal alignment characteristics of content within the row(s) covered by the tfoot element.

Example

<tfoot align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value

IE/Windows

IE/Mac and NN 6

HTML 4

center

char

-

-

justify

-

left

right

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

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

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align
bgcolorNN 6 IE 4 HTML n/a

bgcolor="colorTripletOrName"Optional
Establishes a fill color (behind the text and other content) for the cells contained by the tfoot element.

Example

<tfoot bgcolor="tan">

Value

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

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor
charNN 6 IE n/a HTML 4

char="character"Optional
The char attribute defines the text character used as an alignment point for text within a cell contained by the tfoot element. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the char attribute.

Example

<tfoot align="char" char=".">

Value

Any single text character.

Default

None.

charoffNN 6 IE n/a HTML 4

charoff="length"Optional
The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell contained by the tfoot element. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the charoff attribute.

Example

<tfoot align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

valignNN 6 IE 4 HTML 4

valign="alignmentConstant"Optional
Determines the vertical alignment of content within cells of the column(s) covered by the tfoot element. You can override the vertical alignment for a particular cell anywhere in the column.

Example

<tfoot valign="bottom">

Value

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

Default

middle

Object Model Reference

[window.]document.getElementById(elementID).vAlign  
<th>NN all IE all HTML 3.2

<th>...</th>HTML End Tag: Optional
The th element is a container for content that is rendered inside one cell of a table element in a format that distinguishes it as a header. Most browsers render the content as boldface. A cell is the intersection of a column and row. Other elements related to the th element are caption, col, colgroup, table, tbody, td, tfoot, thead, and tr. In addition to providing a wrapper for a cell's content, the th element defines a number of visible attributes that apply to a single cell, often overriding similar attributes set in lesser-nested elements in the table.

Four attributes—abbr, axis, headers, and scope—are included in the HTML 4 specification in anticipation of nonvisual browsers that will use text-to-speech technology to describe content of an HTML page—a kind of "verbal rendering." Although these attributes are briefly described here for the sake of completeness, there is much more to their application in nonvisual browsers than is relevant in this book on Dynamic HTML. Consult the HTML 4 recommendation for more details.

Example

<table cols="3">
<thead>
<tr>
<th>Time</th><th>Event</th><th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30am-5:00pm</td><td>Registration Open</td><td>Main Lobby</td>
</tr>
<tr>
<td>9:00am-12:00pm</td><td>Keynote Speakers</td><td>Cypress Room</td>
</tr>
</tbody>
</table>

Object Model Reference

[window.]document.getElementById(elementID)

Element-Specific Attributes

abbr

align

axis

background

bgcolor

bordercolor

bordercolordark

bordercolorlight

ch

char

charoff

choff

colspan

datafld

headers

height

nowrap

rowspan

scope

valign

width

       

Element-Specific Event Handler Attributes

Handler

NN

IE

HTML

onafterupdate

n/a

4

n/a

onbeforeupdate

n/a

4

n/a

onrowenter

n/a

4

n/a

onrowexit

n/a

4

n/a

abbrNN 6 IE 6 HTML 4

abbr="text"Optional
Provides an abbreviated string that describes the cell's content. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

Example

<th abbr="What">Event</th>

Value

Any quoted string.

Default

None.

alignNN all IE all HTML 3.2

align="alignConstant"Optional
Establishes the horizontal alignment characteristics of content within the cell covered by the th element.

Example

<th align="center">

Value

HTML 4 and various browsers implement different sets of attribute values.

Value

IE/Windows and NN 4

IE/Mac and NN 6

HTML 4

center

char

-

-

justify

-

left

right

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

Default

left

Object Model Reference

[window.]document.getElementById(elementID).align
axisNN 6 IE 6 HTML 4

axis="text"Optional
Provides an abbreviated string that describes the cell's category. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

Example

<th axis="event">Events</th>

Value

Any quoted string.

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).axis
backgroundNN 4 IE 3 HTML n/a

background="URL"Optional
Specifies an image file that is used as a backdrop to the cell. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available cell space. Smaller images download faster but are obviously repeated more often in the background. Navigator 4, however, requires a minimum image size of 16 by 16 pixels. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Example

<th background="watermark.jpg">

Value

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

Default

None.

Object Model Reference

[window.]document.getElementById(elementID).background
bgcolorNN 3 IE 3 HTML 3.2

bgcolor="colorTripletOrName"Optional
Establishes a fill color (behind the text and other content) for the cell defined by the th element.

Example

<th bgcolor="yellow">

Value

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

Default

Varies with browser, browser version, and operating system.

Object Model Reference

[window.]document.getElementById(elementID).bgColor
bordercolorNN n/a IE 3 HTML n/a

bordercolor="colorTripletOrName"Optional
The colors used to render some of the pixels that create the illusion of borders around cells and the entire table. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.

Example

<th bordercolor="green">

Value

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

Default

Varies with browser and operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColor
bordercolordark, bordercolorlightNN n/a IE 3 HTML n/a

Optional
bordercolordark="colorTripletOrName"
bordercolorlight="colorTripletOrName"

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page's background or default color (see Figure 8-4 in the table element discussion). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark (left and top edges of the cell) and bordercolorlight (right and bottom edges) attributes.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

Example

<th bordercolordark="darkred" bordercolorlight="salmon">

Value

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

Default

Varies with operating system.

Object Model Reference

[window.]document.getElementById(elementID).borderColorDark
[window.]document.getElementById(elementID).borderColorLight
charNN 6 IE n/a HTML 4

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

Example

<th align="char" char=".">$325.10</th>

Value

Any single text character.

Default

None.

charoffNN 6 IE n/a HTML 4

charoff="length"Optional
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. Netscape 7 has not yet connected support for the charoff attribute.

Example

<th align="char" char="." charoff="80%">

Value

Any length value in pixels or percentage of cell space.

Default

None.

choff

See charoff.

colspanNN all IE all HTML 3.2

colspan="columnCount"Optional
The colspan attribute specifies the number of columns across which the current table cell should extend itself. For each additional column included in the colspan count, one less th or td element is required for the table row. If you set the align attribute to center or right, the alignment is calculated on the full width of the th element across the specified number of columns. Unless the current cell is also specifies a rowspan attribute, the next table row returns to the original column count.

Example

<th colspan="2" align="right">

Value

Any positive integer, usually 2 or larger.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).colSpan
datafldNN n/a IE 4 HTML n/a

datafld="columnName"Optional
Used with IE data binding to associate a remote data source column name with the content of a table header cell. A datasrc (and optionally, a datapagesize) attribute must also be set for the enclosing table element. Works only with text file data sources in IE 5/Mac.

Example

<table datasrc="DBSRC3" datapagesize="5">
<tr>
  <th datafld="stockNum"></th>
  <th datafld="qtyOnHand"></th>
</tr>
</table>

Value

Case-sensitive identifier.

Default

None.

headersNN 6 IE 6 HTML 4

headers="cellIDList"Optional
Points to one or more th or td elements that act as column or row headers for the current table cell. The assigned value is a space-delimited list of id attribute values that are assigned to the relevant th elements. A nonvisual browser could speak the cell's header before the content of the cell to help listeners identify the nature of the cell content. Although mainstream Version 6 browsers claim support for this attribute, neither have yet connected support for it.

Example

<tr>
<th id="hdr1">Product Number</th>
<th id="hdr2">Description</th>
</tr>
<tr>
<th headers="hdr1">0392</th>
<th headers="hdr2">Round widget</th>
</tr>

Value

A space-delimited list of case-sensitive IDs assigned to cells that act as headers to the current cell.

Default

None.

height, widthNN all IE all HTML 3.2

Optional
height="length"
width="length"

The rectangular dimensions of a cell that may be different from the default size as calculated by the browser. When the values for these attributes are less than the minimum space required to render the table cell content, the browser overrides the attribute settings to make sure that all content appears, even if it means that text lines word-wrap. You can also stretch the dimensions of a table beyond the browser-calculated dimensions. Extra whitespace appears inside table cells to make up the difference. If you specify just one of these attributes, the browser performs all necessary calculations to automatically adjust the dimension along the other axis.

Due to the regular nature of tables, if you set a custom height for one cell in a row, the entire row is set to that height; similarly, setting the width of a cell causes the width of all cells in the column to be the same size.

Both the height and width attributes are deprecated in HTML 4 in favor of height and width style sheet attributes (which are not available for table cells in Navigator 4).

Example

<th width="80%" height="30">

Value

Any length value in pixels or percentage of available space.

Default

Based on content size.

Object Model Reference

[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width
nowrapNN all IE all HTML 3.2

nowrapOptional
The presence of the nowrap attribute instructs the browser to render the cell as wide as is necessary to display a line of nonbreaking text on one line. Abuse of this attribute can force the user into a great deal of inconvenient horizontal scrolling of the page to view all of the content. The nowrap attribute is deprecated in HTML 4. The nowrap attribute is deprecated in HTML 4 in favor of the white-space:nowrap CSS attribute and value.

Example

<th nowrap>

Value

The presence of this attribute sets its value to true.

Default

false

Object Model Reference

[window.]document.getElementById(elementID).noWrap
rowspanNN all IE all HTML 3.2

rowspan="rowCount"Optional
The number of rows through which the current table cell should extend itself downward. For each additional row included in the rowspan count, one less th or td element is required for the next table row in that cell's position along the row.

Example

<th rowspan="2">

Value

Any positive integer, usually 2 or larger.

Default

1

Object Model Reference

[window.]document.getElementById(elementID).rowSpan
scopeNN 6 IE 6 HTML 4

scope="scopeConstant"Optional
The range of cells (relative to the current cell) that behave as though the current cell is the header for those cells. For tables whose structure is quite regular, the scope attribute is a simpler way of achieving what the headers attribute does, without having to define id attributes for the header cells. Although maintstream Version 6 browsers claim support for this attribute, neither have yet connected support for it.

Example

<tr>
<th scope="col">Product Number</th>
<th scope="col">Description</th>
</tr>
<tr>
<td>0392</td>
<td>Round widget</td>
</tr>

Value

One of four recognized scope constants:

col
Current cell text becomes header text for every cell in the rest of the column.

colgroup
Current cell text becomes header text for every cell in the rest of the colgroup element.

row
Current cell text becomes header text for every cell in the rest of the t