Core Attributes Reference | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

The HTML and XHTML specifications provide four main attributes that are common to nearly all elements and have much the same meaning for all elements. These attributes are class , id , style , and title . Rather than replicating this information throughout the appendix, it is summarized here.

class

This attribute indicates the class or classes that a particular element belongs to. A class name might be used by a style sheet to associate style rules to multiple elements at once. For example, one could associate a special class name called "important" with all elements that should be rendered with a yellow background. Class values are not unique to a particular element, so  could be used as well as  in the same document. It also is possible to have multiple values for the class attribute separated by white space;  would define two classes with the particular strong element. Currently, most browsers recognize only one class name for this attribute.

id

This attribute specifies a unique alphanumeric identifier to be associated with an element. Naming an element is important to being able to access it with a style sheet, a link, or a scripting language. Names should be unique to a document and should be meaningful; although id="x1" is perfectly valid, id="Paragraph1" might be better. Values for the id attribute must begin with a letter (A-Z or a-z) and may be followed by any number of letters , digits, hyphens, colons, and periods. Of course it is generally not encouraged to have id values with special characters , even if they are allowed.

One potential problem with the id attribute is that for some elements, particularly form controls and images, the name attribute already serves its function. Values for name should not collide with values for id , as they share the same naming space. For example, the following would not be allowed:

  <b id="elementX">This is a test.</b>   <img name="elementX" src="image.gif" />

There is some uncertainty about what to do to ensure backward compatibility with browsers that understand name but not id . Some experts suggest that the following is illegal:

  <img name="image1" id="image1" src="image.gif" />

Because name and id are naming the same item, there should be no problem; the common browsers do not have an issue with such markup. Complex scripting could be used if you assign two different names for the image, such as

  <img name="image1name" id="image1id" src="image.gif" />

but it might not be necessary.

Page designers are encouraged to pick a naming strategy and use it consistently. Once elements are named, they should be easy to manipulate with a scripting language.

Like the class attribute, the id attribute is also used by style sheets for accessing a particular element. For example, an element named Paragraph1 can be referenced by a style rule in a document-wide style by using a fragment identifier:

 #Paragraph1   {color: blue;}

Once an element is named using id , it also is a potential destination for an anchor. In the past, an a element was used to set a destination; now any element can be a destination. For example,

 <a href="#firstbolditem">Go to first bold element.</a>  <b id="firstbolditem">  This is important.  </b>

style

This attribute specifies an inline style associated with an element, which determines the rendering of the affected element. Because the style attribute allows style rules to be used directly with the element, it gives up much of the benefit of style sheets that divide the presentation of an HTML document from its structure. An example of this attribute's use is shown here:

  <strong style="font-family: Arial;   font-size: 18pt;">  Important text  </strong>

title

The title attribute supplies advisory text that can be rendered as a Tooltip when the mouse is over the element. (Internet Explorer supports this Tooltip display, but Netscape browsers prior to version 6 do not.) In some cases, like the a element, the title attribute can provide additional help in bookmarking . Like the title for the document itself, title attribute values such as advisory information should be short, yet useful. For example,  provides little information of value, whereas  provides much more detail. When combined with scripting, this attribute can provide facilities for automatic index generation.

< Day Day Up >