 |  |
8.2. Shared HTML Element Attributes
A vast majority of elements found in HTML 4.x, XHTML 1.x, Internet Explorer, and Netscape Navigator have numerous attributes in common. Rather than repeat the descriptions of these attributes ad nauseam in the reference listings, their details are listed here only once. These shared attributes do not appear in the attribute lists for each element in the rest of this chapter, but they are available in practically every element (within the browser or standard version range indicated in each listing). Obviously, the few shared attributes that are meaningless except for rendered elements may not be available to nonrendered elements. For example, it wouldn't make any sense to apply the tabindex attribute to a style element because the style element presents no content of its own on the page to which a user could tab. In a few cases, the W3C specifications do not implement common attributes in nonrendered elements, but the browsers support them because the W3C DOM establishes scriptable properties for those attributes. Consult Appendix E to verify HTML 4 and XHTML DTD support for a particular shared attribute. Here is a list of the shared attributes.
8.2.1. Attributes
| accesskey | class | contenteditable | dir | disabled |
| hidefocus | id | lang | language | style |
| tabindex | title | unselectable | xml:lang |
| accesskey | NN 6 (see text) IE 4/5 HTML 4 (see text) |
| accesskey="character" | Optional |
A single character key that either gives focus to an element (in some browsers) or activates a form control or link action. The browser and operating system determine if the user must press a modifier key (e.g., Ctrl, Alt, or Command) with the access key to activate the link. In Windows versions of IE 4 and later and Netscape 6, the Alt key is required and the key is not case-sensitive. For Macintosh versions of IE 5 and later and Netscape 6, the Ctrl modifier key is required to effect the action.
Although accesskey is listed here as a widely shared attribute, that isn't strictly the case across all implementations. HTML 4 and Netscape 6 recognize this attribute only for the following elements: a, area, button, input, label, legend, and textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, object, select, span, table, and td (but removes label and legend). IE 5 adds every other renderable element, but with a caution: except for input and other form-related elements, you must also assign a tabindex attribute to the IE 5 and later element (even if simply a value of zero for all) to let the accelerator key combination bring focus to the element.
Example
<a href="http://www.megacorp.com/toc.html" accesskey="t">Table of Contents</a> <h2 class="subsection" accesskey="2" tabindex="0">Part Two</h2>
Value
Single character of the document set.
Default
None.
Object Model Reference
[window.]document.links[i].accessKey [window.]document.anchors[i].accessKey [window.]document.formName.elementName.accessKey [window.]document.forms[i].elements[j].accessKey [window.]document.getElementById(elementID).accessKey
| class | NN 4 IE 3 HTML 4 |
| class="className1[ ...classNameN]" | Optional |
An identifier generally used to associate an element with a style sheet rule defined for a class selector. See Chapter 3. Use the class attribute only with visible (renderable) elements.
Example
<a class="chapTitle" name="chapter3" id="chapter3">Chapter 3</a>
Value
Case-sensitive identifier. Multiple classes can be assigned by separating the class names with spaces within the quoted attribute value.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).className
| contenteditable | NN n/a IE 5.5 HTML n/a |
| contenteditable="featureSwitch" | Optional |
Boolean switch that enables or disables the user's ability to edit the element's content directly on the web page. Requires IE 5.5 or later (Win32 only). For more information about scriptable editing in IE for Windows, see the onmove event handler in Chapter 10 and visit http://msdn.microsoft.com/workshop/author/editing/editing_entry.asp.
Example
<p id="userArea" contenteditable="true">Enter your text here.</p>
Value
true | false | inherit
Default
inherit
Object Model Reference
[window.]document.getElementById(elementID).contentEditable
| dir | NN 6 IE 5 HTML 4 |
| dir="direction" | Optional |
The direction of character rendering for the element's text when the characters are not governed by inherent directionality according to the Unicode standard. Character rendering is either left-to-right or right-to-left. This attribute is usually set in concert with the lang attribute; it must be used to specify a character-rendering direction that overrides the current direction.
Example
<a lang="ar" dir="rtl">Some Unicode Arabic text characters here</a>
Value
ltr | rtl
Default
ltr
| disabled | NN 6 IE 4/5.5 HTML 4 |
| disabled="featureSwitch" | Optional |
Boolean switch that enables or disables the user's ability to activate or otherwise access an element. This attribute is limited to interactive form control elements in Netscape 6 and HTML 4. IE 5.5 and later (Win32 only) also applies this attribute to most other renderable elements. Disabled elements are usually "greyed out" to distinguish themselves from other elements.
Example
<input type="submit" name="sender" disabled="true">
Value
true | false
Default
false
Object Model Reference
[window.]document.getElementById(elementID).disabled
| hidefocus | NN n/a IE 5.5 HTML n/a |
| hidefocus="featureSwitch" | Optional |
Boolean switch that enables or disables the browser's ability to display a dotted focus rectangle around an element that has focus. The element continues to be able to receive focus if it is focusable by default or has the tabindex attribute set. Focus is necessary for some keyboard-only accessibility situations, but when this attribute is switched on, there is no visual clue about the focus state. Requires IE 5.5 or later (Win32 only).
Example
<input type="image" src="sendme.jpg" hidefocus="true">
Value
true | false
Default
false
Object Model Reference
[window.]document.getElementById(elementID).hideFocus
| id | NN 4 IE 4 HTML 4 |
| id="elementIdentifier" | Optional |
A unique identifier that distinguishes this element from all the rest in the document. Can be used to associate a single element with a style rule naming this attribute value as an ID selector. An element can have an ID assigned for uniqueness as well as a class for inclusion within a group. See Chapter 3.
IE 4 and later and Netscape 6 allow id attributes for nonrenderable elements, but if your code requires validation, be aware that the W3C HTML 4 and XHTML DTDs do not. Because all W3C DOM elements have an id property, it is natural to assign an id attribute to non-renderable elements if scripts must reference those elements. Or, your scripts may use other ways (e.g., the array returned by document.getElementsByTagName( )) to reference such elements.
Assign identifiers to id attributes in order to duplicate values previously only assigned to name attributes in elements that feature the name attribute. Current browser form controls still require name attributes for name/value pairs to be submitted with the form, and a elements acting as anchors still need name attributes. Be sure to assign an identifier to the id attribute of any element you intend to reference by script.
Example
<h2 id="sect3Head">Section Three</h2>
Value
Case-sensitive identifier.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).id
| lang | NN 3 IE 4 HTML 4 |
| lang="languageCode" | Optional |
The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices.
Example
<span lang="de">Deutsche Bundesbahn</span>
Value
Case-insensitive language code.
Default
Browser default.
Object Model Reference
[window.]document.getElementById(elementID).lang
| language | NN n/a IE 4 HTML n/a |
| language="scriptingLanguage" | Optional |
Sets the scripting language (and switches on the desired scripting engine) for script statements defined in the element (such as event handler script statements in the tag). This attribute is distinct from the language attribute currently in common use with the script element. Internet Explorer uses the language attribute in any element to engage a different script language interpreter for script statements, such as executing VBScript statements in the string assigned to an event handler attribute. If you use JScript exclusively within a document, you don't have to use this attribute.
Example
How <span class="bolds" language="vbscript" onClick="MsgBox 'Hi, there!'">bold</b> it is!
Value
javascript | jscript | vbs | vbscript
Default
Although the default scripting language of IE 4 and later is JScript, no value is automatically assigned to this attribute if the attribute is not included in the tag.
Object Model Reference
[window.]document.getElementById(elementID).language
| style | NN 4 IE 4 HTML 4 |
| style="styleSheetProperties" | Optional |
This attribute lets you set one or more style sheet rule property assignments for the current element. You may use the CSS or (for Navigator 4 only) JavaScript syntax for assigning style attributes. Use the style attribute only with visible (renderable) elements.
Example
<span style="color:green; font-size:18px">Big, green, and bold</span>
Value
An entire CSS-syntax style sheet rule is enclosed in quotes. Multiple style attribute settings are separated by semicolons. Style sheet attributes are detailed in Chapter 11.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).style
| tabindex | NN 6 IE 4 HTML 4 |
| tabindex="integer" | Optional |
A number that indicates the sequence of this element within the tabbing order of all focusable elements in the document. Tabbing order follows a strict set of rules. Elements that have values other than zero assigned to their tabindex attributes are first in line when a user starts tabbing in a page. Focus starts with the element with the lowest tabindex value and proceeds in order to the highest value, regardless of physical location on the page or in the document. If two elements have the same tabindex values, the element that comes earlier in the document receives focus first. Next come all elements that either don't support the tabindex attribute or have the value set to zero. These elements receive focus in the order in which they appear in the document. Note that reloading the current page does not necessarily restart the tabbing sequence from the "top." Therefore, controlling tabbing sequence is most helpful when the logic of your focusable elements is something other than the source code order of those elements (e.g., directing tabbing to fields down table columns rather than across rows).
HTML 4 and Netscape 6 limit the tabindex attribute to the following elements: a, area, button, input, object, select, textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, span, table, and td. IE 5 adds every other renderable element. A negative value in IE (only) removes an element from tabbing order entirely.
Links and anchors cannot be tabbed to with the Mac version of IE 4, so the tabindex for a elements is ignored in that version.
Example
<a href="chapter3.html" tabindex="3">Chapter 3</a>
Value
Any integer from 0 through 32,767. In IE, setting tabindex to a negative value causes the element to be skipped in tabbing order altogether.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).tabIndex
| title | NN 6 IE 3 HTML 3.2 |
| title="advisoryText" | Optional |
An advisory description of the element. For HTML elements that produce visible content on the page, IE 4 and later and Netscape 6 render the content of the title attribute as a tooltip when the cursor rests on the element for a moment. For example, the table-related col element does not display content, so its title attribute is merely advisory. To generate tooltips in tables, assign title attributes to elements such as table, tr, th, or td.
The font and color properties of the tooltip are governed by the browser, and are not modifiable under script control. In IE/Windows, the tooltip is the standard small, light-yellow rectangle; in IE/Mac, the tooltip displays as a cartoon bubble in the manner of the Mac OS bubble help system. Netscape 6 tooltips are the same small rectangle on all OS versions. If no attribute is specified, the tooltip does not display.
You can assign any descriptive text you like to this attribute. Not everyone will see it, however, so do not put mission-critical information here. Browsers designed to meet web accessibility criteria might use this attribute's information to read information about a link or nontext elements to vision-impaired web surfers. Therefore, don't ignore this potentially helpful aid to describing an element's purpose on the page.
Although the compatibility listing for this attribute dates the attribute back to Internet Explorer 3 and HTML 3.2, it is newly ascribed to many elements starting with IE 4 and HTML 4.0.
Example
<span title="United States of America">U.S.A.</span>
Value
Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.
Default
None.
Object Model Reference
[window.]document.getElementById(elementID).title
| unselectable | NN n/a IE 5.5 HTML n/a |
| unselectable="featureSwitch" | Optional |
Boolean switch that enables or disables the browser's ability to select any portion of the element. Requires IE 5.5 or later (Win32 only).
Example
<p unselectable="on">...</p>
Value
on | off
Default
off
| xml:lang | NN n/a IE n/a HTML X1.0 |
| xml:lang="languageCode" | Optional |
This is the XML version of the HTML-only lang attribute, as specified in the W3C XML recommendation. Use this only in an XHTML-conforming document and in browsers that understand XML namespaces. XML processors other than current browsers can make content and display decisions based on values assigned to this attribute (e.g., display the element only if the browser and operating system support the language script style). Browser documents should continue to use the lang attribute, even when it duplicates the xml:lang attribute setting.
Example
<span lang="de" xml:lang="de">Deutsche Bundesbahn</span>
Value
Case-insensitive language code.
8.2.2. Event Handler Attributes
|
Handler |
NN |
IE/Windows |
IE/Mac |
HTML |
|---|---|---|---|---|
| onactivate |
n/a |
5.5 |
n/a |
n/a |
| onbeforecopy |
n/a |
5 |
n/a |
n/a |
| onbeforecut |
n/a |
5 |
n/a |
n/a |
| onbeforedeactivate |
n/a |
5.5 |
n/a |
n/a |
| onbeforeeditfocus |
n/a |
5 |
n/a |
n/a |
| onbeforepaste |
n/a |
5 |
n/a |
n/a |
| onblur |
2/6 |
3/4 |
3/4 |
4 |
| onclick |
2/6 |
3/4 |
3/4 |
4 |
| oncontextmenu |
n/a |
5 |
n/a |
n/a |
| oncontrolselect |
n/a |
5.5 |
n/a |
n/a |
| oncopy |
n/a |
5 |
n/a |
n/a |
| oncut |
n/a |
5 |
n/a |
n/a |
| ondblclick |
4/6 |
4 |
4 |
4 |
| ondeactivate |
n/a |
5.5 |
n/a |
n/a |
| ondrag |
n/a |
5 |
n/a |
n/a |
| ondragend |
n/a |
5 |
n/a |
n/a |
| ondragenter |
n/a |
5 |
n/a |
n/a |
| ondragleave |
n/a |
5 |
n/a |
n/a |
| ondragover |
n/a |
5 |
n/a |
n/a |
| ondragstart |
n/a |
5 |
n/a |
n/a |
| ondrop |
n/a |
5 |
n/a |
n/a |
| onfilterchange |
n/a |
4 |
n/a |
n/a |
| onfocus |
2/6 |
3/4 |
3/4 |
4 |
| onfocusin |
n/a |
6 |
n/a |
n/a |
| onfocusout |
n/a |
6 |
n/a |
n/a |
| onhelp |
n/a |
4 |
5 |
n/a |
| onkeydown |
4 |
4 |
4 |
4 |
| onkeypress |
4 |
4 |
4 |
4 |
| onkeyup |
4 |
4 |
4 |
4 |
| onlosecapture |
n/a |
5 |
n/a |
n/a |
| onmousedown |
4/6 |
4 |
4 |
4 |
| onmouseenter |
n/a |
5.5 |
n/a |
n/a |
| onmouseleave |
n/a |
5.5 |
n/a |
n/a |
| onmousemove |
4/6 |
4 |
4 |
4 |
| onmouseout |
2/6 |
3/4 |
3/4 |
4 |
| onmouseover |
2/6 |
3/4 |
3/4 |
4 |
| onmouseup |
4/6 |
4 |
4 |
4 |
| onmousewheel |
n/a |
6 |
n/a |
n/a |
| onmove |
n/a |
5.5 |
n/a |
n/a |
| onmoveend |
n/a |
5.5 |
n/a |
n/a |
| onmovestart |
n/a |
5.5 |
n/a |
n/a |
| onpaste |
n/a |
5 |
n/a |
n/a |
| onpropertychange |
n/a |
5 |
n/a |
n/a |
| onreadystatechange |
n/a |
4 |
4 |
n/a |
| onresize |
n/a |
4 |
4 |
n/a |
| onresizeend |
n/a |
5.5 |
n/a |
n/a |
| onresizestart |
n/a |
5.5 |
n/a |
n/a |
| onselectstart |
n/a |
4 |
4 |
n/a |
The evolution of shared event handler attributes over the course of scriptable browser history is not straightforward. While all renderable elements have the common mouse and keyboard event handler attributes starting with IE 4, Netscape 6, and HTML 4, the earlier browsers implemented only some of these event attributes and only for interactive elements (indicated above by the lower of paired numbers for a particular event type and browser). Elements that have always responded to mouse clicks (e.g., form button controls, links, and image maps) supported onclick events. Links and image maps also generally support onmouseover and onmouseout events going way back. These three events on the limited range of elements are the safest to deploy for backward compatibility. More granular mouse events (onmousedown, onmousemove, and onmouseout) are best reserved for Version 4 browsers or later. The same goes for keyboard events. Microsoft brings a large repertoire of event handler attributes to Windows-only versions of Internet Explorer. For more details on each event type and other types not listed here, see Chapter 10.
|  | |
| 8. HTML and XHTML Reference |  | 8.3. Alphabetical Tag Reference |
Copyright © 2003 O'Reilly & Associates. All rights reserved.