By now, we are well familiar with the idea of tags as the instructions that tell a browser how to render the content of an HTML document. Many tags can take attributes, which modify or enhance the behaviour of the tag in some way. This gives us some more flexibility in presenting our web pages.

Attributes are placed inside the opening tag, before the final ">". Attributes generally (but not always) have two parts: the attribute name, and the value. Many tags can take several attributes. In these cases, the attributes can appear in any order inside the tag, separated by spaces.

Attribute names are not case-sensitive: they may be written either in upper case or in lower case. Throughout this tutorial, we'll write them in lower case -- this helps to keep them distinct from tags, to minimise confusion. Attribute values are generally not case-sensitive, but they must be "delimited" (or enclosed) by quotation marks.

(Back in Lesson 1, I mentioned as an aside how XHTML and XML are case-sensitive. Similarly, when coding in these languages, attributes must be written in lower case.)

So how do attributes work and what can we do with them? The examples in this lesson illustrate the principles, and provide some gilding of the HTML lily. However...

Warning! All (yes, all) of the attributes described on this page are deprecated, and the HTML specifications recommend that you do not use them. Cascading Style Sheets can be used to accomplish the same ends. I've tried to follow a general principle in this tutorial of not discussing deprecated elements or attributes; I only include these because they are particularly useful as a safety net for users who might be viewing your site with a browser that does not support Cascading Style Sheets (we'll talk some more about this in the next lesson). So: you have been warned!

For our first example, let's go back to the last subject in Lesson 4 -- the horizontal rule.

Unless we tell it to do otherwise, the <HR> tag will produce a rule that fills the available screen width. However, using the width attribute, we can exercise some finer control. Width is specified in percentage terms, so if we specify a width of 50%, the rule will fill half of the available screen width. Here's the code snippet below:

Now see how it looks in your browser.

You'll have spotted a couple of things from that example. First, the width of the rule was reduced to half of the screen width. Second, the rule is centred on the screen. That's because the default alignment of a horizontal rule is centred. We can change this using the align attribute, which has values of left, right, and center (note use of the American spelling, rather than the British "centre"). Look at this piece of code:

Now see how it looks in your browser.

You should see three half-width rules that are left, centre and right aligned. Notice in the source code I didn't really need to specify the alignment for the second rule, because the default alignment is centred. This example also shows how we can apply more than one attribute at a time.

There are a couple of other things we can control with attributes, such as the thickness of the rule. We do this using the size attribute, and we specify the line thickness in pixels. Here's the code for a 75% width, right-aligned rule that's fifteen pixels thick:

Now check it out in your browser.

There's one last trick we can play with horizontal rules. The usual presentation of a rule is a kind of "three dimensional", sculpted look. But if we want a simpler, flat line we can specify this using the noshade attribute. This code snippet is for a 30% width, left aligned, 5 pixel thick, unshaded rule:

Now check it out in your browser.

Notice in the example above that the noshade attribute has no value attached to it -- it's just a straight, simple instruction.

The BODY element can also take several attributes, which can help to smarten up our web pages. A couple of useful attributes let us brighten up the background. The default background colour varies from browser to browser. In some browsers, it's white, which is OK. In some, it's grey, which isn't. Or maybe it is, depending on your taste.

We can specify a background colour using the bgcolor attribute (note for non-Americans like me: watch the spelling, which is based on the American spelling of "color" rather than the British "colour").

Colours in HTML are stipulated in terms of their red, green and blue components. Each of the three primaries has a range of values from 0 (no colour) to 255 (maximum colour). Just to make it even more difficult, we can't use decimal numbers to represent the values -- we have to use their hexadecimal (or "hex") equivalents, where 0 decimal = 00 hex and 255 decimal = FF hex. We'll discuss colour fully in Appendix B, so don't get too hung up on this at the moment.

Let's look at an example. If we wanted to make our background colour bright yellow, that would require maximum red, maximum green, and no blue at all. In hex, this would be FF red, FF green and 00 blue. We always specify colours in the order Red-Green-Blue, in the form of a hex "triplet". In this example, it would be FFFF00. To use this as an attribute value, we have to prefix it with a "#" symbol, thus: #FFFF00. Here's some code to make the background colour yellow:

Now see how it looks in your browser.

Bilious, isn't it? But it gives you the idea. The whole page, whatever size it may be, will have this flat background colour.

Another way to change the appearance of the background is by using the background attribute. In this case, we specify a graphic file to use as the background to the page. This attribute forces the browser to perform a neat trick called "tiling". This means that you can take an image that is much smaller than the screen, and cause it to repeat in all directions (like tiling a wall) to cover the whole screen. For example, look at this image:

