attributes

You should read the page on tags before reading this page.

Attributes qualify the formatting applied with tags. Not all tags need this, though. The tags we saw on the last page, the <b> and <i> tags, never need attributes. They apply bold or italic formatting respectively, and that's it.

However, in the case of another text formatting tag - link tags - the tag name alone is not enough. Links are produced with <a> tags. These change the appearance of text, as you can see in the earlier sentence, but they also turn that text into a link to another HTML page. In order to work, we need to tell the browser which page it actually points to. This is what I mean about qualifying the information - every link points somewhere different so clearly here the tag name is not enough. The "extra" information is enclosed inside the opening tag through using an attribute called href. (This stands for "hypertext reference". Don't worry about the details of using links at the moment: all of this will come in lecture 3.) The code for that first sentence looks like this:

in the case of another text formatting tag - <a href="lesson3.html">link tags</a> - the tag name alone is not enough.

You do not need to put attributes in the closing tag. That always contains just the tag name.

All attributes take some kind of value. In the case of href, the value is "lesson3.html". Values are always separated from the attribute by an equals sign = (note: don't put spaces on either side of the =) and are always enclosed in quotation marks " ". Again, remember we're only talking here about general rules. All the actual attributes and values which can be used on web pages will be discussed when they come up.

Sometimes, atrributes are obligatory. In other words, a tag is never seen without a particular attribute. An example is the <img> tag, which always comes with the attribute src. The tag puts an image on the page and the browser needs to know where to find that image, which is what src does. See the example: images are covered in full in lesson 5. But sometimes attributes are optional, and are only used when you need them. The height and width attributes in the example are instances of this. alt is another obligatory attribute, though.

Finally note that if you use more than one attribute in a tag, they can appear in any order (though never before the tag name, and never in the closing tag). Here is an example of a tag which contains many attributes: it places the image of the tower on the page. (There is no closing tag in this case, although you should note the / character therefore appears at the end of the tag. Single tags like this are a special case in XHTML 1.0 which we will deal with when we start discussing them specifically. And if you're wondering what alt does - and you're using Internet Explorer - place the mouse pointer over the image.) <img src="avila.jpg" height="257" width="218" alt="Image: Avila, Spain, July 2004" />

All this probably seems a lot to take in at this early stage but it is not necessary for you to memorise all this information. All available tags and attributes will be introduced to you in due course. But it is worth remembering the basics at this stage, and getting into the habit of using tags and attributes as correctly as you can.

WARNING! It is a common mistake for beginners to type multiple tags, instead of multiple attributes in a single tag. Compare this to the example above: WRONG: <img src="avila.jpg"> <img height="200"> <img width="150"> <img alt="Image: Avila, Spain, July 2004">

It's worth pointing out that attributes are used far less in XHTML 1.0 than they were in earlier versions of HTML. Most of what was once done with attributes is now done by style sheets. Attributes are still used when extra structural information is required, however. The distinction between stylistic information and structural information is very important, and is how we will start lecture 2.

On this site I use bold text to refer to tags and attributes (and style sheet properties, when we get to them). Tag names are always enclosed in angle brackets: <body>, <table>. Attributes are shown without brackets: href, alt.

Back to the top

Back to the menu for lesson 1