Attributes in HTML

Some tags are complete in themselves. In other words, they have only one option. For instance, when you want your text, say italicised, you use text . But if you wish to display text, say in some particular font, how will the tag look then?

<font face=”Arial”> text</font>

Notice the tag in this example is . What about the remaining part, face= “Arial” We refer to this additional information as the tag’s attribute. So, in our example, the tag is font, its attribute is face and the value given to the attribute is Arial.

Attributes may have many different values you may like to use simultaneously. For instance, you may not only like a particular font,but also a particular size of letter and in a particular colour. How do you do this? The tag would now be

<font face=”Arial”; size=14px; color=#ff0000">text </font>

Note the use of quotes to indicate values and semi-colons to separate attributes. The general form of the tag is :

<tag_name attribute-name = “attribute-value”>....</ tag_name>

As a general rule, most attributes – that include only letters, digits, hyphens, or periods – work fine without quotes. Attributes that have other characters, such as spaces, % signs, or # signs, however, always require quotes. Nevertheless, it is a good habit to enclose all attribute values in quotes.

The purpose of the attribute is to extend the scope of a tag. It provides additional information about the tag, to the browser.

How does the browser treat a tag, which requires an attribute, but no attribute is mentioned. For instance in our example if we had just used text, how would the browser show it. The best way to figure this out is to try it out yourself.

Each browser has a default setting, which is the value it takes when no other value is defined. In Windows Internet Explorer, the default font setting is “font:Times New Roman; font-size:12pt and color:#000000. So if you only have the text tag without any attributes, then the text would be in 12 point, Times New Roman font and its colour would be black. You can of course change this default setting to whatever you wish. Go to Tools->Internet Options and click on the font button under the general tab. There are many other defaults and you can set any or all of them to customise your browser to your requirement.