Section 1.1. Attribute Value Types

1.1. Attribute Value Types

Many HTML element attributes share similar data requirements. For the sake of brevity in the reference listings, this section describes a few common attribute value types in more detail than is possible within each listing. Whenever you see one of these attribute value types associated with an attribute, consult this section for a description of the type.

1.1.1. Length

A length value defines a linear measure of document real estate, such as the width of a table element. The unit of measurement can be any applicable unit that helps identify a position or space on the screen. HTML attribute length units are uniformly pixels, but in other content, such as that specified in Cascading Style Sheets (see Chapter 4), measurements can be in inches, picas, ems, or other relevant units. A single numeric value may represent a length when it defines the offset from an edge of an element. For example, a coordinate point (10,20) consists of two length values, denoting pixel measurements from the left and top edges of an element, respectively. A length value applying to a horizontal or vertical space may also be represented as a percentage value, such as width="50%". Attributes associated with length values are deprecated in favor of corresponding CSS attributes for strict HTML 4 and XHTML conformance.

1.1.2. Identifier

An identifier (usually assigned to name or id attributes) is a name that adheres to strict syntactical rules. Most importantly, an identifier is one word with no whitespace allowed. If you need to use multiple words to describe an item, you can use the camelCase format (in which internal letters are capitalized) or an underscore character between the words. Most punctuation symbols are not permitted, but all numerals and alphabetical characters are. To avoid potential conflicts with scripting languages that refer to items by their identifiers, it is good practice to avoid using a numeral for the first character of an identifier.

1.1.3. URI and URL

The term Universal Resource Identifier (URI) is a broad term for an address of content on the Web. A Universal Resource Locator (URL) is a type of URI. For most web authoring, you can think of them as one and the same because most web browsers restrict their focus to URLs. A URL, commonly applied to href and src attributes, may be complete (including the protocol, host, domain, and the rest) or may be relative to the URL of the current document. In scriptable browsers, attributes that expect URI values can also accept the javascript: pseudo-protocol, which makes a script statement or function the destination of the link. This pseudo-protocol, while implemented widely, is not a formal standard and does not work in browsers with JavaScript disabled.

1.1.4. Language Code

