Attributes in HTML tags

With the tags goes the attributes. Attributes are the settings for the tag, e.g. colour or size, or if something is supposed to happen when clicking the tag. There is three types attributes for a tag: Optional attributes, standard attributes and event attributes. When going through the various tags, the most common attributes for these will be covered.

Optional attributes are basically a relic from the early days of HTML. Many of these attributes will not work in HTML 5 or 4 strict, and the property can usually be done using STYLE, a standard attribute, instead.

Calling the options optional is a bit of a misnomer. Images, for instance, have an optional attribute called SCR, which is where you write the name of the image you want to be shown. If we have to show the smiley named Laugh.gif, which is placed in the subdirectory named Graphics, we need at least the image tag IMG and the attribute SCR. The code looks like this:


On the page it looks like this:



Therefore: Optional attributes aren't necessarily optional as the name indicates. What they are, on the other hand, are specific for tags. Obviously there are some recurring attributes like width and height, that works for several tags, but as a general rule, they should be considered attributes that are specific for the individual tags.

Considering the evolution of HTML code, it has been a good rule of thumb that if you need the attribute and it exist as a standard attribute, e.g. like width and height, it is better to use the standard attribute. Some browsers don't handle optional attributes as well as other... or the same way...

Standard attributes are, as the name indicates, an attribute all tags have. You should be aware that having an attribute is not the same as the attribute actually working. It just means that you don't get an error message, when verifying you code. It is possible e.g. to give a line break (the tag <BR>) a colour, but line breaks don't have a physical size or content, so you can never see it. When working with stylesheets, it is really just standard attributes we are working with, and they are an efficient tool for styling your elements in the code.

Using a standard attribute is done by STYLE="", where you write the parameters between the pings. If you need more attributes at the same time, they are separated by semicolon. A piece of text that has to be both bold and italics thus have the standard attribute STYLE="font-weight:bold; font-style:italic".

A piece of text in bold and italics applied on a SPAN tag looks like this as code:


The result is:

Event attributes are attributes that react to events. This could be clicking on an image, ot the text changing colour when the mouse rolls over. The attributes focus on two areas, various ways of clicking on an object and various reactions to the pointer being moved over, or removed from, a tag. Where the other two attributes are easy to use, event attributes requires some experience in HTML before using.

The example here is just for demonstration of the attribute. Why the incantation looks the way it does, will be addressed under 'Links'.

If we look at the smiley from before, then we can specify that when we point at the picture with the mouse, the arrow is changed into a hand, so you know that there is a link that can be clicked. That attribute is called ONMOUSEOVER, and what we want to do is done with the code ONMOUSEOVER="this.style.cursor='pointer'". After this we want it to do something when clicking the picture. That attribute is called ONCLICK, and we want it to open the image ComputerWork.gif in the subdirectory Graphics. when opening the image, it has to be in a new window with the window size 200x100 pixel. The code for this is ONCLICK="window.open('Graphics/ComputerWork.gif', 'windowname', 'width=200, height=100')"

So the full code is:


The result is:


Try hovering the pointer over the image and then click on it.