HTML Attributes

In the last topic we discussed HTML tags and types of tags.  Now, the next obvious thing to learn is how to enhance the tags’ behavior with its attributes? In computer science we use the term attribute with for purposes. It is defined as any feature of an object/entity that can be assigned a value to set its features.  In the case of HTML tags an attribute is a feature to change the appearance or impression of text decorated with a specific tag. HTML Attributes tell the browser to do something extra with the text or element enclosed in an HTML tag.

Any HTML attribute is meant to do any of the following things-

  • Change appearance of the tag’s content on webpage.
  • Control behavior of the tag’s content on a webpage.

Setting color and size of text, initializing value of a form element, setting alignment of paragraph, setting height and width of an image are a few examples of what can you do with HTML attributes.

Where to add attributes?

An HTML tag’s attributes are added in the opening tag .  You can add as many as attributes you want (and allowed by tag) to an HTML tag to define the appearance and behavior of tag’s content. Each attribute is followed by “=” symbol and the value of the attribute in double quotes (“”) or single quotes (‘’).  This is not mandatory but is considered a good practice to assign attribute value. In case the attribute’s value contains a space like in the case of a font name, it will not confuse to the browser while rendering a tag on the web page.

In case you need to add more than one attribute, add all of them as attribute-name=value pair one after another in the opening tag. All the attribute value pairs must be separated by a blank space or tab space.

Format HTML attributes

The attributes are added to the tag as shown-

<tag-name attribute-name1=”value1” attribute-name2=”value2” attribute-name3=”value3”…….> String to be printed on webpage </tag-name>

Example

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
  <FONT color='purple' size='5' font face='Tahoma'> Hello to the CSVeda World </FONT>
  <FONT color=#FF0000 size='3' font face='Times New Roman'> Let's learn HTML tags' attributes</FONT>
</HTML>
HTML Attributes example

Features of HTML attributes

  • All attributes included in a tag must be supplied with a value. If you don’t want to specify a value and still want to add the attribute (to set it later) give “” (empty double quotes) or ‘’ (empty single quotes) after “=” symbol.
  • Different tags have different attributes. You must check the allowed attributes before using an HTML tag
  • An attribute value pair cannot be repeated in a tag.

Allowed values of an attribute may depend upon the OS and value may be case sensitive. For example the color attributes can be given the name of the color in “” (double quotes) or ‘’ (single quotes). It can also be assigned an RGB value starting with #. For example #FF0000 represents Red color and can be given without enclosing in quotes.