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>
-
: Defines the attribute that you’re using. As with elements, case is irrelevant for the attribute name.attribute
STYLE
,style
, andsTyLE
all 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.value
“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:
Example 1.8. A Link to The New York Times
<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.nytimes.com
. If you view the results and select the link “go to nytimes.com!”, you will indeed go to the New York Times.
Note
The style
and href
attributes are very different beasts. The style
attribute is optional, and may be applied to nearly any HTML element in the body
. The href
attribute is essential for specifying a link location, and only applies to a narrow set of elements.
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 ashref="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
andbackgrounde: yellow
, have no effect. Misspellingbackground
means that your background won’t turn yellow. Misspellinghref
means that your link won’t function. However, if you misspellhttp://www.yahoo.com
, your link will function, but it won’t take you to the right place.