Certified HTML Designer Learning Resources Core Attributes

Learning Resources
 

Core Attributes


The core attribute for most HTML elements:

ID
The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). The value is case-sensitive.
The following example uses the ID attribute to identify each of the first two paragraphs of a document:

My first paragraph.


My second paragaph.



The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: none
}

P#secondp {
  color: black;
  background: none
}

The paragraphs in the initial example could also be used as a target anchor for links:

See the opening paragraph for more information.



Note that old browsers do not support the ID attribute for link anchors. For compatibility, authors should use ... within the element instead of ID.
Since ID and A's NAME attribute share the same name space, authors cannot use the same value for an ID attribute and an A element's NAME attribute for different elements in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS
The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use when giving Java code and when giving Perl code.
Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names. The value is case-sensitive.
Note that some older browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:



This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

STYLE
The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

A popular font for on-screen reading is Verdana.


When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:



In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

TITLE
The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers. The attribute is most useful with A, AREA, LINK, and IMG elements, where it provides a title for the linked or embedded resource. Some examples follow:

    [email protected]
    CGI.pm
   
    [Photo of the bride and groom]

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:
    He weighs 180 lbs.
    PQ
    NATO

 For Support