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:

Attribute	Description	Possible Values
width	Specifies the width of an element	(Numeric value)
height	Specifies the height of an element	(Numeric value)
align	Specifies the horizontal alignment of an element	left, center, or right
class	Used with Cascading Style Sheets (CSS)	(the name of a class)
style	Used with Cascading Style Sheets (CSS)	(style information)
title	Can 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.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/tutorial/html_attributes.cfm">HTML Attributes</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites