COM271, Week 1
HTML Attributes and Values—Modifying Elements
Syllabus | Table of Pages | Assignments | References and Useful Links
Attributes to Modify Elements
HTML elements provide structure, much like nouns providing objects to a language. Attributes add adjectives, if you want to pursue the analogy, letting us modify the elements. (We'll have to wait for JavaScript to find real verbs; CSS adds more adjectives and a few adverbs, allowing us to modify page characteristics with a limited set of actions. But you'll have to wait a bit for that.)
Attributes are written after the element name (separated by a space), and they are always paired with an appropriate value, always set off within quotes. Oh, and use lower case, consistently (upper case will work, because HTML doesn't care about case, but JavaScript does, so.... just use lower case). Here's what they look like:
<table width="800px" border="1" bgcolor="#335533">...table rows and data go here... </table>
Attributes that you can use with all elements
Some attributes only apply to particular elements (colspan, which allows you to combine columns within the row of a table, works in a table, but makes no sense in a paragraph). There are four that can be used in just about all elements:
| Attribute | Meaning | Example |
|---|---|---|
| id | Identifies an element with a singular label. Id's are unique: only one use of each element per page |
<p id="first_paragraph"> It was a dark and stormy night.... |
| class | Places an element into a set of like elements Classes can be repeated: they are used to share styles. | <p class="warning">Caution: Don't smoke in class!</p> |
| title | Associates a little text with the element. This appears when you hover over an element for a second. | <p title="See! It works!!!">Hover here...</p> |
| style | Allows association of a CSS style with an individual element | <p style="color:#f00;">See? I'm red!</p> |
Important Link Here!
The W3C provides this list of html attributes:
http://www.w3.org/TR/html4/index/attributes.html
Click on this and take a few minutes to study it. Notice the columns for attributes and the elements that they can be used with. Note, too, that many of these attributes are "deprecated" (see the column for this?). That means that the W3C has recommended that developers stop using these. Why? Remember that it is current thinking that content, structure, and layout should be separated as much as possible. That is, CSS should be the place where page layout is handled. Much of the layout that was formerly done by using html attributes (e.g., background color with the attribute bgcolor) are now done with CSS.
Deprecated <font> element: I should make a special note of the deprecated font tag. In the era of "the web is for science documents," the <font> tag included attributes for about all the things developers could imagine a good scientist would want to do with type: font-family, size (there were 7 sizes), and color were each given their own attributes and a set of values. Every time a page needed type, it also needed a cumbersome font tag to contain it. Pages were filled with font tags. I have no data, but I'd guess there are still a few billion font tags orbiting the web (like rocks in the asteroid belt), so if you are asked to redesign a really old site, you'll probably unearth a few of these fossils. But don't bother using them. All typography now belongs to CSS, and you will learn to master this very soon.
Ok. Now go study that W3C table, but remember: Y'all come back now, ya hear?