Main | About | Introduction | Basic | Intermediate | Tables

Diving In | Structure | Tinkering | Elements | Attributes | Browser Tools

Attributes

Attributes modify the behavior of a element. Attributes allow you to change sizes, colors, specify link locations, and much more. They have two main components:

<name attribute1="value1" attribute2="value2" ...>
  ...(text or more elements go here)...
</name>

• attribute: Defines the attribute that you’re using. As with elements, case is irrelevant for the attribute name. STYLE, style, and sTyLE all do the same thing.

• value: Selects a particular kind of behavior for the attribute. Case sometimes matters for the values inside of the attribute, so be careful here.

“Changing the Background Color” includes an example of using the style attribute to control the background color of the entire webpage. Here’s a second example, the href attribute:

<a href="http://www.nytimes.com">go to nytimes.com!</a>

The a element (or, “anchor” element) creates a link to another web page. The href attribute specifies the location, which we set to the value http://www.yahoo.com. If you view the results and select the link “go to Yahoo!”, you will indeed go to Yahoo!.

Attribute Properties

Attributes follow these rules:

• Elements may have multiple attributes. The order of the attributes is irrelevant.

• Each element has a list of permitted attributes. Some attributes may be assigned to most (or even all) elements. But in general, you cannot freely add any attribute to any element.

• Whitespace between attributes is irrelevant. You may freely insert spaces, tabs, or even carriage returns between attributes, as long as you don’t forget the closing angle bracket at the end of the element (>). For example:

  <a href="http://www.gutenberg.org"
    style="background: yellow"
    >Books in the public domain</a>

  is perfectly acceptable. For elements with many attributes, adding whitespace can sometimes make your code more readable.

• Although upper case and lower case is irrelevant for attribute names, the case can be important for attribute values. For example,

  <a href="http://www.cnn.com/index.html">Go to CNN</a>

  creates a link that takes you to the CNN.com home page, while

  <a href="HTTP://WWW.CNN.COM/INDEX.HTML">Go to CNN</a>

  is a broken link.

• It is good practice to quote attribute values, although often this is optional. That is, href=http://www.yahoo.com is the same as href="http://www.yahoo.com". If the attribute value contains a special character such as a space or an angle bracket (< >), you must use quotes, or the browser will interpret the special character as the end of the attribute or element.

  Caution

  Take care to close any open quotes you start. Otherwise, your attribute value will “continue” until the next quote mark, which will badly garble your page.

• As with elements, browsers attempt to ignore incorrect attributes. Misspelled attributes and attribute values, such as hhref and backgrounde: yellow, have no effect. Misspelling background means that your background won’t turn yellow. Misspelling href means that your link won’t function. However, if you misspell http://www.yahoo.com, your link will function, but it won’t take you to the right place.