Core HTML Attributes

< Day Day Up >

To accommodate new technologies such as style sheets and scripting languages, some important changes have been made to HTML and XHTML. Since HTML 4.0, a set of four core attributes ” id , class , style , and title ”have been added to nearly all HTML and XHTML elements. At this stage, the purpose of these attributes might not be obvious, but it is important to address their existence before discussing the various HTML elements to avoid redundancy.

id Attribute

The id attribute is used to set a unique name for an element in a document. For example, using id with the paragraph tag, <p> ,

  <p id="FirstParagraph">  This is the first paragraph of text.  </p>

names the bound element "FirstParagraph" . Naming an element is useful for manipulating the enclosed contents with a style sheet or script. For example, a style sheet rule such as

  <style type="text/css">  #FirstParagraph {color: red;}  </style>

could be put in the head of a document. This style rule says to make an element named "FirstParagraph" red. Naming is key to associating style or interactivity to particular elements. Of course, document authors must make sure objects are named uniquely, as having elements with the same id attribute value might cause significant bugs . The uses of the id attribute for style sheets and scripting are discussed in Chapter 10 and Chapter 14, respectively.

class Attribute

The class attribute is used to indicate the class or classes that a tag might belong to. Like id , class is used to associate a tag with a name, so

  <p id="FirstParagraph" class="important">  This is the first paragraph of text. <  /p>

not only names the paragraph uniquely as FirstParagraph , but also indicates that this paragraph belongs to a class grouping called important . The main use of the class attribute is to relate a group of elements to various style sheet rules. For example, a style sheet rule such as

  <style type="text/css">  .important {background-color: yellow;}  </style>

would give all elements with the class attribute set to important a yellow background. Given that many elements can have the same class values, this may affect a large portion of the document. You can find more examples of the use of class and id with style sheets in Chapter 10.

style Attribute

The style attribute is used to add style sheet information directly to a tag. For example,

  <p style="font-size: 18pt; color: red;">  This is the first paragraph of text. <  /p>

sets the font size of the paragraph to be 18 point, red text. Although the style attribute allows CSS rules to be added to an element with ease, it is preferable to use id or class to relate a document-wide or linked style sheet. The use of CSS is discussed in Chapter 10.

title Attribute

The title is used to provide advisory text about an element or its contents. In the case of

  <p title="Introductory paragraph">  This is the first paragraph of text.  </p>

the title attribute is set to indicate that this particular paragraph is the introductory paragraph. Browsers can display this advisory text in the form of a Tooltip , as shown here:

Tooltips set with title values are often found on links, form fields, images, and anywhere where an extra bit of information is required.

The core attributes might not make a great deal of sense at this time because generally they are most useful with scripting and style sheets, but keep in mind that these four attributes are assumed with every tag that is introduced for the rest of this chapter.

Core Language Attributes

One major goal of HTML 4 was to provide better support for languages other than English. The use of other languages might require that text direction be changed from left to right across the screen to right to left. Nearly all HTML elements now support the dir attribute, which can be used to indicate text direction as either ltr (left to right) or rtl (right to left). For example,

  <p dir="rtl">  This is a right to left paragraph.  </p>

Furthermore, mixed-language documents might become more common after support for non-ASCII-based languages is improved within browsers. The use of the lang attribute enables document authors to indicate, down to the tag level, the language being used. For example,

  <p lang="fr">  C'est Francais.  </p>   <p lang="en">  This is English.  </p>

Although the language attributes should be considered part of nearly every HTML element, in reality, these attributes are not widely supported by all browsers and are rarely used by document authors.

Core Events

The last major aspect of modern markup initially introduced by HTML 4 was the increased possibility of adding scripting to HTML documents. In preparation for a more dynamic Web, a set of core events has been associated with nearly every HTML element. Most of these events are associated with a user doing something. For example, the user clicking an object is associated with an onclick event attribute. So,

  <p onclick="alert('Ouch!');">  Press this paragraph  </p>

would associate a small bit of scripting code with the paragraph event, which would be triggered when the user clicks the paragraph. In reality, the event model is not fully supported by all browsers for all tags, so the previous example might not do much of anything. A much more complete discussion of events is presented in Chapter 14, as well as in Appendix A. For now, just remember that any tag can have a multitude of events associated with it, paving the way for a much more dynamic Web experience.

Now that the core attributes have been covered, we can avoid mentioning them for every element presented, and turn to the most common elements used in HTML. The next section begins the discussion with some of the most common elements found in a document ” headings.

< Day Day Up >