The Four Core Attributes

The core attributes are so fundamental to html that they have been given to almost every element in html. This section introduces the core attributes. Their uses will be covered more specifically in later sections.

The id Attribute -- Identifying Objects

The id attribute identifies the tag it is used in.

<p id="p0">
Paragraph text goes here.
</p>
Once an object has been given an id, it can be referred to, and its properties can be accessed. We'll find later (in Dynamic Html) that an object's id can be used to change its style -- to change its color, to embolden or enlarge the text, and even to make it appear and disappear.

Note:

The name attribute was used in early versions of html. It has the same purpose as the id attribute, but the two attributes are not the same.

It has been suggested that code can be made compatible with both old and newer browsers by setting both the name and id attributes to the same value. This sometimes works. If you intend using a dynamic function such as getElementById(), however, it is essential to use the id attribute, and to list it before the name attribute.

The Title Attribute -- Tool Tips

The title attribute should not be confused with the title tag. There is only one title tag per document, and it appears in the head. However, every element (tag) within the document may contain a title attribute.

Title attributes are useful because they form the text for Tool Tips, the box of explanatory text often seen when you leave the mouse on an element. Tool Tips can be used whenever you want the user to have a little more information. Thus they are often used with clickable links. Check for example the links on the left side of this page. Following is an image with a tool tip.

< img src="maxwell.jpg"  width="20%"
   alt="Portrait of James Clerk Maxwell"
   title="James Clerk Maxwell, inventor of electromagnetic theory">

Portrait of James Clerk Maxwell

The Class Attribute

The class attribute is exceptionally useful, in writing both standard and dynamic html. It can be used to establish new styles.

For example, the boxes that I use to enclose code were made with a class attribute. To produce each box, I simply write:

<pre class="code">

text goes here

</pre>

The definition of the class "code" goes in my style sheet. I can use the class "code" many times, but I only need define it once. Virtually any group of style changes can be defined as a class. The construction of class definitions is discussed in the section on Classes.

Note that the name of the class is a word that you make up.

The Style Attribute

Don't confuse the style attribute with the <style> tag. There is only one <style> tag per document, and it appears in the head, to introduce the style sheet. However, almost any element (tag) within the document may contain a style attribute.

Since the style attribute belongs to all elements, it greatly simplifies setting style. We no longer need worry whether a particular attribute, such as align, is a property of a particular tag. We can simply use the style attribute, and the array of numerous CSS style properties.

The coding for the style attribute is slightly more complex than for other attributes, because the style property must be named and set. This is done with CSS code (highlighted in yellow). A colon separates the property and its value.

Indenting the first line of a paragraph

The first line of a paragraph, or any other text element, can be indented by using the text-indent property of the style attribute.

<p style="text-indent:24px"> This is a very short paragraph, but I want it to wrap, 
so I am going to keep talking until it does, so you can see that only the first line is indented. 
</p>

This is a very short paragraph, but I want it to wrap, so I am going to keep talking until it does, so you can see that only the first line is indented.

Changing Margins

The left margin of a paragraph can be changed by using the margin-left property of the style attribute.

<p style="margin-left:24px"> This is also a very short paragraph, but not short enough, because 
it has to be long enough to wrap so you can observe that the left margin has been changed.
</p>

This is also a very short paragraph, but not short enough, because it has to be long enough to wrap so you can observe that the left margin has been changed.

For more examples of the use of the style attribute, and for setting several style properties at once, see the subsection Setting Style with the Style Attribute.

Copyright July 2005, 2006 by Nancy E. Knox

Valid HTML 4.01 Transitional