Understanding attributes

In HTML, elements (or tags) have attributes or properties. As an HTML writer, attributes allow you to add extra instruction to your tags. Because each tag has its own unique attributes, you have to learn which attribute(s) belongs which tag. (See the attributes reference table for details.) Any attribute cannot be just applied to any tag. Think of attributes as options. As such, options can only be applied to tags if the tags offer those options. If you incorrectly apply an option to a tag, the browser is likely to ignore that option.

An attribute has two parts: attribute name and attribute value. Because of these two-parts, they are also referred to as pairs. The attribute name identifies (or defines) what special instruction you want to add to a particular tag. The attribute value, on the other hand, indicates (usually predefined) option for that attribute. So if you are going to use an attribute, you will need to have value for that attribute. Let's go over the actual HTML.

align="right" is an example of attribute-value pair. The word align is the attribute. The value of this attribute is right. A value of an attribute is enclosed in double quotation marks. Notice the value is on the right-hand side of the equal sign and the attribute name is on the left of equal sign. As you may have understood, align="right" instructs the browser to align some text or object to the right hand side of the web page. You can apply this attribute, for example, to <p> tag to start your paragraph from the right hand side as:

This is my paragraph. Normally, text and other object on a web page are left-aligned. Because this paragraph has an extra instruction (align="right") to start this particular paragraph from the right, the paragraph is right-aligned.

The following shows the HTML code for the top paragraph:

We stated earlier that an attribute adds an extra instruction to a tag. When does this extra instruction stop executing (or finish applying value of the attribute)? This is an important question because many times you will have nested tags and it may not be clear to you when the instruction will stop. The answer is that the instruction stops once the browser encounters the corresponding ending tag for the tag that contains the attribute. In our example, any text outside of this paragraph tag will be unaffected (specifically will not be right-aligned) because we apply the attribute to just one <p> tag.

Keep the following points in mind while working with attributes:

• some attributes have predefined values. For example, for the align attribute, possible values include, left, center, justify and right. So if you use the align attribute, you should use one of these acceptable values.
• some attributes accept numerical values. For instance, for the width attribute, you can specify a numerical value such as 5 (which indicates 5 pixels), or 20% (which indicates 20% of the screen width).

Main points to remember for attributes:

• Attributes are specific to tag names. For example, for the <p> tag, you can use the align attribute but not the width attribute. The width attribute can only be used with tags such as <table>, <td>, and <img>.
• Attributes have values. Make sure to use the correct value for the correct attribute. For instance, you should not use color="20", or align="brown"; instead use, color="red", and align="justify".
• Attribute values needs to be enclosed in double quotation marks. This is true especially if the value contains one or more spaces, for example, face="Times New Roman".
• Attribute values could come from a predefined list (such as color names red, green, blue, etc.) or from you (width of a table 50% or 800 pixels.)