| |
| <a> | NN all IE all HTML all |
| <a>...</a> | HTML End Tag: Required |
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.
<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>
[window.]document.links[i] [window.]document.anchors[i] [window.]document.getElementById(elementID)
| charset | coords | datafld | datasrc | href |
| hreflang | methods | name | rel | rev |
| shape | target | type | urn |
None. Anchor-only a elements have no event handlers in Navigator through Version 4.
charset NN 6 IE n/a HTML 4 Character encoding of the content at the other end of the link.
charset="characterSet" Optional Example
<a charset="csISO5427Cyrillic" href="moscow.html">Visit Moscow</a>Value
Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).
Default
Determined by browser.
coords NN n/a IE 6 HTML 4 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.
coords="coord1, ... coordN" Optional
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<a datasrc="DBSRC3" datafld="newsURL">Late-Breaking News</a>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.links[i].dataFld [window.]document.getElementById(elementID).dataFld
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional Example
<a datasrc="DBSRC3" datafld="newsURL">Late-Breaking News</a>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.links[i].dataSrc [window.]document.getElementById(elementID).dataSrc
href NN all IE all HTML all 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).
href="URI" Required for links 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).hrefIn 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.
hreflang NN 6 IE 6 HTML 4 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.
hreflang="languageCode" Optional Example
<a hreflang="HI" href="hindi/Chap3.html>Chapter 3 (in Hindi)</a>Value
Case-insensitive language code.
Default
Browser default.
methods NN n/a IE 4 HTML n/a 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.
methods="http-method" Optional 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
name NN all IE all HTML all 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.
name="elementIdentifier" Required for anchors Example
<a id="sect3" name="sect3">Section III</a>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.links[i].name [window.]document.anchors[i].name [window.]document.getElementById(elementID).name
rel NN 6 IE 3 HTML 4 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.
rel="linkTypes" Optional Example
<a rel="next chapter" href="chapter3.html">Chapter 3</a>Value
Case-insensitive, space-delimited list of HTML 4 standard link types applicable to the element. Sanctioned link types are:
alternate appendix bookmark chapter contents copyright glossary help index next prev section start stylesheet subsection In addition, IE 3 defined a fixed set of four values: same | next | parent | previous, but only next and previous continue to be supported in IE.
Default
None.
Object Model Reference
[window.]document.links[i].rel [window.]document.getElementById(elementID).rel
rev NN 6 IE 3 HTML 4 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.
rev="linkTypes" Optional Example
<a rev="previous" href="chapter2.html">Chapter 2</a>Value
Case-insensitive, space-delimited list of standard link types applicable to the element. See the rel attribute for sanctioned and supported link types.
Default
None.
Object Model Reference
[window.]document.links[i].rev [window.]document.getElementById(elementID).rev
shape NN n/a IE n/a HTML 4 Defines the shape of a server-side image map area whose coordinates are specified with the coords attribute. See the area element.
shape="shape" Optional
target NN all IE all HTML all 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.
target="windowOrFrameName" Optional 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
type NN 6 IE 6 HTML 4 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.
type="MIMEType" Optional Example
<a type="video/mpeg" href="ski4.mpeg">View Devil's Ghost slope</a>Value
Case-insensitive MIME type. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.
Default
None.
urn NN n/a IE 4 HTML n/a 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.
urn="urn" Optional 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 |
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.
Ottumwa, <abbr title="Iowa">IA</abbr> 55334<br> <abbr lang="de" title="und so weiter">usw.</abbr>
[window.]document.getElementById(elementID)
None.
None.
| <acronym> | NN 6 IE 4 HTML 4 |
| <acronym>...</acronym> | HTML End Tag: Required |
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.
<acronym title="General Agreement on Tariffs and Trade">GATT</acronym> <acronym lang="it" title="Stati Uniti">s.u.</acronym>
[window.]document.getElementById(elementID)
None.
None.
| <address> | NN all IE all HTML all |
| <address>...</address> | HTML End Tag: Required |
<address> <p>Send comments to:<a href="mailto:[email protected]">[email protected]</a> </p> </address>
[window.]document.getElementById(elementID)
None.
None.
| <applet> | NN 2 IE 3 HTML 3.2 |
| <applet>...</applet> | HTML End Tag: Required |
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.
<applet code="simpleClock.class" name="myClock" width="400" height="50"> <param name="bgColor" value="black"> <param name="fgColor" value="yellow"> </applet>
[window.]document.applets[i] [window.]document.appletName [window.]document.getElementById(elementID)
|
align |
alt |
archive |
code |
codebase |
|
datafld |
datasrc |
height |
hspace |
mayscript |
|
name |
object |
src |
vspace |
width |
|
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 |
align NN 2 IE 3 HTML 3.2 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.
align="alignmentConstant" Optional Example
<applet code="simpleClock.class" name="myClock" align="absmiddle" width="400" height="50"></applet>Value
Case-insensitive constant value.
Default
bottom
Object Model Reference
[window.]document.applets[i].align [window.]document.appletName.align [window.]document.getElementById(elementID).align
alt NN 3 IE 3 HTML 3.2 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.
alt="textMessage" Optional Example
<applet code="simpleClock.class" name="myClock" align="absmiddle" alt="A Java clock applet." width="400" height="50"></applet>Value
Any quoted string of characters.
Default
None.
archive NN 3 IE 6 HTML 4 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.
archive="archiveFileURL" Optional 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
code NN 2 IE 3 HTML 3.2 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.
code="fileName.class" Required Example
<applet code="applets/ScriptableClock.class" width="400" height="50"> </applet>Value
Case-sensitive .class filename or complete path relative to the HTML document.
Default
None.
Object Model Reference
[window.]document.applets[i].code [window.]document.appletName.code [window.]document.getElementById(elementID).code
codebase NN 2 IE 3 HTML 3.2 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.
codebase="path" Optional Example
<applet code="ScriptableClock.class" codebase="applets/" width="400" height="50"> </applet>Value
Case-sensitive pathname, usually relative to the directory storing the current HTML document.
Default
None.
Object Model Reference
[window.]document.applets[i].codeBase [window.]document.appletName.codeBase [window.]document.getElementById(elementID).codeBase
datafld, datasrc See the param element for IE data binding to Java applets.
height, width NN 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, vspace NN 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
id NN n/a IE 4 HTML 4 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.
id="elementIdentifier" Optional If you assign an id attribute and not a name attribute, the value of the id attribute can be used as the applet's name in script reference forms that use the element name (document.appletName).
Example
<applet id="clocker" code="ScriptableClock.class" width="400" height="50"> </applet>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.applets[i].id [window.]document.appletName.id [window.]document.getElementById(elementID).id
mayscript NN 3 IE 4 HTML n/a 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.
mayscript Optional 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.
name NN 2 IE 3 HTML 3.2 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.
name="elementIdentifier" Optional Example
<applet name="clock2" code="ScriptableClock.class" width="400" height="50"> </applet>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.applets[i].name [window.]document.appletName.name [window.]document.getElementById(elementID).name
object NN 6 IE n/a HTML 4 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.
object="filename" Optional Example
<applet name="clock2" object="clockData.dat" width="400" height="50"> </applet>Value
Case-sensitive filename.
Default
None.
Object Model Reference
[window.]document.applets[i].object [window.]document.appletName.object [window.]document.getElementById(elementID).object
src NN n/a IE 4 HTML n/a 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.
src="URL" Optional 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 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.
<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>
[window.]document.links[i] [window.]document.getElementById(elementID)
|
alt |
coords |
href |
nohref |
shape |
|
target |
None.
alt NN 6 IE 3 HTML 3.2 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.
alt="textMessage" Required Example
<area coords="20,30,120,70" href="contents.html" target="display" alt="Table of Contents">Value
Any quoted string of characters.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).alt
coords NN all IE all HTML 3.2 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.
coords="coord1, ... coordN" Optional Coordinate values are entered as a comma-delimited list. If two areas overlap, the area that is defined earlier in the HTML code takes precedence.
Example
<area coords="20,30,120,70" href="contents.html" target="display">Value
Each coordinate is a length value, but the number of coordinates and their order depend on the shape specified by the shape attribute, which may optionally be associated with the element. For shape="rect", there are four coordinates (left, top, right, bottom); for shape="circle", there are three coordinates (center-x, center-y, radius); for shape="poly", there are two coordinate values for each point that defines the shape of the polygon (x1, y1, x2, y2, x3, y3,...xN, yN).
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).coords
href NN all IE all HTML 3.2 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.
href="URI" Required 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).hrefOther link object properties allow for the extraction of components of the URL, such as protocol and hostname. See the Link object in Chapter 9.
nohref NN all IE all HTML 3.2 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.
nohref Optional Example
<area coords="20,30,120,70" nohref>Value
The presence of this attribute sets its value to true. Extend for XHTML compliance by using nohref="nohref".
Default
Off.
Object Model Reference
[window.]document.getElementById(elementID).noHref
shape NN all IE all HTML 3.2 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.
shape="shapeName" Optional 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
target NN all IE all HTML 3.2 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.
target="windowOrFrameName" Optional 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 |
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.
<p>This product is <b>new</b> and <b>improved</b>!</p>
[window.]document.getElementById(elementID)
None.
None.
| <base> | NN all IE all HTML all |
| <base> | HTML End Tag: Forbidden |
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.
<head> <base href="http://www.megacorp.com/index.html" target="_top"> </head>
[window.]document.getElementById(elementID)
|
href |
target |
None.
href NN all IE all HTML all 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.
href="URL" Optional 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
target NN all IE all HTML 4 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.
target="windowOrFrameName" Optional 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 |
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.
<basefont face="Times, serif" size="4">
|
color |
face |
name |
size |
None.
color NN 6 IE 3 HTML 4 Sets the font color of all text below the basefont element. Deprecated in HTML 4 in favor of the color CSS attribute.
color="colorTripletOrName" Optional Example
<basefont color="Olive">Value
A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.
Default
Browser default.
Object Model Reference
[window.]document.getElementsByTagName("basefont")[0].color
face NN 6 IE 4 HTML 4 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.
face="fontFaceName1[, ... fontFaceNameN]" Optional In IE 3, this attribute was called the name attribute.
Example
<basefont face="Bookman, Times Roman, serif">Value
One or more font face names, including the recognized generic faces: serif | sans-serif | cursive | fantasy | monospace.
Default
Browser default.
Object Model Reference
[window.]document.getElementsByTagName("basefont")[0].face
name NN n/a IE |3| HTML n/a 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.
name="fontFaceName" Optional Value
A single font face name.
Default
Browser default.
size NN 6 IE all HTML 3.2 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.
size="integerOrRelativeSize" Optional 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 |
<bdo dir="ltr">someMixedScriptTextHere</bdo>
None.
None.
| <bgsound> | NN n/a IE 3 HTML n/a |
| <bgsound> | HTML End Tag: Optional |
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.
<bgsound src="tunes/mazeppa.mid">
[window.]document.getElementById(elementID)
|
balance |
loop |
src |
volume |
None.
balance NN n/a IE 4 HTML n/a 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.
balance="signedInteger" Optional Example
<bgsound src="tunes/mazeppa.mid" balance="+2500">Value
A signed integer between -10,000 and +10,000. A value of 0 is equally balanced on both sides. A negative value gives a relative boost to the left side; a positive value boosts the right side.
Default
0
Object Model Reference
[window.] document.getElementsByTagName("bgsound")[0].balance
loop NN n/a IE 3 HTML n/a 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.
loop="integer" Optional Example
<bgsound src="tunes/mazeppa.mid" loop="3">Value
No value assignment necessary for a single play. A value of 0 still causes a single play. Values above zero play the sound the specified number of times. Assign -1 to have the sound play indefinitely.
Default
-1
Object Model Reference
[window.] document.getElementsByTagName("bgsound")[0].loop
src NN n/a IE 3 HTML n/a 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.
src="URL" Optional Example
<bgsound src="tunes/beethoven.mid">Value
Any valid URL, including complete and relative URLs. The file must be in a MIME type supported by Internet Explorer or a plugin.
Default
None.
Object Model Reference
[window.] document.getElementsByTagName("bgsound")[0].src
volume NN n/a IE 4 HTML n/a 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).
volume="signedInteger" Optional 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 |
<p>This product is <big>new</big> and <big>improved</big>!</p>
[window.]document.getElementById(elementID)
None.
None.
| <blink> | NN <6 IE n/a HTML n/a |
| <blink>...</blink> | HTML End Tag: Required |
<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 |
<blockquote>Four score and seven years ago... shall not perish from the earth</blockquote>
[window.]document.getElementById(elementID)
|
cite |
None.
cite NN 6 IE 6 HTML 4 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.
cite="URL" Optional 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 |
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.
<body background="watermark.jpg" onLoad="init( );"> ... </body>
[window.]document.body
|
alink |
background |
bgcolor |
bgproperties |
bottommargin |
|
leftmargin |
link |
marginheight |
marginwidth |
nowrap |
|
rightmargin |
scroll |
text |
topmargin |
vlink |
|
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 |
alink NN all IE all HTML 3.2 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.
alink="colorTripletOrName" Optional Example
<body alink="#FF0000">...</body>Value
A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.
Default
#FF0000 (typically).
Object Model Reference
[window.]document.alinkColor [window.]document.body.aLink
background NN all IE all HTML 3.2 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.
background="URL" Optional 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
bgcolor NN all IE all HTML 3.2 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.
bgcolor="colorTripletOrName" Optional Example
<body bgcolor="tan">...</body>Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.bgColor [window.]document.body.bgColor
bgproperties NN n/a IE 3 HTML n/a 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.
bgproperties="property" Optional Example
<body background="watermark.jpg" bgproperties="fixed">...</body>Value
If set to "fixed", the image does not scroll. Omit the attribute or set it to an empty string ("") to let the image scroll with the content.
Default
None.
Object Model Reference
[window.]document.body.bgProperties
bottommargin NN n/a IE 4 HTML n/a 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.
bottommargin="integer" Optional Example
<body bottommargin="20">...</body>Value
A string value of the number of pixels of clear space at the bottom of the document. A value of an empty string is the same as zero.
Default
0
Object Model Reference
[window.]document.body.bottomMargin
leftmargin NN 6 IE 3 HTML n/a 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.
leftmargin="integer" Optional 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
link NN all IE all HTML 3.2 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).
link="colorTripletOrName" Optional Example
<body link="#00FF00">...</body>Value
A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.
Default
#0000FF
Object Model Reference
[window.]document.linkColor [window.]document.body.link
marginheight, marginwidth NN 4 IE n/a HTML n/a 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.
marginheight="integer"marginwidth="integer" Optional Example
<body marginheight="20" marginwidth="10">...</body>Value
A string value of the number of pixels of clear space at each of the two sides affected by each attribute. A value of an empty string is the same as zero.
Default
0
nowrap NN n/a IE 4 HTML n/a Controls whether wide content should wrap within the body width.
nowrap Optional Example
<body nowrap>...</body>Value
The presence of the attribute sets its value to true.
Default
false
Object Model Reference
[window.]document.body.noWrap
rightmargin NN n/a IE 4 HTML n/a 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.
rightmargin="integer" Optional Example
<body rightmargin="25">... </body>Value
A string value of the number of pixels of clear space at the right margin of the document. A value of an empty string is the same as zero.
Default
10 (Windows); 0 (Macintosh).
Object Model Reference
[window.]document.body.rightMargin
scroll NN n/a IE 4 HTML n/a 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).
scroll="featureSwitch" Optional Example
<body scroll="no">...</body>Value
Constant values yes or no (case-insensitive).
Default
yes
Object Model Reference
[window.]document.body.scroll
text NN all IE all HTML 3.2 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.
text="colorTripletOrName" Optional Example
<body bgcolor="#FFFFFF" text="#c0c0c0">...</body>Value
A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.
Default
#000000 (black).
Object Model Reference
[window.]document.fgColor [window.]document.body.text
topmargin NN 6 IE 3 HTML n/a 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.
topmargin="integer" Optional 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
vlink NN all IE all HTML 3.2 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).
vlink="colorTripletOrName" Optional 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 |
<p>I think that I shall never see<br>A poem lovely as a tree.</p>
[window.]document.getElementById(elementID)
|
clear |
None.
clear NN all IE all HTML 3.2 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.
clear="constant" Optional 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 |
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.
<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>
[window.]document.getElementById(elementID)
|
datafld |
dataformatas |
datasrc |
name |
type |
|
value |
|
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 |
datafld NN n/a IE 4 HTML |4| 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.
datafld="columnName" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<button type="button" datasrc="DBSRC3" datafld="label" onClick="getTopStory( );"> Latest News</button>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataFld
dataformatas NN n/a IE 4 HTML |4| 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.
dataformatas="dataType" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<button type="button" datasrc="DBSRC3"dataformatas="HTML" datafld="label" onClick="getTopStory( );"> Latest News</button>Value
IE recognizes two possible settings: text | html.
Default
text
Object Model Reference
[window.]document.getElementById(elementID).dataFormatAs
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional 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
name NN 6 IE 4 HTML 4 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.
name="elementIdentifier" Optional 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
type NN 6 IE 4 HTML 4 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.
type="buttonType" Optional 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
value NN 6 IE 4 HTML 4 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.
value="text" Optional 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 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.
<table ...> <caption class="tableCaptions"> Table 3-2. Sample Inverse Framistan Values </caption> ... </table>
[window.]document.getElementById(elementID)
|
align |
valign |
None.
align NN all IE all HTML 3.2 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.
align="where" Optional 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
valign NN n/a IE 3 HTML n/a 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.
valign="where" Optional 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 |
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.
<center>Don't do this.</center>
[window.]document.getElementById(elementID)
None.
None.
| <cite> | NN all IE all HTML all |
| <cite>...</cite> | HTML End Tag: Required |
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.
<p>Trouthe is the hyest thing that many may kepe.<br> (Chaucer, <cite>The Franklin's Tale</cite>)</p>
[window.]document.getElementById(elementID)
None.
None.
| <code> | NN all IE all HTML all |
| <code>...</code> | HTML End Tag: Required |
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.
<p>Initialize a variable in JavaScript with the <code>var</code> keyword.</p>
[window.]document.getElementById(elementID)
None.
None.
| <col> | NN 6 IE 3 HTML 4 |
| <col> | HTML End Tag: Forbidden |
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.
<col class="dateCols" width="15" align="right">
[window.]document.getElementById(elementID)
|
align |
ch |
char |
charoff |
choff |
|
span |
valign |
width |
None.
align NN 6 IE 3 HTML 4 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.
align="alignConstant" Optional 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
char NN 6 IE n/a HTML 4 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.
char="character" Optional Example
<col class="priceColumn" align="char" char=".">Value
Any single text character.
Default
None.
charoff NN 6 IE n/a HTML 4 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.
charoff="length" Optional Example
<col class="priceColumn" align="char" char="." charoff="80%">Value
Any length value in pixels or percentage of cell space.
Default
None.
choff
See charoff.
span NN 6 IE 3 HTML 4 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.
span="columnCount" Optional Example
<col span="3">Value
Integer value greater than zero.
Default
1
Object Model Reference
[window.]document.getElementById(elementID).span
valign NN 6 IE 4 HTML 4 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.
valign="alignmentConstant" Optional Example
<col valign="middle">Value
Four constant values are recognized by both IE 4 and later for Windows and HTML 4: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell's contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attributes of all cells in the same row (or all col elements) to baseline. This assures that the character baseline of the first (or only) line of a cell's text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.
Default
middle
Object Model Reference
[window.]document.getElementById(elementID).vAlign
width NN 6 IE 4 HTML 4 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.
width="multiLength" Optional 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 |
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.
<colgroup class="dateCols" width="15" align="right">
[window.]document.getElementById(elementID)
|
align |
char |
charoff |
span |
valign |
|
width |
None.
align NN n/a IE 3 HTML 4 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.
align="alignConstant" Optional 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
char NN 6 IE n/a HTML 4 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.
char="character" Optional Example
<colgroup class="priceCols" align="char" char="." span="2">Value
Any single text character.
Default
None.
charoff NN 6 IE n/a HTML 4 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.
charoff="length" Optional Example
<colgroup class="priceColumn" align="char" char="." charoff="80%" span="2">Value
Any length value in pixels or percentage of cell space.
Default
None.
span NN n/a IE 3 HTML 4 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.
span="columnCount" Optional Example
<colgroup span="3">Value
Integer value greater than zero.
Default
1
Object Model Reference
[window.]document.getElementById(elementID).span
valign NN 6 IE 3 HTML 4 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.
valign="alignmentConstant" Optional Example
<colgroup valign="middle">Value
Four constant values are recognized by both IE 4 and HTML 4: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell's contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attributes of all cells in the same row (or all colgroup elements) to baseline. This assures that the character baseline of the first (or only) line of a cell's text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.
Default
middle
Object Model Reference
[window.]document.getElementById(elementID).vAlign
width NN 6 IE 3 HTML 4 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.
width="multiLength" Optional 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 |
| <dd> | NN all IE all HTML all |
| <dd>...</dd> | HTML End Tag: Optional |
<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.
<dl>
<dt>Z-scale</dt>
<dd>A railroad modeling scale of 1:220. The smallest mass-produced
commercial model scale.</dd>
</dl>[window.]document.getElementById(elementID)
None.
None.
| <del> | NN 6 IE 4 HTML 4 |
| <del>...</del> | HTML End Tag: Required |
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.
<p>Four score and <del cite="Fixed the math">eight</del><ins>seven</ins> years ago...</p>
[window.]document.getElementById(elementID)
|
cite |
datetime |
None.
cite NN 6 IE 6 HTML 4 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.
cite="text" Optional Example
<del cite="Fixed the math --A.L.">eight</del>Value
Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).cite
datetime NN 6 IE 6 HTML 4 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.
datetime="datetimeString" Optional 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 |
<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>
[window.]document.getElementById(elementID)
None.
None.
| <dir> | NN all IE all HTML all |
| <dir>...</dir> | HTML End Tag: Required |
Common DB Connector Types:
<dir>
<li>DB-9</li>
<li>DB-12</li>
<li>DB-25</li>
</dir>[window.]document.getElementById(elementID)
|
compact |
None.
compact NN 6 IE 3 HTML 3.2 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.
compact Optional 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 |
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.
<div class="sections" id="section3">...</div>
[window.]document.getElementById(elementID)
|
align |
datafld |
dataformatas |
datasrc |
nowrap |
None.
align NN 2 IE 3 HTML 3.2 See details for horizontal alignment within a block element in the Section 8.1.5 at the beginning of this chapter.
align="alignmentConstant" Optional 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
datafld NN n/a IE 4 HTML |4| 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.
datafld="columnName" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<div datasrc="DBSRC3" datafld="sec3" dataformatas="HTML"></div>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataFld
dataformatas NN n/a IE 4 HTML |4| 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.
dataformatas="dataType" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<div datasrc="DBSRC3" datafld="sec3" dataformatas="HTML"></div>Value
IE recognizes two possible settings: text | html
Default
text
Object Model Reference
[window.]document.getElementById(elementID).dataFormatAs
datasrc NN n/a IE 4 HTML |4| 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.
datasrc="dataSourceName" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<div datasrc="DBSRC3" datafld="sec3" dataformatas="HTML"></div>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataSrc
nowrap NN n/a IE 4 HTML n/a 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.
nowrap Optional 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 |
<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.
<dl>
<dt>Z-scale</dt>
<dd>A railroad modeling scale of 1:220. The smallest mass-produced
commercial model scale.</dd>
</dl>[window.]document.getElementById(elementID)
|
compact |
None.
compact NN 3 IE 3 HTML 3.2 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.
compact Optional 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 |
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.
[window.]document.firstChild
Attributes are unlabeled.
None.
| <dt> | NN all IE all HTML all |
| <dt>...</dt> | HTML End Tag: Optional |
<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.
<dl>
<dt>Z-scale</dt>
<dd>A railroad modeling scale of 1:220. The smallest mass-produced
commercial model scale.</dd>
</dl>[window.]document.getElementById(elementID)
None.
None.
| <em> | NN all IE all HTML all |
| <em>...</em> | HTML End Tag: Required |
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.
<p>The night was dark, and the river's churning waters were <em>very</em> cold.</p>
[window.]document.getElementById(elementID)
None.
None.
| <embed> | NN 2 IE 3 HTML n/a |
| <embed>...</embed> | HTML End Tag: Optional/Required |
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.
<embed name="jukebox" src="jazz.aif" height="100" width="200"></embed>
[window.]document.embeds[elementName] [window.]document.getElementById(elementID)
|
align |
alt |
height |
hidden |
name |
|
pluginspage |
pluginurl |
src |
type |
units |
|
width |
None.
align NN all IE 4 HTML n/a 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.
align="where" Optional 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
alt NN n/a IE 4 HTML n/a 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).
alt="textMessage" Optional Use the alt attribute with care. If the external data is not a critical part of your page's content, you may just want the rest of the page to load without calling attention to the missing media controller in lesscapable browsers. The alternate message may be more disturbing to the user than a missing media player.
The equivalent powers are available in Navigator with the noembed element.
Example
<embed src="jazz.aif" alt="Sound media player" height="10" width="20"></embed>Value
Any quoted string of characters.
Default
None.
height, width NN 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
hidden NN <6 IE 4 HTML n/a 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.
hidden="true" | "false" Optional Example
<embed src="soothing.aif" hidden="true"></embed>Value
true | false
Default
false
Object Model Reference
[window.]document.embeds[i].hidden [window.]document.getElementById(elementID).hidden
name NN 2 IE 3 HTML n/a 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]).
name="elementIdentifier" Optional Example
<embed name="jukebox" id="jukebox" src="jazz.aif" height="15" width="25"></embed>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.embeds[i].name [window.]document.getElementById(elementID).name
pluginspage NN <6 IE 4 HTML n/a 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.
pluginspage="URL" Optional 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.
pluginurl NN |4| IE n/a HTML n/a 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.
pluginurl="URL" Optional 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.
src NN 2 IE 3 HTML n/a 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).
src="URL" Optional Example
<embed name="babyClip" src="Ugachaka.avi" height="150" width="250"></embed>Value
A complete or relative URL.
Default
None.
Object Model Reference
[window.]document.embeds[i].src [window.]document.getElementById(elementID).src
type NN 2 IE n/a HTML n/a 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.
type="MIMEtype" Optional Example
<embed src="hooha.fbz" type="application/x-frobnitz" height="150" width="250"></embed>Value
Any valid MIME type name as a quoted string, including the type and subtype portions delimited by a forward slash. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.
Default
None.
units NN <6 IE 3 HTML n/a 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.
units="measurementUnitType" Optional 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 |
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.
<form method="POST" action="..."> <fieldset> <legend>Credit Card Information</legend> ...inputElementsHere... </fieldset> </form>
[window.]document.getElementById(elementID)
|
align |
None.
align NN n/a IE 4 HTML n/a 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.
align="where" Optional 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 |
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.
<font face="Times, serif" size="4">
[window.]document.getElementById(elementID)
|
color |
face |
point-size |
size |
weight |
None.
color NN 2 IE 3 HTML 3.2 Sets the font color of all text contained by the font element. This attribute is deprecated in HTML 4 in favor of style sheets.
color="colorTripletOrName" Optional Example
<font color="Olive">...</font>Value
A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.
Default
Browser default.
Object Model Reference
[window.]document.getElementById(elementID).color
face NN 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-size NN |4| IE n/a HTML n/a 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.
point-size="pointSize" Optional Example
<font point-size="14">...</font>Value
A positive integer, representing the desired point size.
Default
Browser default.
size NN all IE all HTML 3.2 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.
size="integerOrRelativeSize" Optional Users can often adjust the default font size in preferences settings. The size attribute overrides that setting. Moreover, size values can be relative to whatever font size is set in the preferences. By preceding an attribute value with a + or - sign, the browser's default size can be adjusted upward or downward, but always within the range of 1 through 7.
Example
<font size="4">...</font> <font size="+3">...</font>Value
Either an integer (quoted or not quoted) or a quoted relative value consisting of a + or - symbol and an integer value.
Default
3
Object Model Reference
[window.]document.getElementById(elementID).size
weight NN |4 | IE n/a HTML n/a 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.
weight="boldnessValue" Optional 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 |
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.
<form name="orders" method="POST" action="http://www.giantco.com/cgi-bin/order"> ... </form>
[window.]document.forms[i] [window.]document.forms[formName] [window.]document.formName [window.]document.getElementById(elementID)
|
accept |
accept-charset |
acceptcharset |
action |
autocomplete |
|
enctype |
method |
name |
target |
|
Handler |
NN |
IE |
HTML |
|---|---|---|---|
| onreset |
3 |
4 |
4 |
| onsubmit |
2 |
3 |
4 |
accept NN n/a IE n/a HTML 4 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.
accept="MIMETypeList" Optional Example
<form accept="text/html, image/gif" ...>...</form>Value
Case-insensitive MIME type (content type) value. For multiple items, a comma-delimited list is allowed. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.
Default
None.
accept-charset, acceptcharset NN 6 IE 5 HTML 4 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.
accept-charset="MIMETypeList" Optional Example
<form accept-charset="it, es" ...>...</form>Value
Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets). Multiple character sets may be delimited by commas. The reserved value, unknown, is supposed to represent the character set that the server used to generate the form for the client.
Default
unknown
action NN all IE all HTML all 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.
action="URL" Optional 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
autocomplete NN n/a IE 5 HTML n/a 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.
autocomplete="featureSwitch" Optional 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
enctype NN all IE all HTML all 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.
enctype="MIMEType" Optional Example
<form method="POST" enctype="text/plain" action="mailto:[email protected]"> ... </form>Value
MIME type (content type) value. For multiple items, a comma-delimited list is allowed.
Default
application/x-www-form-urlencoded
Object Model Reference
[window.]document.forms[i].encoding [window.]document.forms[formName].encoding [window.]document.formName.encoding [window.]document.getElementById(elementID).encoding
method NN all IE all HTML all 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.
method="GET" | "POST" Optional Example
<form method="POST" action="http://[email protected]/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
name NN 2 IE 3 HTML n/a 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.
name="elementIdentifier" Optional 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
target NN all IE all HTML all 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.
target="windowOrFrameName" Optional 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 |
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.
<frameset cols="150,*">
<frame name="navbar" src="nav.html">
<frame name="main" src="page1.html">
</frameset>[window.]frameName [window.]frames[i] [window.]document.getElementById(elementID)
|
allowtransparency |
bordercolor |
datafld |
datasrc |
|
frameborder |
height |
longdesc |
marginheight |
|
marginwidth |
name |
noresize |
scrolling |
|
security |
src |
width |
None.
allowtransparency NN n/a IE 5.5 HTML n/a More applicable to the iframe element, the allowtransparency attribute, when engaged, turns the frame's background transparent. See the iframe element.
allowtransparency="featureSwitch" Optional
bordercolor NN 3 IE 4 HTML n/a 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.
bordercolor="colorTripletOrName" Optional Example
<frame name="navbar" src="nav.html" bordercolor="salmon">Value
A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).borderColor
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<frame datasrc="DBSRC3" datafld="newsURL">Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataFld
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional Example
<frame datasrc="DBSRC3" datafld="newsURL">Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataSrc
frameborder NN 3 IE 3 HTML 4 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.
frameborder="borderSwitch" Optional 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, width NN 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.
longdesc NN 6 IE6 HTML 4 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.
longdesc="URL" Optional Example
<frame longdesc="navDesc.html" title="Navigation Bar" src="navbar.html">Value
Any valid URI, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).longDesc
marginheight, marginwidth NN 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
name NN 2 IE 3 HTML 4 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.
name="elementIdentifier" Optional The name attribute is deprecated in XHTML. To validate under the Frameset XHTML DTD, assign the same identifier to the element's name and id attributes.
Example
<frame name="navbar" id="navbar" src="nav.html">Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]frameName.name [window.]frames[i].name [window.]document.getElementById(elementID).name
noresize NN 2 IE 3 HTML 4 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.
noresize Optional Example
<frame src="navbar.html" noresize>Value
The presence of the attribute in HTML makes the frame nonresizable.
Default
Frames are resizable by default.
Object Model Reference
[window.]document.getElementById(elementID).noResize
scrolling NN 2 IE 3 HTML 4 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.
scrolling="auto" | "no" | "yes" Optional Setting the scrolling attribute to no should be used only after you have tested on all browsers and platforms that mission-critical content is always visible in the frame. If the frame is set to not scroll and has the noresize attribute set, some users might not be able to see all the content of the frame.
Example
<frame src="navbar.html" scrolling="no">Value
Constant values: auto | no | yes.
Default
auto
Object Model Reference
[window.]document.getElementById(elementID).scrolling
security NN n/a IE 6 HTML n/a 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.
security="restricted" Optional Example
<frame src="navbar.html" security="restricted">Value
Constant value: restricted.
Default
None.
src NN 2 IE 3 HTML 4 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:
src="URL" Optional <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 |
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.
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.
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.
<frameset cols="150,*">
<frame name="navbar" id="navbar" src="nav.html">
<frame name="main" id="main" src="page1.html">
</frameset>[window.]document.getElementById(elementID)
|
border |
bordercolor |
cols |
frameborder |
framespacing |
rows |
|
Handler |
NN |
IE |
HTML |
|---|---|---|---|
| onload |
2 |
3 |
4 |
| onunload |
2 |
3 |
4 |
border NN 3 IE 4 HTML n/a 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.
border="pixelCount" Optional 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
bordercolor NN 3 IE 4 HTML n/a 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.
bordercolor="colorTripletOrName" Optional Example
<frameset cols="150,*" bordercolor="salmon">...</frameset>Value
A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.
Default
Browser default, usually a shade of gray with black or blue highlighting for the 3-D effect.
Object Model Reference
[window.]document.getElementById(elementID).borderColor
cols NN 2 IE 3 HTML 4 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.
cols="columnLengthsList" Optional Column size is defined in one of three ways:
An absolute pixel size
A percentage of the width available for the entire frameset
A wildcard (*) to represent all available remaining space after other pixels and percentages have been accounted for
Use an absolute pixel size when you want the width of a frame to be the same no matter how the user has sized the overall browser window. This is especially useful when the frame is to display an object of fixed width, such as an image. Use a percentage when you want the frame width to be a certain proportion of the frameset's width, no matter how the user has adjusted the size of the overall browser window. If you use all percentage values for the cols attribute, they should add up to 100%. If the values don't add up to 100%, the browser makes the columns fit anyway. Finally, use the asterisk wildcard value to let the browser calculate the width of one frame when all other frames in the frameset have fixed or percentage values assigned to them. Separate the values within the attribute value string with commas.
You can mix and match all three types of values in the attribute string. For example, consider a three-column frameset. If you want the leftmost column to be exactly 150 pixels wide, but the middle column must be 50% of the total frameset width, set the value as follows:
<frameset cols="150,50%,*">The precise width of the two rightmost frames is different with each browser window's width adjustment. The rightmost frame width in this example is roughly equal to one half the width of the frameset minus the 150 pixels reserved for the leftmost frame.
You may define an invisible column to the right. Use percentage values for visible columns, and make sure they total 100%. Then assign the asterisk value for the final column.
To create a regular grid of frames, assign values to both the cols and rows attributes in the frameset element's tag. For an irregular array, you must nest frameset elements, as shown in the description of the frameset element, earlier in this section.
Example
<frameset cols="25%,50%,25%">...</frameset>Value
Comma-separated list of pixel, percentage, or wildcard (*) values. Internet Explorer 4 for the Macintosh exhibits incorrect behavior with some combinations that include a wildcard value.
Default
100%
Object Model Reference
[window.]document.getElementById(elementID).cols
frameborder NN 3 IE 3 HTML n/a 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.
frameborder="borderSwitch" Optional Example
<frameset cols="25%,50%,25%" frameborder="no">...</frameset>Value
On-off values for this attribute vary with the browser. Navigator uses yes and no. Internet Explorer 4 and later accepts both yes | no and 1 | 0. For cross-browser compatibility, use the yes/no pairing.
Default
yes
Object Model Reference
[window.]document.getElementById(elementID).frameBorder
framespacing NN n/a IE 3 HTML n/a 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.
framespacing="pixelLength" Optional Example
<frameset cols="25%,50%,25%" framespacing="7">...</frameset>Value
A positive integer. Unlike the border attribute, however, a setting of zero does not remove the border. Use the frameborder attribute to hide borders entirely.
Default
2
Object Model Reference
[window.]document.getElementById(elementID).frameSpacing
rows NN 2 IE 3 HTML 4 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.
rows="rowLengthsList" Optional 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.
You can always override the browser's rendering style for any heading level or individual heading with style sheet rules.
<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> ...
[window.]document.getElementById(elementID)
|
align |
None.
align NN all IE all HTML 3.2 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.
align="where" Optional 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 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.
<head>...</head> HTML End Tag: Optional 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.
profile NN 6 IE 6 HTML 4 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.
profile="URLList" Optional 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 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.
<hr> HTML End Tag: Forbidden Example
<hr align="center" width="80%">Object Model Reference
[window.]document.getElementById(elementID)Element-Specific Attributes
align
color
noshade
size
width
Element-Specific Event Handler Attributes
None.
align NN all IE all HTML 3.2 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.
align="where" Optional Example
<hr align="right">Value
One of three case-insensitive values: center | left | right.
Default
center
Object Model Reference
[window.]document.getElementById(elementID).align
color NN n/a IE 4 HTML n/a 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.
color="colorTripletOrName" Optional Example
<hr color="salmon">Value
A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).color
noshade NN all IE all HTML 3.2 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.
noshade Optional Example
<hr noshade>Value
The presence of the attribute turns on no-shade rendering.
Default
Off.
Object Model Reference
[window.]document.getElementById(elementID).noShade
size NN all IE all HTML 3.2 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.
size="pixelCount" Optional Example
<hr size="4">Value
Any positive integer. A setting of zero still draws a one-pixel thick rule.
Default
2
Object Model Reference
[window.]document.getElementById(elementID).size
width NN all IE all HTML 3.2 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.
width="length" Optional 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 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).
<html>...</html> HTML End Tag: Optional 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.
scroll NN n/a IE 6 HTML n/a 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.
scroll="featureSwitch" Optional Example
<html scroll="no">...</html>Value
String constant: auto | no | yes.
Default
auto
Object Model Reference
[window.]document.getElementById(elementID).scroll
version NN 6 IE 6 HTML 3.2 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.
version="string" Optional Value
Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.
Default
None.
xmlns NN n/a IE 5 HTML X1.0 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).
xmlns="namespaceSpec" Optional 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 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>).
<i>...</i> HTML End Tag: Required 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 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.
<iframe>...</iframe> HTML End Tag: Required 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.
align NN 6 IE 3 HTML 4 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.
align="alignmentConstant" Optional 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
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<iframe datasrc="DBSRC3" datafld="newsURL"></iframe>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataFld
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional Example
<iframe datasrc="DBSRC3" datafld="newsURL"></iframe>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataSrc
frameborder NN 6 IE 3 HTML 4 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.
frameborder="borderSwitch" Optional 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, width NN 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, vspace NN 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
longdesc NN 6 IE 6 HTML 4 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.
longdesc="URL" Optional Example
<iframe longdesc="newsDesc.html" title="Navigation Bar" src="news.html"> </iframe>Value
Any valid URI, including complete and relative URLs.
Default
None.
marginheight, marginwidth NN 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
name NN 6 IE 3 HTML 4 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.
name="elementIdentifier" Optional Example
<iframe name="news" id="news" src="news.html"></iframe>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).name
scrolling NN 6 IE 3 HTML 4 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.
scrolling="featureSwitch" Optional 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
security NN n/a IE 6 HTML n/a 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.
security="restricted" Optional Example
<iframe src="news.html" security="restricted">Value
Constant value: restricted.
Default
None.
src NN 6 IE 3 HTML 4 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.
src="URL" Optional 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 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.
<ilayer>...</ilayer> HTML End Tag: Required 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.layerNameElement-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.
above NN |4| IE n/a HTML n/a 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.
above="layerID" Optional Example
<ilayer id="thingy4" src="quotes.html" above="thingy3"></ilayer>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.layerName.above
background NN |4| IE n/a HTML n/a 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.
background="URL" Optional Example
<ilayer id="thingy4" src="quotes.html" background="blueCrinkle.jpg"></ilayer>Value
Any valid URL to an image file, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.layerName.background
below NN |4| IE n/a HTML n/a 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.
below="layerID" Optional Example
<ilayer id="thingy4" src="quotes.html" below="thingy5"></ilayer>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.layerName.below
bgcolor NN |4| IE n/a HTML n/a 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.
bgcolor="colorTripletOrName" Optional Example
<ilayer src="quotes.html" bgcolor="tan"></ilayer>Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with operating system.
Object Model Reference
[window.]document.layerName.bgColor
clip NN |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, width NN |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
id NN |4| IE n/a HTML n/a 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.
id="elementIdentifier" Optional Example
<ilayer id="oldYeller" bgcolor="yellow" height="100" width="100"></ilayer>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.layerName.name
left, top NN |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
name NN |4| IE n/a HTML n/a 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.
name="elementIdentifier" Optional Example
<ilayer name="oldYeller" bgcolor="yellow" height="100" width="100"></ilayer>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.layerName.name
src NN |4| IE n/a HTML n/a 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).
src="URL" Optional Example
<ilayer src="quotes.html"></ilayer>Value
A complete or relative URL.
Default
None.
Object Model Reference
[window.]document.layerName.src
top
See left.
visibility NN |4| IE n/a HTML n/a 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".
visibility="visibilityConstant" Optional Regardless of the visibility attribute setting, an ilayer element always occupies its normal inflow space in the document. This allows Navigator 4 to change the visibility on the fly (via scripting) without reloading the document. (Navigator 4 does not automatically reflow changed content.)
Example
<ilayer src="quotes.html" visibility="hidden"></ilayer>Value
One of the accepted constants: hidden | inherit | visible.
Default
inherit
Object Model Reference
[window.]document.layerName.visibility
width
See height.
z-index NN |4| IE n/a HTML n/a 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.
z-index="layerNumber" Optional 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 |
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.
<img src="mtRushmore.jpg" height="90" width="120" alt="Mount Rushmore">
[window.]document.imageName [window.]document.images[i] [window.]document.getElementById(elementID)
|
align |
alt |
border |
datafld |
datasrc |
|
dynsrc |
galleryimage |
height |
hspace |
ismap |
|
longdesc |
loop |
lowsrc |
name |
src |
|
start |
suppress |
usemap |
vspace |
width |
|
Handler |
NN |
IE |
HTML |
|---|---|---|---|
| onabort |
3 |
4 |
n/a |
| onerror |
3 |
4 |
n/a |
| onload |
3 |
4 |
n/a |
align NN all IE all HTML all 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).
align="where" Optional 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
alt NN all IE all HTML all 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.
alt="textMessage" Required Example
<img src="navbar.gif" usemap="#nav" alt="Navigation Bar" width="400" height="50">Value
Any quoted string of characters.
Default
None.
Object Model Reference
[window.]document.imageName.alt [window.]document.images[i].alt [window.]document.getElementById(elementID).alt
border NN all IE all HTML 3.2 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.
border="pixels" Optional Example
<img src="surferDude.gif" alt="Surfer" border="3" height="100" width="200">Value
Any integer pixel value.
Default
0
Object Model Reference
[window.]document.imageName.border [window.]document.images[i].border [window.]document.getElementById(elementID).border
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<img datasrc="DBSRC3" alt="Current Radar" datafld="img3URL" height="100" width="150">Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.imageName.dataFld [window.]document.images[i].dataFld [window.]document.getElementById(elementID).dataFld
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional Example
<img datasrc="DBSRC3" alt="Current Radar" datafld="img3URL" height="100" width="150">Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.imageName.dataSrc [window.]document.images[i].dataSrc [window.]document.getElementById(elementID).dataSrc
dynsrc NN n/a IE 4 HTML n/a 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.
dynsrc="URL" Optional Example
<img dynsrc="snowman.avi" loop="3" height="100" width="150">Value
Any valid URL, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.images[i].dynsrc [window.]document.imageName.dynsrc [window.]document.getElementById(elementID).dynsrc
galleryimg NN n/a IE 6 HTML n/a 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.
dynsrc="featureSwitch" Optional Example
<img src="rushmore.jpg" alt="Mount Rushmore" height="240" width="550" galleryimg="no">Value
Constant value: yes | true | no | false.
Default
yes
Object Model Reference
[window.]document.images[i].galleryImg [window.]document.imageName.galleryImg [window.]document.getElementById(elementID).galleryImg
height, width NN 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, vspace NN 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
ismap NN all IE all HTML all 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.
ismap Optional 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
longdesc NN 6 IE 6 HTML 4 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.
longdesc="URL" Optional Example
<img longdesc="navDesc.html" alt="Navigation Bar" src="navbar.jpg">Value
Any valid URL, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.imageName.longDesc [window.]document.images[i].longDesc [window.]document.getElementById(elementID).longDesc
loop NN n/a IE 3 HTML n/a 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.
loop="loopCount" Optional Example
<img dynsrc="snowman.avi" alt="Snowman Movie"loop="3" height="100" width="150">Value
Any positive integer or zero.
Default
1
Object Model Reference
[window.]document.imageName.loop [window.]document.images[i].loop [window.]document.getElementById(elementID).loop
lowsrc NN 3 IE 4 HTML n/a 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.
lowsrc="URL" Optional Example
<img src="navbar.jpg" alt="Navigation Bar" lowsrc="navbarBW.jpg" height="60" width="300">Value
Any valid URL, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.imageName.lowsrc [window.]document.images[i].lowsrc [window.]document.getElementById(elementID).lowsrc
name NN 3 IE 4 HTML 4 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.
name="elementIdentifier" Optional Example
<img name="mugshot" id="mugshot" alt="My face" src="janem.jpg" height="90" width="80">Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.images[i].name [window.]document.imageName.name [window.]document.getElementById(elementID).name
src NN all IE all HTML all 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.
src="URL" Required Example
<img src="surferDude.gif" alt="Surfer" height="100" width="200">Value
A complete or relative URL.
Default
None.
Object Model Reference
[window.]document.images[i].src [window.]document.imageName.src [window.]document.getElementById(elementID).src
start NN n/a IE 4 HTML n/a 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.
start="videoStartType" Optional Example
<img dynsrc="snowman.avi" loop="1" start="mouseover" height="100" width="150">Value
One of the two case-insensitive constant values: fileopen | mouseover.
Default
fileopen
Object Model Reference
[window.]document.images[i].start [window.]document.imageName.start [window.]document.getElementById(elementID).start
suppress NN |4| IE n/a HTML n/a 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.
suppress="featureSwitch" Optional Example
<img src="surferDude.gif" alt="Surfer" height="150" width="250" suppress="true">Value
Boolean string value: true | false.
Default
false
usemap NN all IE all HTML 3.2 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.
usemap="mapURL" Optional 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 |
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.
<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>
[window.]document.formName.inputName [window.]document.forms[i].elements[j] [window.]document.getElementById(elementID)
|
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 |
|
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.
accept NN 6 IE 6 HTML 4 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.
accept="MIMETypeList" Optional 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.
accesskey NN 6 IE 4 HTML 4 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.
accesskey="character" Optional Input Types
All rendered types.
align NN all IE all HTML 3.2 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.
align="alignmentConstant" Optional Input Types
image
Example
<input type="image" name="icon" src="icon.gif" align="absmiddle">Value
Alignment-constant value applied to elements outside the image rectangle.
Default
left
Object Model Reference
[window.]document.formName.inputName.align [window.]document.forms[i].elements[j].align [window.]document.getElementById(elementID).align
alt NN 6 IE 4 HTML 4 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.
alt="textMessage" Optional 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
border NN 4 IE 4(Mac) HTML n/a 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.
border="pixels" Optional Input Types
image
Example
<input type="image" name="icon" src="sndIcon.gif" border="0">Value
Any integer pixel value.
Default
2 (Navigator 4) or 0 (All others).
Object Model Reference
[window.]document.formName.inputName.border [window.]document.forms[i].elements[j].border [window.]document.getElementById(elementID).border
checked NN all IE all HTML 4 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.
checked Optional Input Types
checkbox, radio
Example
<input type="checkbox" name="addToList" checked>Send email updates to this web site.Value
The presence of this attribute turns on its property.
Default
Off.
Object Model Reference
[window.]document.formName.inputName.checked [window.]document.forms[i].elements[j].checked [window.]document.getElementById(elementID).checked
datafld NN n/a IE 4 HTML |4| 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.
datafld="columnName" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Input Types
button, checkbox, hidden, password, radio, text
Example
<input type="text" name="first" datasrc="DBSRC3" datafld="firstName">Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.formName.inputName.dataFld [window.]document.forms[i].elements[j].dataFld [window.]document.getElementById(elementID).dataFld
datasrc NN n/a IE 4 HTML |4| 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.
datasrc="dataSourceName" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Input Types
button, checkbox, hidden, password, radio, text
Example
<input type="text" name="first" datasrc="DBSRC3" datafld="firstName">Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.formName.inputName.dataSrc [window.]document.forms[i].elements[j].dataSrc [window.]document.getElementById(elementID).dataSrc
disabled NN 6 IE 4 HTML 4 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.
disabled Optional 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
dynsrc NN n/a IE 4 HTML n/a 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.
dynsrc="URL" Optional 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, width NN 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, vspace NN 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
ismap NN all IE all HTML all 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.
ismap Optional 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
loop NN n/a IE 3 HTML n/a 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.
loop="loopCount" Optional Input Types
image
Example
<input type="image" dynsrc="snowman.avi" alt="Snowman Movie" loop="3" height="100" width="150">Value
Any positive integer or zero.
Default
1
Object Model Reference
[window.]document.formName.inputName.loop [window.]document.forms[i].elements[j].loop [window.]document.getElementById(elementID).loop
lowsrc NN all IE 4 HTML n/a Provides a URL to an alternate low-resolution image to be loaded initially if the src image is taking a long time to load.
lowsrc="URL" Optional 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
maxlength NN all IE all HTML all 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.
maxlength="characterCount" Optional 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
name NN all IE all HTML all 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.
name="elementIdentifier" Optional/Required The identifier you assign to the name attribute becomes part of the name/value pair submitted to the server. Radio button elements that are to act as a mutually exclusive group must all have the same name attribute value. In 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
readonly NN 6 IE 4 HTML 4 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).
readonly Optional 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
size NN all IE all HTML all 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.
size="elementWidth" Optional Input Types
password, text
Example
<input type="text" name="ZIP" maxlength="10" size="12">Value
Any positive integer.
Default
20
Object Model Reference
[window.]document.formName.inputName.size [window.]document.forms[i].elements[j].size [window.]document.getElementById(elementID).size
src NN all IE all HTML all 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.
src="URL" Required Input Types
image
Example
<input type="image" name="icon" src="sndIcon.gif" border="0">Value
A complete or relative URL.
Default
None.
Object Model Reference
[window.]document.formName.inputName.src [window.]document.forms[i].elements[j].src [window.]document.getElementById(elementID).src
start NN n/a IE 4 HTML n/a 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.
start="videoStartType" Optional 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
type NN all IE all HTML all 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="elementType" Required
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
usemap NN 6 IE 6 HTML 4 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.
usemap="mapURL" Optional Input Types
image
Example
<input type="image" src="submit.gif" alt="Submit Button" usemap="#submitter" height="90" width="120">Value
A URL to the map element in the same document (a hash symbol plus the map name).
Default
None.
Object Model Reference
[window.]document.formName.inputName.useMap [window.]document.forms[i].elements[j].useMap [window.]document.getElementById(elementID).useMap
value NN all IE all HTML all 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.
value="text" Optional/Required 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">ISDNValue
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 |
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.
<p>Four score and <del cite="Fixed the math">eight</del><ins>seven</ins> years ago...</p>
[window.]document.getElementById(elementID)
|
cite |
datetime |
None.
cite NN 6 IE 6 HTML 4 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.
cite="text" Optional Example
<ins cite="Fixed the math --A.L.">seven</ins>Value
Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).cite
datetime NN 6 IE 6 HTML 4 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.
datetime="datetimeString" Optional 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 |
<head> <isindex prompt="Enter a search string:"> </head>
[window.]document.getElementById(elementID)
|
prompt |
None.
prompt NN all IE all HTML 4 This attribute lets you assign the prompt message that appears with the element.
prompt="message" Optional 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 |
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.
<p>If you don't know the answer, type <kbd>NONE</kbd> into the text box.</p>
[window.]document.getElementById(elementID)
None.
None.
| <keygen> | NN all IE n/a HTML n/a |
| <keygen> | HTML End Tag: Forbidden |
<form ...> ... <keygen name="encryptedOrder" challenge="39457582201"> </form>
|
challenge |
keytype |
name |
pqg |
None.
challenge NN all IE n/a HTML n/a 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.
challenge="challengeString" Required Example
<keygen name="encryptedOrder" challenge="39457582201">Value
Any string.
Default
Empty string.
keytype NN all IE n/a HTML n/a 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.
keytype="keyType" Optional/Required Example
<keygen name="encryptedOrder" challenge="39457582201" keytype="DSA">Value
One of two constant values: RSA | DSA.
Default
RSA
name NN all IE n/a HTML n/a 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.
name="identifier" Required Example
<keygen name="encryptedOrder" challenge="39457582201">Value
Case-insensitive identifier.
Default
None.
pqg NN all IE n/a HTML n/a 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.
pqg="dssParams" Optional/Required
| <label> | NN 6 IE 4 HTML 4 |
| <label>...</label> | HTML End Tag: Required |
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.
<form> <label>Company:<input type="text" name="company"></label><br> <label for="stateEntry">State:</label> <input type="text" name="state" id="stateEntry"> ... </form>
[window.]document.getElementById(elementID)
|
accesskey |
datafld |
dataformatas |
datasrc |
for |
None.
accesskey NN 6 IE 4 HTML 4 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.
accesskey="character" Optional Example
<label for="stateEntry" accesskey="s">State:</label>Value
Single character of the document set.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).accessKey
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML"> </label>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataFld
dataformatas NN n/a IE 4 HTML n/a 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.
dataformatas="dataType" Optional Example
<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML"> </label>Value
IE recognizes two possible settings: text | html.
Default
text
Object Model Reference
[window.]document.getElementById(elementID).dataFormatAs
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional Example
<label for="stateEntry" datasrc="DBSRC3" datafld="label" dataformatas="HTML"> </label>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataSrc
for NN 6 IE 4 HTML 4 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.
for="inputElementIdentifier" Optional 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 |
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.
<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>
[window.]document.layerName
|
above |
background |
below |
bgcolor |
clip |
|
height |
id |
left |
pagex |
pagey |
|
src |
top |
visibility |
width |
z-index |
|
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.
above NN |4| IE n/a HTML n/a 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.
above="layerID" Optional Example
<layer id="instrux" bgcolor="yellow" src="instrux.html" above="help1" width="200" height="300"> </layer>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.layerName.above
background NN |4| IE n/a HTML n/a 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.
background="URL" Optional Example
<layer background="blueCrinkle.jpg" src="instrux.html" width="200" height="300"> </layer>Value
Any valid URL to an image file, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.layerName.background
below NN |4| IE n/a HTML n/a 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.
below="layerID" Optional Example
<layer bgcolor="yellow" src="instrux.html" width="200" height="300" below="thankyou"> </layer>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.layerName.below
bgcolor NN |4| IE n/a HTML n/a 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.
bgcolor="colorTripletOrName" Optional Example
<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with operating system.
Object Model Reference
[window.]document.layerName.bgColor
clip NN |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, width NN |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
id NN |4| IE n/a HTML n/a 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.
id="elementIdentifier" Optional Example
<layer id="oldYeller" bgcolor="yellow" src="instrux.html" width="200" height="300"> </layer>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.layerName.name
left, top NN |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, pagey NN |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
src NN |4| IE n/a HTML n/a 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).
src="URL" Optional Example
<layer bgcolor="yellow" src="instrux.html" width="200" height="300"></layer>Value
A complete or relative URL.
Default
None.
Object Model Reference
[window.]document.layerName.src
top
See left.
visibility NN |4| IE n/a HTML n/a 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".
visibility="visibilityConstant" Optional Example
<layer bgcolor="yellow" src="instrux.html" width="200" height="300" pagex="50" pagey="350" visibility="hidden"> </layer>Value
One of the accepted constants: hidden | inherit | visible.
Default
inherit
Object Model Reference
[window.]document.layerName.visibility
width
See height.
z-index NN |4| IE n/a HTML n/a 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.
z-index="layerNumber" Optional 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 |
<form method="POST" action="..."> <fieldset> <legend>Credit Card Information</legend> ...inputElementsHere... </fieldset> </form>
[window.]document.getElementById(elementID)
|
accesskey |
align |
None.
accesskey NN 6 IE 5 HTML 4 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.
accesskey="character" Optional Example
<legend accesskey="c">Credit Card Information</legend>Value
Single character of the document set.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).accessKey
align NN 6 IE 4 HTML 4 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.
align="where" Optional 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 |
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.
<ul>
<li>Larry</li>
<li>Moe</li>
<li>Curly</li>
</ul>[window.]document.getElementById(elementID)
|
type |
value |
None.
type NN all IE all HTML 3.2 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.
type="labelType" Optional Be aware that in Version 4 browsers, the type attribute for a li element sets the type for subsequent li elements in the list unless overridden by a type attribute setting in another li element. More recent versions restrict the effect to the current li element. In general, though, it is best to set the type attribute of the ol or ul element and let that setting govern all nested elements.
Example
<li type="square">Chicken Curry</li>Value
When contained by a ul element, possible values are disc | circle | square. When contained by an ol element, possible values are A | a | I | i | 1. Sequencing is performed automatically as shown in the following table.
Type
Example
A A, B, C, ...
a a, b, c, ...
I I, II, III, ...
i i, ii, iii, ...
1 1, 2, 3, ...
Default
1 and disc.
Object Model Reference
[window.]document.getElementById(elementID).type
value NN all IE all HTML 3.2 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.
value="number" Optional 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 |
<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>
[window.]document.getElementById(elementID)
|
charset |
href |
hreflang |
media |
rel |
|
rev |
src |
target |
type |
None.
charset NN 6 IE n/a HTML 4 Character encoding of the content at the other end of the link.
charset="characterSet" Optional Example
<link charset="csISO5427Cyrillic" href="moscow.html">Value
Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).
Default
Determined by browser.
href NN 6 IE 3 HTML all 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.
href="URI" Required Example
<link rel="Prev" href="sect2.html" src="sect2.html">Value
Any valid URI, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).href
hreflang NN 6 IE 6 HTML 4 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.
hreflang="languageCode" Optional Example
<link hreflang="HI" href="hindi/Chap3.html">Value
Case-insensitive language code.
Default
Browser default.
Object Model Reference
[window.]document.getElementById(elementID).hrefLang
media NN 6 IE 4 HTML 4 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.
media="descriptorList" Optional 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
rel NN 4 IE 3 HTML 3.2 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.
rel="linkTypes" Optional 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
rev NN 6 IE 4 HTML 4 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.
rev="linkTypes" Optional Example
<link rev="Prev" href="sect4.html">Value
Case-insensitive, space-delimited list of HTML 4 standard link types applicable to the element. See the rel attribute for sanctioned link types.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).rev
src NN 4 IE n/a HTML n/a 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.
src="URL" Optional Example
<link rel="fontdef" src="fonts/garamond.pfr" href="fonts/garamond.pfr">Value
Any valid URL, including complete and relative URLs.
Default
None.
target NN 6 IE 4 HTML 4 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.
target="windowOrFrameName" Optional 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
type NN 4 IE 4 HTML 4 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.
type="MIMEType" Optional 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 |
<listing>
<script language="JavaScript">
document.write("Hello, world.")
</script>
</listing>[window.]document.getElementById(elementID)
None.
None
| <map> | NN all IE all HTML 3.2 |
| <map>...</map> | HTML End Tag: Required |
<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>
[window.]document.getElementById(elementID)
|
name |
None.
name NN all IE all HTML 3.2 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.
name="identifier" Required 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 |
<marquee behavior="slide" direction="left" width="250" bgcolor="white"> Check out our monthly specials. </marquee>
[window.]document.getElementById(elementID)
|
behavior |
bgcolor |
datafld |
dataformatas |
datasrc |
|
direction |
height |
hspace |
loop |
scrollamount |
|
scrolldelay |
truespeed |
vspace |
width |
|
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 |
behavior NN n/a IE 3 HTML n/a Sets the motion of the content within the rectangular space reserved for the marquee element. You have a choice of three motion types.
behavior="motionType" Optional 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
bgcolor NN n/a IE 3 HTML n/a Establishes a fill color (behind the text and other content) for the rectangular space reserved for the marquee element.
bgcolor="colorTripletOrName" Optional Example
<marquee behavior="slide" direction="left" width="250" bgcolor="white"> ...</marquee>Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.getElementById(elementID).bgColor
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional 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
dataformatas NN n/a IE 4 HTML n/a 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.
dataformatas="dataType" Optional Example
<marquee behavior="slide" direction="left" width=200 datasrc="DBSRC3" datafld="news" dataformatas="HTML"></marquee>Value
Constant values: text | html.
Default
text
Object Model Reference
[window.]document.getElementById(elementID).dataFormatAs
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional Example
<marquee behavior="slide" direction="left" width="200" datasrc="DBSRC3" datafld="news" dataformatas="HTML"></marquee>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataSrc
direction NN n/a IE 3 HTML n/a 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.
direction="scrollDirection" Optional Example
<marquee behavior="slide" direction="left" width="200">...</marquee>Value
Four possible directions: down | left | right | up.
Default
left
Object Model Reference
[window.]document.getElementById(elementID).direction
height, width NN 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, vspace NN 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
loop NN n/a IE 3 HTML n/a 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.
loop="count" Optional Example
<marquee behavior="slide" direction="left" height="20" width="200" loop="3"> ...</marquee>Value
Any positive integer if you want the scrolling to stop. Otherwise, set the value to -1 or infinite.
Default
-1
Object Model Reference
[window.]document.getElementById(elementID).loop
scrollamount NN n/a IE 3 HTML n/a 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.
scrollamount="pixelCount" Optional Example
<marquee behavior="slide" direction="left" height="20" width="200" scrollamount="2"> ...</marquee>Value
Any positive integer.
Default
6
Object Model Reference
[window.]document.getElementById(elementID).scrollAmount
scrolldelay NN n/a IE 3 HTML n/a 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).
scrolldelay="milliseconds" Optional Example
<marquee behavior="slide" direction="left" height="20" width="200" scrolldelay="100"> ...</marquee>Value
Any positive integer representing the number of milliseconds between content redraws.
Default
85 (Windows 95); 90 (Macintosh).
Object Model Reference
[window.]document.getElementById(elementID).scrollDelay
truespeed NN n/a IE 4 HTML n/a 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.
truespeed Optional 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 |
Common DB Connector Types:
<menu>
<li>DB-9</li>
<li>DB-12</li>
<li>DB-25</li>
</menu>[window.]document.getElementById(elementID)
|
compact |
None.
compact NN 6 IE 6 HTML 3.2 A Boolean attribute originally designed to let browsers render the list in a more compact style than normal (smaller line spacing between items).
compact Optional 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 |
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.
<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>|
content |
http-equiv |
name |
scheme |
None.
content NN all IE all HTML all 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.
content="valueString" Required 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-equiv NN all IE all HTML all 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.
http-equiv="identifier" Optional 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
name NN all IE all HTML all 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.
name="identifier" Optional Example
<meta name="Author" content="Jane Smith"> <meta name="keywords" content="benefits,insurance,plan">Value
Any string identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).name
scheme NN 6 IE 6 HTML 4 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.
scheme="identifier" Optional 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 |
<multicol cols="2" gutter="20" width="500"> LongFlowingHTMLContent </multicol>
|
cols |
gutter |
width |
None.
cols NN <6 IE n/a HTML n/a 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.
cols="columnCount" Required Example
<multicol cols="2" gutter="20" width="500"> LongFlowingHTMLContent </multicol>Value
Any positive integer.
Default
1
gutter NN <6 IE n/a HTML n/a 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.
gutter="pixelCount" Optional Example
<multicol cols="2" gutter="20" width="500"> LongFlowingHTMLContent </multicol>Value
Any positive integer.
Default
10
width NN <6 IE n/a HTML n/a 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.
width="elementWidth" Optional 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 |
| <nobr> | NN all IE all HTML n/a |
| <nobr>...</nobr> | HTML End Tag: Required |
<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>
[window.]document.getElementById(elementID)
None.
None.
| <noembed> | NN 2 IE n/a HTML n/a |
| <noembed>...</noembed> | HTML End Tag: Required |
<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>
None.
None.
| <noframes> | NN 2 IE 3 HTML 4 |
| <noframes>...</noframes> | HTML End Tag: Required |
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).
<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>None.
None.
| <nolayer> | NN |4| IE n/a HTML n/a |
| <nolayer>...</nolayer> | HTML End Tag: Required |
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.
<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>
None.
None.
| <noscript> | NN 3 IE 4 HTML 4 |
| <noscript>...</noscript> | HTML End Tag: Required |
All standard attributes of the noscript element were added to support Cascading Style Sheets, internationalization, and events for HTML 4.
<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>
None.
None.
| <object> | NN 4 IE 3 HTML 4 |
| <object>...</object> | HTML End Tag: Required |
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.
<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>
|
align |
alt |
archive |
border |
classid |
|
code |
codebase |
codetype |
data |
declare |
|
height |
hspace |
name |
standby |
type |
|
usemap |
vspace |
width |
None.
align NN 4 IE 3 HTML 4 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.
align="alignmentConstant" Optional Example
<object ... align="baseline"></object>Value
Constant value. See Section 8.1.5.
Default
bottom
Object Model Reference
[window.]document.getElementById(elementID).align
archive NN 6 IE 6 HTML 4 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.
archive="URIList" Optional Example
<object ... archive="/images/anim3.gif/images/anim4.gif"></object>Value
A complete or relative URL.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).archive
border NN 6 IE 6 HTML 4 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).
border="pixels" Optional Example
<object ... border="4"></object>Value
Any integer pixel value.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).bprder
classid NN 4 IE 3 HTML 4 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.
classid="URL" Optional Example
<object id="earth" classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D"></object>Value
A complete or relative URL.
Default
None.
Object Model Reference
[window.]document.elementID.classid
code NN n/a IE 4 HTML n/a 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.
code="fileName.class" Optional Example
<object code="fileReader.class" codebase="classes"></object>Value
Applet class filename.
Default
None.
Object Model Reference
[window.]document.elementID.code
codebase NN 4 IE 3 HTML 4 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.
codebase="path" Optional Example
<object code="fileReader.class" codebase="classes"></object>Value
Case-sensitive pathname, usually relative to the directory storing the current HTML document.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).codeBase
codetype NN 6 IE 3 HTML 4 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.
codetype="MIMEType" Optional Example
<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D" codetype="application/x-crossword"></object>Value
Case-insensitive MIME type. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).codeType
data NN 4 IE 3 HTML 4 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.
data="URL" Optional Example
<object data="proddemo.mpeg" type="application/mpeg"></object>Value
A complete or relative URL.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).data
declare NN 6 IE 6 HTML 4 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.
declare Optional Example
<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D" declare></object>Value
The presence of the attribute sets it to true.
Default
false
Object Model Reference
[window.]document.getElementById(elementID).declare
height, width NN 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, vspace NN 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
name NN 6 IE 6 HTML 4 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.
name="elementIdentifier" Optional Example
<object name="embedded" classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D" height="150" width="250"></object>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).name
standby NN 6 IE 6 HTML 4 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.
standby="HTMLText" Optional Example
<object classid="clsid:83A38BF0-B33A-A4FF-C619A82E891D" height="150" width="250" standby="Loading movie..."></object>Value
Any HTML content.
Default
None.
type NN 4 IE 3 HTML 4 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).
type="MIMEType" Required Example
<object data="movies/prodDemo.mpeg" type="application/mpeg"></object>Value
Case-insensitive MIME type. A catalog of registered MIME types is available from ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).type
usemap NN 6 IE 6 HTML 4 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.
usemap="mapURL" Optional 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 |
<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>[window.]document.getElementById(elementID)
|
compact |
start |
type |
None.
compact NN 6 IE4 HTML 3.2 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.
compact Optional Example
<ol compact>...</ol>Value
The presence of this attribute makes its value true.
Default
false
start NN all IE all HTML all 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.
start="number" Optional Example
<ol start="5"> ...</ol>Value
Any positive integer.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).start
type NN all IE all HTML 3.2 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.
type="labelType" Optional 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 |
<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>[window.]document.getElementById(elementID)
|
disabled |
label |
None.
disabled NN 6 IE 5/6 HTML 4 The presence of this attribute disables the optgroup element and its nested option elements. Other optgroup elements remain enabled.
disabled Optional Example
<optgroup label="Engineering" disabled>Value
The presence of this attribute sets its value to true.
Default
false
Object Model Reference
[window.]document.getElementById(elementID).disabled
label NN 6 IE 5/6 HTML 4 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.
label="labelText" Required 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 |
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.
<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>[window.]document.formName.selectName.optionName [window.]document.forms[i].elements[j].options[k].optionName [window.]document.getElementById(elementID)
|
disabled |
label |
selected |
value |
None.
disabled NN 6 IE 5/Mac HTML 4 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.
disabled Optional Example
<option value="Met101" disabled>Meteorology 101</option>Value
The presence of this attribute sets its value to true.
Default
false
Object Model Reference
[window.]document.formName.selectName.optionName.disabled [window.]document.forms[i].elements[j].options[k].optionName.disabled [window.]document.getElementById(elementID).disabled
label NN n/a IE n/a HTML 4 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.
label="labelText" Required Example
<option label="Meteo 101" value="met101">Meteorology 101</option>Value
Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.
Default
None.
selected NN all IE all HTML all 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.
selected Optional Example
<option value="met101" selected>Meteorology 101</option>Value
The presence of this attribute sets its value to true.
Default
false
Object Model Reference
[window.]document.formName.selectName.optionName.selected [window.]document.forms[i].elements[j].options[k].selected [window.]document.getElementById(elementID).selected
value NN all IE all HTML all 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.
value="text" Optional 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 |
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.
<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>
[window.]document.getElementById(elementID)
|
align |
None.
align NN all IE all HTML 3.2 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.
align="where" Optional 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 |
<applet code="simpleClock.class" name="myClock" width="400" height="50"> <param name="bgColor" value="black"> <param name="fgColor" value="yellow"> </applet>
[window.]document.getElementById(elementID)
|
datafld |
dataformatas |
datasrc |
name |
type |
|
value |
valuetype |
None.
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">Value
Case-sensitive identifier.
Default
None.
dataformatas NN n/a IE 4 HTML n/a 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.
dataformatas="dataType" Optional Example
<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">Value
IE recognizes two possible settings: text | html.
Default
text
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional Example
<param name="bgColor" datasrc="DBSRC2" dataformatas="text" datafld="backColor">Value
Case-sensitive identifier.
Default
None.
name NN 2 IE 3 HTML 3.2 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.
name="elementIdentifier" Required Example
<param name="loop" value="4">Value
Case-sensitive identifier.
Default
None.
type NN 6 IE 6 HTML 4 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.
type="MIMEType" Optional 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
value NN 2 IE 3 HTML 3.2 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.
value="runTimeParameterValue" Optional Example
<param name="loop" value="4">Value
Any string value.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).value
valuetype NN 6 IE 6 HTML 4 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).
valuetype="paramValueType" Optional 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 |
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).
<p>The rest of the HTML code follows:</p> <plaintext> ... </plaintext>
[window.]document.getElementById(elementID)
None.
None.
| <pre> | NN all IE all HTML all |
| <pre>...</pre> | HTML End Tag: Required |
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 ( ) are necessary in a pre element.
<p>Here is the script example:</p>
<pre>
<script language="JavaScript">
document.write("Hello, world.")
</script>
</pre>[window.]document.getElementById(elementID)
|
cols |
width |
wrap |
None.
cols NN all IE n/a HTML n/a 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.
cols="columnCount" Optional Example
<pre cols="80">...</pre>Value
Any positive integer.
Default
None.
width NN n/a IE n/a HTML 4 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.
width="columnCount" Optional Example
<pre width="80">...</pre>Value
Any positive integer.
Default
None.
wrap NN all IE n/a HTML n/a 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.
wrap Optional 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 |
<p>The preamble to the u.s. Constitution begins, <q>We the People of the United States</q></p>
[window.]document.getElementById(elementID)
| cite |
None.
cite NN 6 IE 6 HTML 4 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.
cite="URL" Optional 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 |
<ruby> <rb>03</rb><rt>Month</rt> <rb>04</rb><rt>Day</rt> <rb>2003</rb><rt>Year</rt> </ruby>
[window.]document.getElementById(elementID)
None.
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.
<ruby>
<rbc>
<rb>03</rb><rb>04</rb><rb>2003</rb>
</rbc>
<rtc>
<rt>Month</rt><rt>Day</rt><rt>Year</rt>
</rtc>
</ruby>[window.]document.getElementById(elementID)
None.
None.
| <rp> | NN n/a IE 5 HTML X1.1 |
| <rp>...</rp> | End Tag: Required |
<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>
[window.]document.getElementById(elementID)
None.
None.
| <rt> | NN n/a IE 5 HTML X1.1 |
| <rt>...</rt> | End Tag: Required |
<ruby> <rb>03</rb><rt>Month</rt> <rb>04</rb><rt>Day</rt> <rb>2003</rb><rt>Year</rt> </ruby>
[window.]document.getElementById(elementID)
| rbspan |
None.
rbspan NN n/a IE n/a HTML X1.1 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.
rbspan="integer" Optional Value
Integer number of rb elements.
Default
1
| <ruby> | NN n/a IE 5 HTML X1.1 |
| <ruby>...</ruby> | End Tag: Required |
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.
<ruby> <rb>03</rb><rt>Month</rt> <rb>04</rb><rt>Day</rt> <rb>2003</rb><rt>Year</rt> </ruby>
[window.]document.getElementById(elementID)
None.
None.
| <s> | NN 3 IE 3 HTML 3.2 |
| <s>...</s> | HTML End Tag: Required |
<p>If at first you don't succeed, <s>do it over</s> try, try again.</p>
[window.]document.getElementById(elementID)
None.
None.
| <samp> | NN all IE all HTML all |
| <samp>...</samp> | HTML End Tag: Required |
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.
<p>When you press the Enter key, you will see <samp>Hello, world!</samp> on the screen.</p>
[window.]document.getElementById(elementID)
None.
None.
| <script> | NN 2 IE 3 HTML 4 |
| <script>...</script> | HTML End Tag: Required |
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.
<script type="text/javascript" language="JavaScript">
<!--
function howdy( ) {
alert("Hello, HTML world!");
}
//-->
</script>
<script type="text/javascript" scr="scripts/myscript.js"></script>|
charset |
defer |
event |
for |
language |
|
src |
type |
version |
xml:space |
None.
charset NN 6 IE n/a HTML 4 Character encoding of the content in the file referred to by the src attribute.
charset="characterSet" Optional Example
<script charset="csISO5427Cyrillic" src="moscow.js"> . . . </script>Value
Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).
Default
Determined by browser.
defer NN 6 IE 4 HTML 4 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.
defer Optional Example
<script type="text/javascript" language="JavaScript" defer>...</script>Value
The presence of this attribute sets its value to true.
Default
false
Object Model Reference
[window.]document.getElementById(elementID).defer
event NN n/a IE 4 HTML |4| 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.
event="eventName" Optional Example
<script for="window" event="onresize( )">...</script>Value
Case-sensitive event name or the event name as a function inside a quote pair. The object described in the for attribute must support the event named in the event attribute.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).event
for NN n/a IE 4 HTML |4| 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.
for="elementID" Optional Example
<script for="firstNameEntry" event="onchange( )">...</script>Value
Case-sensitive ID value of the event-generating element. The object described in the for attribute must support the event named in the event attribute.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).htmlFor
language NN 2 IE 3 HTML 4 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).
language="scriptingLanguage" Optional 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
src NN 3 IE 4 HTML 4 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.
src="URL" Optional In theory, you should be able to add script statements inside a script element that loads an external script library file. In practice, it is more reliable to provide a separate script element for each external library file and for in-document scripts.
Current implementations limit the src attribute to point to JavaScript external files. Such files must have a .js filename extension, and the server must have the extension and application/x-javascript MIME type set to serve up such files.
When assigning the src attribute in an XHTML document, browsers may not like the shortcut end tag format. Don't think of the tag as an empty element, but rather as one with content that arrives from an external source. Use an explicit </script> end tag.
Example
<script language="JavaScript" type="text/javascript" src="stringParseLib.js"> </script>Value
Any valid URL. Current browsers require files with names that end in the .js extension. A complete URL may help overcome difficulties in earlier browsers that implement this feature.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).src
type NN 6 IE 4 HTML 4 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.
type="MIMEType" Required 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
version NN n/a IE n/a HTML n/a 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.
version="x.y" Optional Example
<script type="text/javascript" version="1.5">...</script>Value
Language version expressed as major and minor version integers, separated by a period.
xml:space NN n/a IE n/a HTML X1.0 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.
xml:space="preserve" Optional 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 |
<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>[window.]document.formName.selectName [window.]document.forms[i].elements[j] [window.]document.getElementById(elementID)
|
accesskey |
align |
datafld |
datasrc |
disabled |
|
multiple |
name |
size |
tabindex |
|
Handler |
NN |
IE |
HTML |
|---|---|---|---|
| onafterupdate |
n/a |
4 |
n/a |
| onbeforeupdate |
n/a |
4 |
n/a |
| onchange |
2 |
3 |
4 |
accesskey NN n/a IE 4 HTML n/a 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.
accesskey="character" Optional
align NN n/a IE 4 HTML n/a 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.
align="alignmentConstant" Optional 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
datafld NN n/a IE 4 HTML |4| 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.
datafld="columnName" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<select name="chapters" datasrc="DBSRC3" datafld="chapterRequest"> <option value="chap1.html">Chapter 1</option> <option value="chap2.html">Chapter 2</option> <option value="chap3.html">Chapter 3</option> <option value="chap4.html">Chapter 4</option> </select>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.formName.selectName.dataFld [window.]document.forms[i].elements[j].dataFld [window.]document.getElementById(elementID).dataFld
datasrc NN n/a IE 4 HTML |4| 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.
datasrc="dataSourceName" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<select name="chapters" datasrc="#DBSRC3" datafld="chapterRequest"> <option value="chap1.html">Chapter 1</option> <option value="chap2.html">Chapter 2</option> <option value="chap3.html">Chapter 3</option> <option value="chap4.html">Chapter 4</option> </select>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.formName.selectName.dataSrc [window.]document.forms[i].elements[j].dataSrc [window.]document.getElementById(elementID).dataSrc
disabled NN 6 IE 4 HTML 4 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.
disabled Optional 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
multiple NN all IE all HTML all 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.
multiple Optional Example
<select name="equipment" multiple> <option value="monitor">Video monitor</option> <option value="modem">Modem</option> <option value="printer">Printer</option> ... </select>Value
The presence of this attribute sets its value to true.
Default
false
Object Model Reference
[window.]document.formName.selectName.multiple [window.]document.forms[i].elements[j].multiple [window.]document.getElementById(elementID).multiple [window.]document.formName.selectName.type [window.]document.forms[i].elements[j].type [window.]document.getElementById(elementID).type
name NN all IE all HTML all 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.
name="elementIdentifier" Optional Example
<select name="cpu" id="cpu"> <option value="486">486</option> <option value="pentium">Pentium</option> <option value="pentium2">Pentium II</option> ... </select>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.formName.selectName.name [window.]document.forms[i].elements[j].name [window.]document.getElementById(elementID).name
size NN all IE all HTML all 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.
size="rowCount" Optional Example
<select name="equipment" size="3"> <option value="monitor">Video monitor</option> <option value="modem">Modem</option> <option value="printer">Printer</option> ... </select>Value
Any positive integer.
Default
1
Object Model Reference
[window.]document.formName.selectName.size [window.]document.forms[i].elements[j].size [window.]document.getElementById(elementID).size
tabindex NN 6 IE 4 HTML 4 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.
tabindex="integer" Optional
| <small> | NN 2 IE 3 HTML 3.2 |
| <small>...</small> | HTML End Tag: Required |
<p>Let's get really <small>small</small>.</p>
[window.]document.getElementById(elementID)
None.
None.
| <spacer> | NN <6 IE n/a HTML n/a |
| <spacer> | HTML End Tag: Forbidden |
<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>
|
align |
height |
size |
type |
width |
None.
align NN <6 IE n/a HTML n/a 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.
align="alignmentConstant" Optional Example
<spacer type="block" height="90" width="40" align="absmiddle">Value
Case-insensitive constant value.
Default
bottom
height, width NN <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
size NN <6 IE n/a HTML n/a 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.
size="pixelCount" Optional Example
<spacer type="line" size="40">Value
Any positive integer.
Default
0
type NN <6 IE n/a HTML n/a 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.
type="spacerType" Required 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 |
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.
<span style="font-size:10pt; text-transform:uppercase"> 30-day special offer</span>
[window.]document.getElementById(elementID)
|
datafld |
dataformatas |
datasrc |
None.
datafld NN n/a IE 4 HTML |4| 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.
datafld="columnName" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<span datasrc="DBSRC3" datafld="quote" dataformatas="HTML">...</span>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataFld
dataformatas NN n/a IE 4 HTML |4| 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.
dataformatas="dataType" Optional This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
Example
<span datasrc="DBSRC3" datafld="quote" dataformatas="HTML">...</span>Value
Case-insensitive constants: html | text.
Default
text
Object Model Reference
[window.]document.getElementById(elementID).dataFormatAs
datasrc NN n/a IE 4 HTML |4| 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.
datasrc="dataSourceName" Optional 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 |
<p>If at first you don't succeed, <strike>do it over</strike> try, try again.</p>
[window.]document.getElementById(elementID)
None.
None.
| <strong> | NN all IE all HTML all |
| <strong>...</strong> | HTML End Tag: Required |
<p>Don't delay. <strong>Order today</strong> to get the maximum discount. </p>
[window.]document.getElementById(elementID)
None.
None.
| <style> | NN 4 IE 3 HTML 4 |
| <style>...</style> | HTML End Tag: Required |
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.
<style type="text/css">
<!--
h1 {font-size:18pt; text-transform:capitalize}
p {font-size:12pt}
-->
</style>[window.]document.getElementsByTagName("style")[i]
[window.]document.getElementById(elementID)|
disabled |
media |
type |
None.
disabled NN n/a IE 4 HTML n/a Disables the entire style element, as if it didn't exist in the document. IE/Mac responds to this attribute starting in Version 5.
disabled Optional 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
media NN 6 IE 4 HTML 4 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.
media="descriptorList" Optional 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
type NN 4 IE 4 HTML 4 The type attribute tells the browser which style sheet syntax to use to interpret the style rules defined in the current element.
type="MIMEType" Required 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 |
<p>"Heavy water" (H<sub>3</sub>O) has one more hydrogen atom than regular water.</p>
[window.]document.getElementById(elementID)
None.
None.
| <sup> | NN 2 IE 3 HTML 3.2 |
| <sup>...</sup> | HTML End Tag: Required |
<p>This book is published by O'Reilly<sup>™</sup>.</p>
[window.]document.getElementById(elementID)
None.
None.
| <table> | NN all IE all HTML 3.2 |
| <table>...</table> | HTML End Tag: Required |
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.
<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>
[window.]document.getElementById(elementID)
|
align |
background |
bgcolor |
border |
bordercolor |
|
bordercolordark |
bordercolorlight |
cellpadding |
cellspacing |
cols |
|
datapagesize |
datasrc |
frame |
height |
hspace |
|
layout |
rules |
summary |
vspace |
width |
|
Handler |
NN |
IE |
HTML |
|---|---|---|---|
| onafterupdate |
n/a |
4 |
n/a |
| onbeforeupdate |
n/a |
4 |
n/a |
| onrowenter |
n/a |
4 |
n/a |
| onrowexit |
n/a |
4 |
n/a |
align NN all IE all HTML 3.2 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.
align="where" Optional Example
<table align="center">...</table>Value
Alignment constant: center | left | right.
Default
left
Object Model Reference
[window.]document.getElementById(elementID).align
background NN 4 IE 3 HTML n/a 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.
background="URL" Optional Navigator 4 can be quirky with this attribute. Be prepared to wrap your main table (without a background) inside another table element, whose background property has a graphic file assigned to it.
Example
<table background="watermark.jpg">...</table>Value
Any valid URL to an image file, including complete and relative URLs.
Default
None (table is transparent).
Object Model Reference
[window.]document.getElementById(elementID).background
bgcolor NN 3 IE 3 HTML 3.2 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.
bgcolor="colorTripletOrName" Optional Example
<table bgcolor="tan">...</table>Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.getElementById(elementID).bgColor
border NN all IE all HTML 3.2 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.
border="pixelCount" Optional If you include only the border attribute without assigning any value to it, the browser renders default-sized borders around the entire table and between cells, unless overridden by other attributes.
Browsers render the border in a 3-D style, with the border appearing to be raised around the flat content in the cells. Numerous other attributes affect the look of the border, including: bordercolor, bordercolordark, bordercolorlight, frame, and rules. The type of border rendered for tables is different from the borders defined by style sheet rules. You get better control of the border look by using the dedicated attributes of the table element.
Example
<table border="1">...</table>Value
A positive integer value.
Default
0
Object Model Reference
[window.]document.getElementById(elementID).border
bordercolor NN 4 IE 3 HTML n/a 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.
bordercolor="colorTripletOrName" Optional 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, bordercolorlight NN 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
cellpadding NN all IE 3 HTML 3.2 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).
cellpadding="length" Optional Example
<table border="2" cellpadding="3">...</table>Value
Any length value in pixels or percentage of available space. Percentage values are based on the total available space in the horizontal and vertical dimensions of the cell. For example, a value of 10% means that the left and right padding will each be 5% of the total width of the cell; the top and bottom padding will each be 5% of the total height of the cell.
Default
0
Object Model Reference
[window.]document.getElementById(elementID).cellPadding
cellspacing NN all IE 3 HTML 3.2 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.
cellspacing="length" Optional Example
<table border="2" cellspacing="10">...</table>Value
Any positive integer.
Default
0 (no table border); 2 (with table border).
Object Model Reference
[window.]document.getElementById(elementID).cellSpacing
cols NN 4 IE 3 HTML n/a 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.
cols="columnCount" Optional Example
<table cols="4">...</table>Value
Any positive integer.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).cols
datapagesize NN n/a IE 4 HTML n/a 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).
datapagesize="recordCount" Optional Example
<table datasrc="DBSRC3" datapagesize="5"> <tr> <td><input type="text" datafld="stockNum"></td> <td><input type="text" datafld="qtyOnHand"></td> </tr> </table>Value
Any positive integer.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataPageSize
datasrc NN n/a IE 4 HTML n/a 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="dataSourceName" Optional A block of contiguous records can be rendered in the table when you also set the datapagesize attribute of the table. Works only with text file data sources in IE 5/Mac.
Example
<table datasrc="DBSRC3" datapagesize="5">...</table>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).dataSrc
frame NN 6 IE 3 HTML 4 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.
frame="frameConstant" Optional 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, width NN 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, vspace NN 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
layout NN 6 IE n/a HTML n/a 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.
layout="layoutType" Optional Example
<table layout="fixed" width="500">...</table>Value
Constant values: auto | fixed.
Default
auto
rules NN 7 IE 3 HTML 4 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.
rules="rulesConstant" Optional Example
<table border="3" rules="groups">...</table>Value
Any one case-insensitive rules constant:
- all
- Renders borders around each cell
- cols
- Renders borders between columns only
- groups
- Renders borders between cell groups as defined by the thead, tfoot, tbody, colgroup, or col elements
- none
- Hides all interior borders
- rows
- Renders borders between rows only
Default
none (when border=0); all (when border is any other value).
Object Model Reference
[window.]document.getElementById(elementID).rules
summary NN 6 IE 6 HTML 4 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.
summary="text" Optional 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 |
<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>
[window.]document.getElementById(elementID)
|
align |
bgcolor |
ch |
char |
charoff |
|
choff |
valign |
None.
align NN 6 IE 4 HTML 4 Establishes the horizontal alignment characteristics of content within the row(s) covered by the tbody element.
align="alignConstant" Optional 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
bgcolor NN 6 IE 4 HTML n/a Establishes a fill color (behind the text and other content) for the cells contained by the tbody element.
bgcolor="colorTripletOrName" Optional Example
<tbody bgcolor="tan">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.getElementById(elementID).bgColor
char NN 6 IE n/a HTML 4 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.
char="character" Optional Example
<tbody align="char" char=".">Value
Any single text character.
Default
None.
charoff NN 6 IE n/a HTML 4 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.
charoff="length" Optional Example
<tbody align="char" char="." charoff="80%">Value
Any length value in pixels or percentage of cell space.
Default
None.
choff
See charoff.
valign NN 6 IE 4 HTML 4 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.
valign="alignmentConstant" Optional 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 |
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.
<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>
[window.]document.getElementById(elementID)
|
abbr |
align |
axis |
background |
bgcolor |
|
bordercolor |
bordercolordark |
bordercolorlight |
ch |
char |
|
charoff |
choff |
colspan |
datafld |
dir |
|
headers |
height |
nowrap |
rowspan |
scope |
|
valign |
width |
|
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 |
abbr NN 6 IE 6 HTML 4 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.
abbr="text" Optional Example
<td abbr="Main Event">Keynote Speakers</td>Value
Any quoted string.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).abbr
align NN all IE all HTML 3.2 Establishes the horizontal alignment characteristics of content within the cell covered by the td element.
align="alignConstant" Optional 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
axis NN 6 IE 6 HTML 4 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.
axis="text" Optional Example
<td axis="event">Keynote Speakers</td>Value
Any quoted string.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).axis
background NN 4 IE 3 HTML n/a 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.
background="URL" Optional Example
<td background="watermark.jpg">Value
Any valid URL to an image file, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).background
bgcolor NN 3 IE 3 HTML 3.2 Establishes a fill color (behind the text and other content) for the cell defined by the td element.
bgcolor="colorTripletOrName" Optional Example
<td bgcolor="yellow">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.getElementById(elementID).bgColor
bordercolor NN n/a IE 3 HTML n/a 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.
bordercolor="colorTripletOrName" Optional Example
<td bordercolor="green">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser and operating system.
Object Model Reference
[window.]document.getElementById(elementID).borderColor
bordercolordark, bordercolorlight NN 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
char NN 6 IE n/a HTML 4 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.
char="character" Optional Example
<td align="char" char=".">203.00</td>Value
Any single text character.
Default
None.
charoff NN 6 IE n/a HTML 4 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.
charoff="length" Optional Example
<td align="char" char="." charoff="80%">Value
Any length value in pixels or percentage of cell space.
Default
None.
choff
See charoff.
colspan NN all IE all HTML 3.2 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.
colspan="columnCount" Optional Example
<td colspan="2" align="center">Value
Any positive integer, usually 2 or larger.
Default
1
Object Model Reference
[window.]document.getElementById(elementID).colSpan
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<table datasrc="DBSRC3" datapagesize="5"> <tr> <td datafld="stockNum"></td> <td datafld="qtyOnHand"></td> </tr> </table>Value
Case-sensitive identifier.
Default
None.
headers NN 6 IE 6 HTML 4 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.
headers="cellIDList" Optional Example
<tr> <th id="hdr1">Product Number</th> <th id="hdr2">Description</th> </tr> <tr> <td headers="hdr1">0392</td> <td headers="hdr2">Round widget</td> </tr>Value
A space-delimited list of case-sensitive IDs assigned to cells that act as headers to the current cell.
Default
None.
height, width NN 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
nowrap NN all IE all HTML 3.2 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.
nowrap Optional Example
<td nowrap>Value
The presence of this attribute sets its value to true.
Default
false
Object Model Reference
[window.]document.getElementById(elementID).noWrap
rowspan NN all IE all HTML 3.2 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.
rowspan="rowCount" Optional Example
<td rowspan="2">Value
Any positive integer, usually 2 or larger.
Default
1
Object Model Reference
[window.]document.getElementById(elementID).rowSpan
scope NN 6 IE 6 HTML 4 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.
scope="scopeConstant" Optional Example
<tr> <th scope="col">Product Number</th> <th scope="col">Description</th> </tr> <tr> <td>0392</td> <td>Round widget</td> </tr>Value
One of four recognized scope constants:
- col
- Current cell text becomes header text for every cell in the rest of the column.
- colgroup
- Current cell text becomes header text for every cell in the rest of the colgroup element.
- row
- Current cell text becomes header text for every cell in the rest of the tr element.
- rowgroup
- Current cell text becomes header text for every cell in the rest of the tbody element.
Default
None.
valign NN all IE all HTML 3.2 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.
valign="alignmentConstant" Optional 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 |
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).
<textarea rows="5" cols="60" name="notes">Use this area for extra notes. </textarea>
[window.]document.formName.elementName [window.]document.forms[i].elements[j] [window.]document.getElementById(elementID)
|
cols |
datafld |
datasrc |
disabled |
name |
|
readonly |
rows |
wrap |
|
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 |
cols NN all IE all HTML all 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.
cols="columnCount" Optional Example
<textarea cols="40">...</textarea>Value
Any positive integer.
Default
Varies with browser and operating system.
Object Model Reference
[window.]document.formName.elementName.cols [window.]document.forms[i].elements[j].cols [window.]document.getElementById(elementID).cols
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<textarea name="summary" datasrc="DBSRC3" datafld="summary"></textarea>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.formName.elementName.dataFld [window.]document.forms[i].elements[j].dataFld [window.]document.getElementById(elementID).dataFld
datasrc NN n/a IE 4 HTML n/a 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.
datasrc="dataSourceName" Optional Example
<textarea name="summary" datasrc="DBSRC3" datafld="summary"></textarea>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.formName.elementName.dataSrc [window.]document.forms[i].elements[j].dataSrc [window.]document.getElementById(elementID).dataSrc
disabled NN 6 IE 4 HTML 4 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.
disabled Optional 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
name NN all IE all HTML all 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.
name="elementIdentifier" Optional Example
<textarea name="comments" id="comments"></textarea>Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.formName.elementName.name [window.]document.forms[i].elements[j].name [window.]document.getElementById(elementID).name
readonly NN 6 IE 4 HTML 4 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.
readonly Optional 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
rows NN all IE all HTML all 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.
rows="rowCount" Optional Example
<textarea rows="5" cols="40"></textarea>Value
Any positive integer.
Default
Varies with browser and operating system.
Object Model Reference
[window.]document.formName.elementName.rows [window.]document.forms[i].elements[j].rows [window.]document.getElementById(elementID).rows
wrap NN 2 IE 4 HTML n/a 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.
wrap="wrapType" Required 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 |
<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>
[window.]document.getElementById(elementID)
|
align |
bgcolor |
ch |
char |
charoff |
|
choff |
valign |
None.
align NN n/a IE 4 HTML 4 Establishes the horizontal alignment characteristics of content within the row(s) covered by the tfoot element.
align="alignConstant" Optional 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
bgcolor NN 6 IE 4 HTML n/a Establishes a fill color (behind the text and other content) for the cells contained by the tfoot element.
bgcolor="colorTripletOrName" Optional Example
<tfoot bgcolor="tan">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.getElementById(elementID).bgColor
char NN 6 IE n/a HTML 4 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.
char="character" Optional Example
<tfoot align="char" char=".">Value
Any single text character.
Default
None.
charoff NN 6 IE n/a HTML 4 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.
charoff="length" Optional Example
<tfoot align="char" char="." charoff="80%">Value
Any length value in pixels or percentage of cell space.
Default
None.
choff
See charoff.
valign NN 6 IE 4 HTML 4 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.
valign="alignmentConstant" Optional 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 |
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.
<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>
[window.]document.getElementById(elementID)
|
abbr |
align |
axis |
background |
bgcolor |
|
bordercolor |
bordercolordark |
bordercolorlight |
ch |
char |
|
charoff |
choff |
colspan |
datafld |
headers |
|
height |
nowrap |
rowspan |
scope |
valign |
|
width |
|
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 |
abbr NN 6 IE 6 HTML 4 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.
abbr="text" Optional Example
<th abbr="What">Event</th>Value
Any quoted string.
Default
None.
align NN all IE all HTML 3.2 Establishes the horizontal alignment characteristics of content within the cell covered by the th element.
align="alignConstant" Optional 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
axis NN 6 IE 6 HTML 4 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.
axis="text" Optional Example
<th axis="event">Events</th>Value
Any quoted string.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).axis
background NN 4 IE 3 HTML n/a 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.
background="URL" Optional Example
<th background="watermark.jpg">Value
Any valid URL to an image file, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).background
bgcolor NN 3 IE 3 HTML 3.2 Establishes a fill color (behind the text and other content) for the cell defined by the th element.
bgcolor="colorTripletOrName" Optional Example
<th bgcolor="yellow">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.getElementById(elementID).bgColor
bordercolor NN n/a IE 3 HTML n/a 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.
bordercolor="colorTripletOrName" Optional Example
<th bordercolor="green">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser and operating system.
Object Model Reference
[window.]document.getElementById(elementID).borderColor
bordercolordark, bordercolorlight NN 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
char NN 6 IE n/a HTML 4 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.
char="character" Optional Example
<th align="char" char=".">$325.10</th>Value
Any single text character.
Default
None.
charoff NN 6 IE n/a HTML 4 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.
charoff="length" Optional Example
<th align="char" char="." charoff="80%">Value
Any length value in pixels or percentage of cell space.
Default
None.
choff
See charoff.
colspan NN all IE all HTML 3.2 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.
colspan="columnCount" Optional Example
<th colspan="2" align="right">Value
Any positive integer, usually 2 or larger.
Default
1
Object Model Reference
[window.]document.getElementById(elementID).colSpan
datafld NN n/a IE 4 HTML n/a 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.
datafld="columnName" Optional Example
<table datasrc="DBSRC3" datapagesize="5"> <tr> <th datafld="stockNum"></th> <th datafld="qtyOnHand"></th> </tr> </table>Value
Case-sensitive identifier.
Default
None.
headers NN 6 IE 6 HTML 4 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.
headers="cellIDList" Optional Example
<tr> <th id="hdr1">Product Number</th> <th id="hdr2">Description</th> </tr> <tr> <th headers="hdr1">0392</th> <th headers="hdr2">Round widget</th> </tr>Value
A space-delimited list of case-sensitive IDs assigned to cells that act as headers to the current cell.
Default
None.
height, width NN 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
nowrap NN all IE all HTML 3.2 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.
nowrap Optional Example
<th nowrap>Value
The presence of this attribute sets its value to true.
Default
false
Object Model Reference
[window.]document.getElementById(elementID).noWrap
rowspan NN all IE all HTML 3.2 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.
rowspan="rowCount" Optional Example
<th rowspan="2">Value
Any positive integer, usually 2 or larger.
Default
1
Object Model Reference
[window.]document.getElementById(elementID).rowSpan
scope NN 6 IE 6 HTML 4 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.
scope="scopeConstant" Optional Example
<tr> <th scope="col">Product Number</th> <th scope="col">Description</th> </tr> <tr> <td>0392</td> <td>Round widget</td> </tr>Value
One of four recognized scope constants:
- col
- Current cell text becomes header text for every cell in the rest of the column.
- colgroup
- Current cell text becomes header text for every cell in the rest of the colgroup element.
- row
- Current cell text becomes header text for every cell in the rest of the tr element.
- rowgroup
- Current cell text becomes header text for every cell in the rest of the tbody element.
Default
None.
valign NN all IE all HTML 3.2 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.
valign="alignmentConstant" Optional Example
<th valign="bottom">Value
Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell's contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell's text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.
Default
middle
Object Model Reference
[window.]document.getElementById(elementID).vAlign
width See height.
| <thead> | NN 6 IE 3 HTML 4 |
| <thead>...</thead> | HTML End Tag: Optional |
<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>
[window.]document.getElementById(elementID)
|
align |
bgcolor |
ch |
char |
charoff |
|
choff |
valign |
None.
align NN 6 IE 4 HTML 4 Establishes the horizontal alignment characteristics of content within the row(s) covered by the thead element.
align="alignConstant" Optional Example
<thead 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 is important to bear in mind that the align attribute applies to every cell of every row within the thead, including any th element you specify for the table. If you want a different alignment for the row header, override the setting with a separate align attribute or text-align style sheet attribute for the individual th elements.
Default
left
Object Model Reference
[window.]document.getElementById(elementID).align
bgcolor NN 6 IE 4 HTML n/a Establishes a fill color (behind the text and other content) for the cells contained by the thead element.
bgcolor="colorTripletOrName" Optional Example
<thead bgcolor="tan">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.getElementById(elementID).bgColor
char NN 6 IE n/a HTML 4 The char attribute defines the text character used as an alignment point for text within a cell contained by the thead element. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the char attribute.
char="character" Optional Example
<thead align="char" char=".">Value
Any single text character.
Default
None.
charoff NN 6 IE n/a HTML 4 The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell contained by the thead element. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the charoff attribute.
charoff="length" Optional Example
<thead align="char" char="." charoff="80%">Value
Any length value in pixels or percentage of cell space.
Default
None.
choff
See charoff.
valign NN 6 IE 4 HTML 4 Determines the vertical alignment of content within cells of the column(s) covered by the thead element. You can override the vertical alignment for a particular cell anywhere in the column.
valign="alignmentConstant" Optional Example
<thead valign="bottom">Value
Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell's contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell's text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.
Default
middle
Object Model Reference
[window.]document.getElementById(elementID).vAlign
| <title> | NN all IE all HTML all |
| <title>...</title> | HTML End Tag: Required |
<title>Declaration of Independence</title>
[window.]document.getElementById(elementID)
None.
None.
| <tr> | NN all IE all HTML all |
| <tr>...</tr> | HTML End Tag: Optional |
<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>
[window.]document.getElementById(elementID)
|
align |
background |
bgcolor |
bordercolor |
bordercolordark |
|
bordercolorlight |
ch |
char |
charoff |
choff |
|
height |
valign |
width |
None.
align NN 6 IE 4 HTML 4 Establishes the horizontal alignment characteristics of content within the row.
align="alignConstant" Optional Example
<tr 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 is important to bear in mind that the align attribute applies to every cell within the tr element, including any th element you specify for the table. If you want a different alignment for the row header, override the setting with a separate align attribute or text-align style sheet attribute for the tr or individual th elements.
Default
center
Object Model Reference
[window.]document.getElementById(elementID).align
background NN 4 IE n/a HTML n/a Specifies an image file that is used as a backdrop to the entire row of cells. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available cell space. Smaller images download faster but are obviously repeated more often in the background. Navigator 4, however, requires a minimum image size of 16 by 16 pixels. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.
background="URL" Optional Example
<tr background="watermark.jpg">Value
Any valid URL to an image file, including complete and relative URLs.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).background
bgcolor NN 3 IE 4 HTML 4 Establishes a fill color (behind the text and other content) for the cells contained by the tr element.
bgcolor="colorTripletOrName" Optional Example
<tr bgcolor="lavender">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser, browser version, and operating system.
Object Model Reference
[window.]document.getElementById(elementID).bgColor
bordercolor NN n/a IE 3 HTML n/a The color used to render some of the pixels that create the illusion of borders around cells and the entire table. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.
bordercolor="colorTripletOrName" Optional Example
<tr bordercolor="green">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with browser and operating system.
Object Model Reference
[window.]document.getElementById(elementID).borderColor
bordercolordark, bordercolorlight NN 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
<tr bordercolordark="darkred" bordercolorlight="salmon">Value
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.
Default
Varies with operating system.
Object Model Reference
[window.]document.getElementById(elementID).borderColorDark [window.]document.getElementById(elementID).borderColorLight
char NN 6 IE n/a HTML 4 The char attribute defines the text character used as an alignment point for text within a cell contained by the tr element. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the char attribute.
char="character" Optional Example
<tr align="char" char=".">Value
Any single text character.
Default
None.
charoff NN n/a IE n/a HTML 4 The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell contained by the tr element. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the charoff attribute.
charoff="length" Optional Example
<tr align="char" char="." charoff="80%">Value
Any length value in pixels or percentage of cell space.
Default
None.
choff
See charoff.
valign NN 6 IE 4 HTML 4 Determines the vertical alignment of content within cells of the column(s) covered by the tr element. You can override the vertical alignment for a particular cell anywhere in the row.
valign="alignmentConstant" Optional Example
<tr valign="bottom">Value
Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell's contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell's text aligns with the other cells in the row—usually the most aesthetically pleasing arrangement.
Default
middle
Object Model Reference
[window.]document.getElementById(elementID).vAlign
| <tt> | NN all IE all HTML all |
| <tt>...</tt> | HTML End Tag: Required |
<p>The computer said, <tt>"That does not compute."</tt></p>
[window.]document.getElementById(elementID)
None.
None.
| <u> | NN 3 IE 3 HTML 3.2 |
| <u>...</u> | HTML End Tag: Required |
<p>You may already be a <u>winner</u>!</p>
[window.]document.getElementById(elementID)
None.
None.
| <ul> | NN all IE all HTML all |
| <ul>...</ul> | HTML End Tag: Required |
<ul>
<li>Africa</li>
<li>Antarctica</li>
<li>Asia</li>
<li>Australia</li>
<li>Europe</li>
<li>North America</li>
<li>South America</li>
</ul>[window.]document.getElementById(elementID)
|
compact |
type |
None.
compact NN 6 IE 4 HTML 3.2 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.
compact Optional Example
<ul compact>...</ul>Value
The presence of this attribute makes its value true.
Default
false
type NN all IE all HTML 3.2 The type attribute provides some flexibility in how the leading symbol or sequence number is displayed in the browser. You can specify whether the leading symbol should be a disc, circle, or square. A disc is a filled circle (also known as a bullet). The square type is rendered as an outline in early Macintosh browsers, and as a filled square in Windows and modern browsers of all OS types. The type attribute is deprecated in HTML 4 in favor of the list-style-type style sheet attribute.
type="labelType" Optional Example
<ul type="disc">...</ul>Value
Possible values are circle | disc | square.
Default
disc
Object Model Reference
[window.]document.getElementById(elementID).type
| <var> | NN all IE all HTML all |
| <var>...</var> | HTML End Tag: Required |
Browsers have free rein to determine how (or whether) to distinguish var element content from the rest of the body element. Both Navigator and Internet Explorer elect to render var element content in an italic font. Override the default with a style sheet as you see fit.
<p>The value of <var>offsetWidth</var> becomes 20.</p>
[window.]document.getElementById(elementID)
None.
None.
| <wbr> | NN all IE all HTML n/a |
| <wbr> | HTML End Tag: Forbidden |
<nobr>This is a long line of text that could run on and on, <wbr>forcing the browser to display the horizontal scrollbar after awhile.</nobr>
[window.]document.getElementById(elementID)
None.
None.
| <xml> | NN n/a IE 5 HTML n/a |
| <xml>...</xml> | End Tag: Required |
<xml id="xmlData">
<xmlresults>
<!-- xml data here -->
</xmlresults>
</xml>[window.]document.getElementById(elementID)
|
src |
None.
src NN n/a IE 5 HTML n/a Points to an external source of XML data to be loaded into the element.
src="URI" Optional Example
<xml id="xmldata" src="http://www.magacorp.com/data/2003Forecast.xml></xml>Value
Any valid URI whose return value contains XML data.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).src
| <xmp> | NN all IE all HTML <4 |
| <xmp>...</xmp> | HTML End Tag: Required |
<xmp>
<script language="JavaScript">
document.write("Hello, world.");
</script>
</xmp>[window.]document.getElementById(elementID)
None.
None.
|  | |
| 8.2. Shared HTML Element Attributes |  | 9. Document Object Model Reference |
Copyright © 2003 O'Reilly & Associates. All rights reserved.