This image has the filename "fractal.jpg", and it is shown here at its actual size of 337 pixels wide and 139 pixels high. We can use this as a page background by inserting the filename as the value for the background attribute, like this:

You can see how this looks in your browser.

Images to be used for tiling in this way must be carefully designed, so that they have a "seamless" appearance (that is, so that you don't see the joins where the images butt up against each other). If this image had not been properly designed, the result might have looked like this. Hmm... looks like my bathroom!

(Just an aside about pathnames: in the example above, we used the attribute/value pair background="fractal.jpg". This worked fine, because fractal.jpg is in the same directory as the HTML file that calls it. If it weren't, we would have to refer to the fractal.jpg file using a relative or absolute pathname. We'll talk about this more when we discuss links in Lesson 9.)

There are also attributes that let us change the default text colour, and the colour of links in the document. Looking at text colour first, we use the text attribute, giving it a value composed of a hex triplet representing the colour. For example, to produce a default text colour of white, on a page with a blue background, our code would look like this (the hex triplet we need for blue is 0000FF and for white is FFFFFF):

Check how this looks in your browser.

Let's look at link colours now. In most browsers, a link that you haven't visited yet is coloured blue. A visited link is usually coloured purple. An active link is usually red (that is, the colour that the link becomes as you select it or click the mouse on it -- often you barely get the chance to see this before jumping to the link target).

You can change all of these by entering a new triplet for the colour you want as the value in each of these attributes: link (for unvisited links); alink (for active links); and vlink (for visited links). For example, this piece of code would make our background white (hex FFFFFF), our text red (hex FF0000), our unvisited links black (hex 000000), our visited links green (hex 00FF00), and our active link colour cyan (hex 00FFFF):

Look at this example of how such a page might appear.

Take care when assigning link colours that you don't make them disappear against the background. You can see from the example above that the green and cyan don't show up too well against the bright white.

We can spice up our lists with the type attribute. When applied to an unordered list, this lets us specify the style of "bullet" to be used, as shown by this code snippet:

Look at this example of how such a page might appear.

In the code above, you'll have noticed a tag <IMG> that we haven't discussed yet, but don't worry about that for the moment. The purpose of our example is to show the different presentations of bullets, and how different browsers might render them differently. The default bullet, that is, the one you'll get if you don't specify anything with a type attribute, is the "disc".

Depending again on the browser, you might find that that when you nest unordered lists, the bullets in the nested list are rendered differently from those of the outer list. Here's some example code:

Now take a look at how this example appears in your browser.

That takes care of unordered lists, but what can we do with ordered lists? Again, we can make use of the type attribute, but with a different range of values. This lets us control the style of the numbers applied, summarised in the table below:

This is exemplified by the following piece of code:

Now examine the result in your browser.

Of course, you can mix and match any of the "types" to suit your needs. But we're not finished yet -- there is another attribute trick we can play with ordered lists.

Normally, an ordered list will start at 1, i, I, a, or A depending on which type attribute has been set (the default being the arabic 1). If we should want to start the list at a different number (or letter), then we can use the start attribute to define it. If we set the start attribute equal to 3, for example, then this will start the list at 3, iii, III, c or C according to whether the type attribute was set to 1, i, I, a or A. Clear? Look at the code snippet below:

Now examine the result in your browser.

Still not enough for you? Want to be able to reset the numbering in the middle of a list? We can do that too, using the value attribute, like this:

Now examine the result in your browser.

These examples of variations on rules, body background effects, and lists should serve as good examples of how effective attributes can be in modifying the basic behaviour of tags. From now on, when we introduce a tag, we'll look at which attributes can be used with it.

Attributes modify or enhance what tags do. Most attributes have both a name and a value, though some have no value. Some tags can take multiple attributes, which can be placed in any order inside the opening tag. Attribute values must be delimited by quotation marks of the type " ".

We can change the length of a horizontal rule by use of the width attribute; we can change its alignment (left, centre or right) with the align attribute; we can change the thickness of the line with the size attribute; and we can change its appearance to a flat line with the noshade attribute.

We can colour the background of a page by use of the bgcolor attribute in the <BODY> tag; or we can tile an image over the background using the background attribute in the same tag. We can set a default text colour with the text attribute, and we can specify link colours with the link, alink and vlink attributes.

The type attribute in <UL> tags lets us choose whether bullets should be discs, circles or squares. In <OL> tags for ordered lists, the same attribute lets us select the number style. The start attribute gives us freedom over which number or letter with which to start the list, and we can reset the number or letter with the value attribute.

And remember: the attributes used as examples in this lesson are all deprecated.