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>
: Defines the attribute that you’re using. As with elements, case is irrelevant for the attribute name.
sTyLEall do the same thing.
: 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
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.nytimes.com. If you view the results and select the link “go to nytimes.com!”, you will indeed go to the New York Times.
href attributes are very different beasts. The
style attribute is optional, and may be applied to nearly any HTML element in the
href attribute is essential for specifying a link location, and only applies to a narrow set of elements.
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.comis 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.
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
backgrounde: yellow, have no effect. Misspelling
backgroundmeans that your background won’t turn yellow. Misspelling
hrefmeans 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.