Quackit

This is the print version of http://www.quackit.com/html/tutorial/html_attributes.cfm


HTML Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.

Consider this example:

<body style="background-color:orange">
OK, we've already seen the body tag in previous lessons, but this time we can see that something extra has been added to the tag - an attribute. This particular attribute statement, style="background-color:orange", tells the browser to style the body element with a background color of orange.

Width

Here's another example of adding an attribute to an HTML tag:

<hr width="60%" />

This results in:


Alignment

You can align HTML elements to the left, right, or center:

<h3 align="left">Aligned left</h3>
<h3 align="center">Aligned center</h3>
<h3 align="right">Aligned right</h3>

This results in:

Aligned left

Aligned center

Aligned right

Many attributes are available to HTML elements, some are common across most tags, others can only be used on certain tags. Some of the more common attributes are:

AttributeDescriptionPossible Values
widthSpecifies the width of an element(Numeric value)
heightSpecifies the height of an element(Numeric value)
alignSpecifies the horizontal alignment of an elementleft, center, or right
classUsed with Cascading Style Sheets (CSS)(the name of a class)
styleUsed with Cascading Style Sheets (CSS)(style information)
titleCan be used to display a "tooltip" for your elements.(You supply the text)

You don't need to fully comprehend these just yet. The good thing about attributes is that, generally, they are optional. Many HTML elements assign a default value to its attributes - meaning that, if you don't include that attribute, a value will be assigned anyway. For example, if you don't specify the alignment for the p element, it will always be aligned left. This is handy - you will be using that tag a lot, so the less coding you have to do, the better!

You will see more attributes being used as we cover off some of the more advanced HTML elements.