There is an extensive list of standard codes that identify the spoken and written languages of the world. A language code always contains a primary language code, such as "en" for English or "zh" for Chinese. Common two-letter primary codes are cataloged in ISO-639 (an excerpted list of codes is available at http://www.ietf.org/rfc/rfc1766.txt). An optional subcode (separated from the primary code by a hyphen) may be used to identify a specific implementation of the primary language, usually according to usage within a specific country. Therefore, although "en" means English, "en-US" means a U.S.-specific version of English. The browser must support a particular language code for its meaning to be of any value to an element attribute.

1.1.5. Alignment Constants

The frequent presence of the align attribute among various elements (and the related but less pervasive valign attribute) is misleading when describing attribute values, because the attribute conveys different meanings for several element groups. Add to the mix several proprietary values that are implemented in some browsers, and it's easy to confuse which values to use when. That all such attributes are deprecated in favor of the CSS text-align (horizontal) and vertical-align properties is welcome relief to authors who code their layout exclusively with CSS (and for whom this section is largely irrelevant).

Element alignment is divisible into five categories, each with its own set of applicable elements and permissible values. Browsers accept case-insensitive values, but if you intend to continue working with these attributes, you should get in the habit of using all lowercase values to conform with the transitional DTDs.

1.1.5.1. Alignment outside the box

The first category governs the alignment of text that surrounds the rectangular space of the element bearing the align attribute. W3C HTML elements in this category include applet, iframe, img, input, and object. IE adds embed, fieldset, and select elements to the list, while deleting iframe. Here is a synopsis of various widely-supported align attribute settings for these elements and how they affect the display of the element and surrounding text content:

absbottom

Text is aligned such that the bottom of any possible text rendering (including character descenders) is on the same horizontal line as the very bottom of the element.

absmiddle

The middle of the text height (from descender to ascender) is aligned with the middle of the element height.

baseline

The baseline of the text is on the same horizontal line as the very bottom of the element (note that character descenders extend below the baseline).

bottom

The W3C sanctioned value that is the equivalent of baseline.

left

If there is text starting on the same line as the element, the element is lowered to the next line and displayed flush left within the next outermost container context. Text that follows the element cinches up to the end of the text preceding the element, causing the text to wrap around the object or image (called floating). This is a W3C-sanctioned value.

middle

The baseline of the text is aligned with the middle of the element height. This is a W3C-sanctioned value.

right

If there is text starting on the same line as the element, the element is lowered to the next line and displayed flush right within the next outermost container context. Text that follows the element starts on the line immediately below the starting text, causing the text to wrap around the object or image (called floating). This is a W3C-sanctioned value.

texttop

The very top of the element is on the same horizontal line as the ascenders of the preceding text.

top

The top of the element is on the same horizontal line as the top of the tallest element (text or other kind of element) rendered in the line. This is a W3C-sanctioned value.

1.1.5.2. Text alignment inside the containing box

The legend element acts like a label for a form's fieldset element. The caption does the same for a table. Alignment of these elements applies to the location of the element's text relative to the rectangular space occupied by the form's fieldset border or table. Support for this element-attribute pair varies widely among modern browsers. The align attribute settings for this category are:

bottom

Text is aligned at the bottom or below the related element's box. Browsers obey attribute value only for caption element. This attribute is a W3C-sanctioned value.

center

Text is at the top or above the related element's box and centered horizontally. Although not a W3C-sanctioned value, this value is supported in modern browsers for the caption element, but not the legend element in Safari or Opera.

left

Although this is a W3C-sanctioned value (where indications are that text should be to the left of the containing element), browsers align text at top left of box for legend; for caption, only Mozilla places caption text to the left of the element.

right

Although this is a W3C-sanctioned value (where indications are that text should be to the right of the containing element), browsers align text at top right of box for legend; for caption, only Mozilla places caption text to the right of the element.

top

Text for legend aligned at top left of containing box; at top center for caption. This is a W3C-sanctioned value.

1.1.5.3. Horizontal alignment of a block element

This category is potentially confusing because of the perception of what a browser does when you set the align attribute for the p, div, h1 through h6, and hr elements. These block elements normally occupy a transparent box that is the full width of the next outermost container. For most elements, that container is the body element, which extends to nearly the full width of the browser window. Therefore, when you specify one of the three primary W3C-sanctioned attribute values to an element containing short stringscenter, left, and rightit appears as though the element, itself, is being aligned. In truth, the element is in the exact same spot, taking up the same width as other body content, but the text inside is aligned per the attribute setting. If you specify a fixed-width style for the element, the align attribute continues to control the text inside the element, while the element hugs the left margin. To center the width-constrained element, you must nest it inside another full-width container, and set its align attribute to center.

To add to the confusion, the W3C HTML 4 transitional specification allows for a value of justify, while the strict HTML 4 and all XHTML specifications remove that value from text alignment types of align attributes (except for table element components). Browsers support the justify value when aligning these elements.

1.1.5.4. Horizontal text alignment in a table cell

In the W3C specification, text inside descendant nodes of the table element (tbody, tr, td, and the rest) can be aligned according to the values center, justify, left, and right. IE through Version 7, however, does not recognize the justify value for table components. If you wish to justify text in an IE table cell, wrap the text in a p or div container, and set that container's align attribute to justify.

1.1.5.5. Vertical text alignment inside an element

Vertical alignment within a table component requires the valign attribute, which has permissible values that resemble some of those of the align attribute. Those values are baseline, bottom, middle, and top.

1.1.6. Colors

A color value can be assigned either via a hexadecimal triplet or with a plain-language equivalent. A hexadecimal triplet consists of three pairs of hexadecimal (base 16) numbers that range between the values 00 and FF, corresponding to the red, green, and blue components of the color. The three pairs of numbers are bunched together and preceded by a pound sign (#) in the form #rrggbb. Therefore, the reddest of reds has all red (FF) and none (00) of the other two colors: #FF0000; pure blue is #0000FF. The letters A tHRough F can also be lowercase.

This numbering scheme creates a huge number of potential combinations (over 16 million), but not all video monitors are set to distinguish among millions of colors. Therefore, you may wish to limit yourself to the more modest palette of colors known as the web palette. A fine reference of colors that work well on all browsers at popular bit-depth settings can be found at http://www.lynda.com/hexh.html.

The HTML recommendation also specifies a basic library of 16 colors that can be assigned by plain-language names. Note that the color names are case-insensitive. The names and their equivalent hexadecimal triplets are as follows:

Black

#000000

Maroon

#800000

Green

#008000

Navy

#000080

Silver

#C0C0C0

Red

#FF0000

Lime

#00FF00

Blue

#0000FF

Gray

#808080

Purple

#800080

Olive

#808000

Teal

#008080

White

#FFFFFF

Fuchsia

#FF00FF

Yellow

#FFFF00

Aqua

#00FFFF

In other words, the attribute settings bgcolor="Aqua" and bgcolor="#00FFFF" yield the same results.

Many years ago, Netscape deployed a much longer list of plain-language color equivalents, originally adopted from the X Window System palette known as X11 color names. These are detailed in Appendix A and are recognized by recent versions of mainstream browsers.