Tutorials » Html tutorials »

HTML Attributes

This article explains about Attributes.

HTML Attributes

An attribute is the additional property that you embed within an HTML tag to modify its behavior.

Here’s the basic syntax:

<tagname attributeName1="value" attributeName2="value">

As you can see an Attribute presents it self as a Name – Value pair.
Attribute values are enclosed within double quotes and each pair of attribute is separated by a single space. Although omitting the double quotes would not matter in most cases, using them is always considered as a good programming standard.

No, there is no limit to the number of attributes you can add to a tag and the Order of the attributes is just irrelevant. But keep in mind that each tag has a list of permitted attributes.

Now coming to the categories, Attributes can be classified into core attributes, international attributes, Keyboard attributes and Event handling attributes. Below is a brief of each of them.

1. Core attributes
These attributes specify the context information of a tag.

One of the most commonly used attribute is the ‘id attribute’ that serves as a document wide unique identifier for an element. It’s used by browsers to set focus on the specific HTML element or by scripts to alter the contents/presentation of an element. No two elements can have the same ID value in a single document.
Syntax: id = “name”

The class attribute is used as a reference to CSS class. Unlike ‘id’ values, a number of elements in a document can be assigned the same ‘class value’.
Syntax: class = “name”

2. International attributes
The Attribute specifies the language options to be used by the text present in the HTML tag.

It’s used to declare the direction that the text should run, either left to right or right to left. This allows the internatinalization of HTML since several important foreign languages read right to left, such as Arabic.
Syntax: dir = “ltr” | “rtl”
‘ltr’ which directs the text to flow from left to right, is the default.

Defines the language being used.
Syntax: lang = “code”
Languages are represented by a two letter code, such as ‘en’ for ‘English’ or ‘el’ for greek. To specify regional variations, you can include the Hyphen. For example, the language code for U.S english would be “en-us”.

3. Keyboard attributes
With these attributes, one can access a HTML element by just using the keyboard in spite of a mouse.

The accesskey would be a single character that serves as the keyboard short cut to some element.
Syntax: accesskey = character

Sets the order in which the element should be tabbed in your document.
Syntax: tabindex = a number

4. Event handling attributes
These attributes specify the action to be performed when a user clicks on an HTML element. The value of these attributes would be a JavaScript code.

Specifies the function / Sub routine to be invoked once the mouse button is clicked.
Syntax: onmousedown = “action”

Below is a list of commonly used Attributes:

AttributeDescriptionPossible Values
widthwidth of elementNumeric
heightheight of elementNumeric
alignhorizontal alignment of elementleft, center or right
classCascading Style Sheets (CSS)Class name
styleCascading Style Sheets (CSS)style information
titledisplays tooltiptext

Noticed the yellow background, This was done using the style attribute:

<P style="BACKGROUND-COLOR: yellow">
/* your content goes here */

This is how an ordinary HTML button looks like

<INPUT id="Button1" type="button" value="Button" name="Button1">

Now Here’s how the button appears with the use of attributes:

<INPUT id="Button2"
onclick="javascript:alert('You have Invoked the Javascript alert function');" type="button" value="Click Me!"
name="Button1" style="BORDER-BOTTOM: limethick ridge;BACKGROUND-COLOR: blue;FONT-WEIGHT: bold; COLOR: yellow; ">

See the difference?
So that’s how you can improve the appearance of your website by the mere usage of HTML Attributes :)

Previous Chapter: HTML Entities
More Chapters: Html Tutorials
More Tutorials: Tutorial Index

Top Contributors
    Last 7 Daysmore...

    Awards & Gifts

    Online Members

    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India