HTML Tag Attributes

We can make a paragraph right-justified, or a horizontal line shorter and thicker. We can also specify any color for the text and background of the entire web page. All these are achieved by inserting attributes to tags.

What are tag attributes?

Tag attributes are additional instructions of formatting the content of an element. They are optional and are placed inside the start tag just after the tag name. With a few exceptions, the majority of attributes will have a value assigned to them. Attribute values may be predefided words like "left", "all", etc., or they may be decimal or hexadecimal numbers choosen by the HTML author. Attributes values may be written within or without quotation marks. note

A general form of a tag with attributes looks like this,

List of attributes

In HTML references, you'll find attributes listed with their possible alternate values. For example, the tag has one attribute (not counting the core attributes, listed in the next section); it is the align attribute. The possible values of this attribute are listed as:

align = "left" | "center" | "right"

The vertical bar (|) is a short form of the conjunction OR. That means, we can assign any one of the three values to the attribute. In this training we shall underline default values of attributes. The default value of the align attribute is "left", that is, if we do not assign a value to the attribute, or if we use the tag without an attribute, then the paragraph will be left-aligned (left-justified). On the other hand, if we want the paragraph to be right-aligned or centered we need to write the paragraph element as follows:

... - to right-justify ... - to center

Some HTML tags do not have any attributes, while others have quite a number of them. Among all the tags that we have discussed up to now, <HEAD>, <TITLE> and comment do not have any attributes. The <HTML> tag has an attribute which is almost never used. Note also that some very prominet tags are meaningless without attributes. The image tag, <img>, for instance, doesn't do anything unless we specify the attribute that locates the image to be displayed.

Here is a list of the attributes of the tags we have visited till now:

TAG	ATTRIBUTES & VALUES	DESCRIPTION
<p>	align = "left" \| "center" \| "right"	Aligns the paragraph onto the left, center, or right.
<br>	clear="left" \| "right" \| "all" \| "none"	controls the flow of text around an image. (See page on images)
<pre>	width="n_characters"	sets the maximum number of characters that can be displayed on one line.
<hr>	align="left" \| "center" \| "right"	position the rule to the left, center, or right.
	width="px" \| "%"	Sets the horizontal width of the rule. Default value is the width of its container.
	size="px"	Sets the height of the rule in pixels. Default value is 3px
	color="color"	Specifies the color of the line
	noshade	This attribute is not assigned a value; only its presence or absence determines the output. If the attribute is present, the line is not shaded; otherwise, it is shaded
<body>	text="color"	Specifies text color
	bgcolor="color"	Specifies background color
	background="image_file"	Sets background image
	link="color"	Specifies link color for document
	alink="color"	Specifies active link color
	vlink="color"	Specifies visited link color

The attributes of the first three tags are self-evident and need no further explanation. Besides having multiple attributes, the <hr> and the <body> tags introduce a number of new things that call for some explanation. We shall use the <hr> tag to illustrate our explanations. The body tag will be dealt with in a full section.

If you use more than one attribute in a tag, then you have to separate them by one or more spaces.
Sizes such as width and length are usually specified in pixels (px). A Pixel is the smallest units on a computer monitor. A typical monitor will have 72 pixels per inch (about 28 pixels per centimeter).

TOP

Exaples of tag attribute usage

Here is a horizontal line 1px high and 100px wide.

note

Widths may sometimes be specified in percent. If you specify the width in %, then the line will occupy that percent of the width of the container element. If a horizontal line is placed within another element such as a table, then the container of the <hr> element is the table, therefore, the percent is relative to the width of the table; otherwise, it is relative to the width of the browser window.
Colors can be specified in various ways, one of which, though not recommended, is by color name. Common color names such as green, yellow, red, etc. are acceptable. There is a full section all about colors. Here is another horizontal line.

How to use attributes of a horizontal rule <hr>
Code	`<hr size="5px" width="30%" color="blue" align="right"/>`
Output

Interactive Exercise

While you can always use your text editor (notepad) to write HTML codes and test it, we are introducing here a quicker way to see the effects of some codes right here.

Below, in the 'Coding Area', there are two paragraphs, one short and one long, and also a horizontal rule. Insert attributes to the and <hr /> tags and click on the 'Show Output' button to see the effects of the modifications you made. Before making any changes, click on the button to see what the default setting (without attributes) looks like. Then, play with it; practice makes perfect.

Although each HTML tag has its own attributes, there are some which are referred to as 'core attributes' that can be used in nearly all tag. The subject of the next section is about these core attributes

TOP