Attributes modify the behavior of a tag. Attributes allow you to change sizes, colors, specify link locations, and much more.

Attribute Components

Attributes have two main components:

• attribute: Defines the attribute that you're using.
• value: Selects a particular kind of behavior for the attribute.

Tags may have multiple attributes, and the order of the attributes is irrelevant.

Attributes are almost always optional. They add some sort of effect if you put them in, but you usually won't get in trouble if you leave them out. Always remember: if you forget to add something or make a mistake, the browser is supposed to do nothing. That's usually a good thing.

Note that each tag has a list of permitted attributes. You cannot freely add any attribute to any tag and expect it to work.

We provided an example of an attribute in the Tags section. In that example, the style attribute controlled the background color of the entire webpage. Here's another example:

Link to Yahoo (source)

href="http://www.yahoo.com">link to Yahoo 

The tag (or, "anchor" tag) allows us to create an HTML link to another web page. We specify the location with the href attribute, which we set to the value, "http://www.yahoo.com". The results look like this:

Link to Yahoo (Results)

If you select the link, you will indeed go to Yahoo.

Similarities to Tags

As with tags:

• Case is (mostly) irrelevant. STYLE, style, and sTyLE all do the same thing. Case sometimes matters for the values inside of the attribute: this is mostly true for attributes that are involved with links.

• Whitespace 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 tag (>).

• Incorrect attributes are ignored. Misspelled attributes, such as hhref="http://www.yahoo.com" and style="backgrounde-color: yellow", have no effect. As with tags, browsers attempt to ignore attributes that they do not understand. Misspelling "background" means that your background won't turn yellow; misspelling "href" means that your link will not appear. However, if you misspell "http://www.yahoo.com", your link will appear... but it won't take you to the right place.

Quote Marks

You may quote attribute values if you like. That is, href=http://www.yahoo.com is the same as href="http://www.yahoo.com". You must use a quote mark if the value contains a special character such as a space or an angle bracket (< >). If you don't use quotes for special characters, the browser will interpret the special character as the end of the attribute or tag. The resulting garbled HTML will not be pretty.

When you do use quote marks, you must be sure to close them. Otherwise your attribute will "continue" until the next quote mark... which could be a long while. Again, you'll notice the garbled results immediately, although tracking down the source of the problem might take some work.