1.2. Shared HTML Element Attributes A vast majority of elements found in HTML 4.x, XHTML 1.x, and today's browsers have numerous attributes in common. Rather than repeat the descriptions of these attributes ad nauseam in the reference listings, their details are listed here only once. These shared attributes do not appear in the attribute lists for each element in the rest of this chapter, but they are available in practically every element (within the browser or standard version range indicated in each listing). Obviously, the few shared attributes that are meaningless except for rendered elements may not be available to nonrendered elements. For example, it wouldn't make any sense to apply the tabindex attribute to a style element because the style element presents no content of its own on the page to which a user could tab. In a few cases, the W3C specifications do not implement common attributes in nonrendered elements, but the browsers support them because the W3C DOM establishes scriptable properties for those attributes. Consult Appendix E to verify HTML 4 and XHTML DTD support for a particular shared attribute. Here is a list of the shared attributes. 1.2.1. Attributes - accesskey
- class
- contenteditable
- dir
- disabled
- hidefocus
- id
- lang
- language
- repeat
- repeat-max
- repeat-min
- repeat-start
- repeat-template
- style
- tabindex
- title
- unselectable
- xml:lang
accesskey=" character" A single character key that either gives focus to an element (in some browsers) or activates a form control or link action. The browser and operating system determine the keyboard combination that the user must press with the access key to activate the link. For example, most Windows browsers require a press of the Alt key along with the designated access key, while Mac browsers use the Ctrl key as the modifier. Opera, on the other hand, has an entirely different sequence: Shift+Esc and then the access key. Although accesskey is listed here as a widely shared attribute, that isn't strictly the case across all implementations. HTML 4 and most current browsers recognize this attribute for the following elements: a, area, button, input, label, legend, and textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, object, select, span, table, and td (but removes label and legend). IE 5 adds every other renderable element, but with a caution: except for input and other form-related elements, you must also assign a tabindex attribute to the IE 5 and later element (even if simply a value of zero for all) to let the accelerator key combination bring focus to the element. All other current mainstream browsers recognize this attribute for the select element.
Example -
<a href="http://www.megacorp.com/toc.html" accesskey="t">Table of Contents</a> <h2 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
docPubcolor">" An identifier generally used to associate an element with a style sheet rule defined for a class selector. See Online Section III. Use the class attribute only with visible (renderable) elements.
Example -
<a name="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=" featureSwitch" Boolean switch that enables or disables the user's ability to edit the element's content directly on the web page. For more information about scriptable editing in IE for Windows (also implemented in recent versions of Safari and Opera), visit http://msdn.microsoft.com/workshop/author/editing/editing_entry.asp. For Mozilla, see the document.designMode property description in Chapter 2.
Example -
<p contenteditable="true">Enter your text here.</p>
Value true | false | inherit
Default inherit
Object Model Reference -
[window.]document.getElementById(elementID).contentEditable
dir=" direction" Character rendering is either left-to-right or right-to-left. This attribute is usually set in concert with the lang attribute; it must be used to specify a character-rendering direction that overrides the current direction.
Example -
<a lang="ar" dir="rtl">Some Unicode Arabic text characters here</a>
Value ltr | rtl
Default ltr
disabled=" featureSwitch" Boolean switch that enables or disables the user's ability to activate or otherwise access an element. This attribute is limited to interactive form control elements in HTML 4. IE 5.5 and later (Win32 only) also applies this attribute to most other renderable elements. Disabled elements are usually "greyed out" to distinguish themselves from other elements.
Example -
<input type="submit" name="sender" disabled="true">
Value TRue | false
Default false
Object Model Reference -
[window.]document.getElementById(elementID).disabled
hidefocus=" featureSwitch" Boolean switch that enables or disables the browser's ability to display a dotted focus rectangle around an element that has focus. The element continues to be able to receive focus if it is focusable by default or has the tabindex attribute set. Focus is necessary for some keyboard-only accessibility situations, but when this attribute is switched on, there is no visual clue about the focus state. Requires IE 5.5 or later (Win32 only).
Example -
<input type="image" src="/books/2/570/1/html/2/sendme.jpg" hidefocus="true">
Value true | false
Default false
Object Model Reference -
[window.]document.getElementById(elementID).hideFocus
docPubcolor">" A unique identifier that distinguishes this element from all the rest in the document. Can be used to associate a single element with a style rule naming this attribute value as an ID selector. An element can have an ID assigned for uniqueness as well as a class for inclusion within a group. See Online Section III. Most browsers allow id attributes for nonrenderable elements, but if your code requires validation, be aware that the W3C HTML 4 and XHTML DTDs do not. Because all W3C DOM element objects have an id property, it is natural to assign an id attribute to non-renderable elements if scripts must reference those elements. Or, your scripts may use other ways (e.g., the array returned by document.getElementsByTagName( )) to reference such elements. Assign identifiers to id attributes in order to duplicate values previously only assigned to name attributes in elements that feature the name attribute. Current browser form controls still require name attributes for name/value pairs to be submitted with the form, and a elements acting as anchors still need name attributes. Be sure to assign an identifier to the id attribute of any element you intend to reference by script.
Example -
<h2 >Section Three</h2>
Value Case-sensitive identifier.
Default None.
Object Model Reference -
[window.]document.getElementById(elementID).id
lang=" languageCode" The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices.
Example -
<span lang="de">Deutsche Bundesbahn</span>
Value Case-insensitive language code.
Default Browser default.
Object Model Reference -
[window.]document.getElementById(elementID).lang
(See text) Web Forms 2.0 (http://www.whatwg.org) lets you turn any HTML element into a repetition block, that is, one or more elements, which, as a group, require an unpredictable number of instances in a document. For example, an order form set up as a table element with a row containing fields for quantity and product number could begin with a two text entry controls (one would be an input of type number, while the other of type text with a pattern that matches the product numbering system for the company; as entries are made, an AJAX call in the background fetches the cost for display in another cell in the table row). If the user wishes to add to the order, the form needs a second row containing the same controls, but named differently so that the browser submits distinct data for each row. While DHTML scripts are capable of such actions with tables, the Web Forms 2.0 repetition block mechanism handles addition, deletion, and movement of repeated elements without scripting. To make a table row (or other HTML container) a repetition block, assign the repeat attribute, as follows: <tr repeat="template"> <td><input type="number" name="row[item].quantity" value="1"></td> <td><input type="text" name="row[item].product" value=""></td> ... </tr>
Notice that the names for each control have what looks like JavaScript array notation, with the ID of the repetition block (item in this case) inserted as the array index. When the form is submitted, the array notation is replaced in the control's name with an integer beginning with 0 for the first item (e.g., row0.quantity and row0.product for the first row). Repetition blocks are controlled by input or button elements of type add, move-down, move-up, and remove. The template attribute of these controls point to the ID of the repetition block's outer container (the one with the repeat="template" attribute). If you wish to begin layout of the form with a starting number of rows, you only need to compose the HTML for one row, and set the repeat-start attribute to the number of rows to appear initially. Similarly, you may provide upper and lower limits to the number of repetitions to be added or removed by setting the repeat-max and repeat-min attributes, respectively.
Example -
<form action="..." method="POST"> <p> <table> <tr><th>Quantity</th><th>Item Number</th></tr> <tbody> <tr repeat="template" repeat-start="2" repeat-min="1"> <td><input type="number" name="row[item].quantity" value="1"></td> <td><input type="text" name="row[item].product" value=""></td> <td><input type="remove" /></td> </tr> </tbody> </table> <button type="add" template="item">Add Item</button> <p> <input type="submit" /> </p> </form>
Value For repeat, the constant template or an integer for hard-coded items; for repeat-max, repeat-min, and repeat-start, an integer; for repeat-template, the ID of the element elsewhere in the document acting as the template.
Default Maximum integer value (repeat-max); 0 (repeat-min); 0 (repeat-start in Opera, although the standard suggests 1).
style=" styleSheetProperties" This attribute lets you set one or more style sheet rule property assignments for the current element. You may use the CSS or (for Navigator 4 only) JavaScript syntax for assigning style attributes. Use the style attribute only with visible (renderable) elements.
Example -
<span style="color: green; font-size: 18px">Big, green, and bold</span>
Value An entire CSS-syntax style sheet rule is enclosed in quotes. Multiple style attribute settings are separated by semicolons. Style sheet attributes are detailed in Chapter 4.
Default None.
Object Model Reference -
[window.]document.getElementById(elementID).style
tabindex=" integer" A number that indicates the sequence of this element within the tabbing order of all focusable elements in the document. Tabbing order follows a strict set of rules. Elements that have values other than zero assigned to their tabindex attributes are first in line when a user starts tabbing in a page. Focus starts with the element with the lowest tabindex value and proceeds in order to the highest value, regardless of physical location on the page or in the document. If two elements have the same tabindex values, the element that comes earlier in the document receives focus first. Next come all elements that either don't support the tabindex attribute or have the value set to zero. These elements receive focus in the order in which they appear in the document. Note that reloading the current page does not necessarily restart the tabbing sequence from the "top." Therefore, controlling tabbing sequence is most helpful when the logic of your focusable elements is something other than the source code order of those elements (e.g., directing tabbing to fields down table columns rather than across rows). HTML 4 and many browsers limit the tabindex attribute to the following elements: a, area, button, input, object, select, textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, span, table, and td. IE 5 adds every other renderable element. A negative value in IE and Mozilla 1.8 or later removes an element from tabbing order entirely.
Example -
<a href="chapter3.html" tabindex="3">Chapter 3</a>
Value Any integer from 0 through 32,767. In IE and Mozilla 1.8 or later, setting tabindex to a negative value causes the element to be skipped in tabbing order altogether.
Default None.
Object Model Reference -
[window.]document.getElementById(elementID).tabIndex
title=" advisoryText" An advisory description of the element. For HTML elements that produce visible content on the page, modern browsers render the content of the title attribute as a tooltip when the cursor rests on the element for a moment. For example, the table-related col element does not display content, so its title attribute is merely advisory. To generate tooltips in tables, assign title attributes to elements such as table, tr, th, or td. The font and color properties of the tooltip are governed by the browser, and are not modifiable under script control. In IE/Windows, the tooltip is the standard small, light-yellow rectangle; in IE/Mac, the tooltip displays as a cartoon bubble in the manner of the Mac OS bubble help system. Mozilla tooltips are the same small rectangle on all OS versions. If no attribute is specified, the tooltip does not display. You can assign any descriptive text you like to this attribute. Not everyone will see it, however, so do not put mission-critical information here. Browsers designed to meet web accessibility criteria might use this attribute's information to read information about a link or nontext elements to vision-impaired web surfers. Therefore, don't ignore this potentially helpful aid to describing an element's purpose on the page. Although the compatibility listing for this attribute dates the attribute back to Internet Explorer 3 and HTML 3.2, it is newly ascribed to many elements starting with IE 4 and HTML 4.0.
Example -
<span title="United States of America">U.S.A.</span>
Value Any string of characters. The string must be inside a matching pair of (single or double) quotation marks.
Default None.
Object Model Reference -
[window.]document.getElementById(elementID).title
unselectable=" featureSwitch" Boolean switch that enables or disables the user's ability to select any portion of the element.
Example -
<p unselectable="on">...</p>
Value on | off
Default off
xml:lang=" languageCode" This is the XML version of the HTML-only lang attribute, as specified in the W3C XML recommendation. Use this only in an XHTML-conforming document and in browsers that understand XML namespaces. XML processors other than current browsers can make content and display decisions based on values assigned to this attribute (e.g., display the element only if the browser and operating system support the language script style). Browser documents should continue to use the lang attribute, even when it duplicates the xml:lang attribute setting.
Example -
<span lang="de" xml:lang="de">Deutsche Bundesbahn</span>
Value Case-insensitive language code. |
