HTML Elements have attributes that help in fine-tuning their behavior. Attributes appears as attribute/value pairs and we can specify them within the opening tag of an element.

Attributes are specific to an element or a group of elements. Therefore, it is a bad idea to apply an attribute blindly to any random HTML element. For example, script element and image element have a src attribute that points to the source of the element. Thus, we can use this attribute to specify the location of the source file for the JavaScript or the location of the image file. However, for most other elements (like, let us say paragraph element), specify the src attribute hardly makes any sense!

But, exceptions always exist! HTML does have attributes that apply to almost all HTML elements. For example, we can add identification and grouping attributes like ID and CLASS to almost all HTML elements. A few elements that do not have these two attributes are base, head, html, meta, param, script, style, and title elements.

Some of the HTML attributes are boolean in nature. If they are present, then they are considered being set to true. If they are absent, then they are considered being set to false. In terms of format, they come in two forms. In the first form, these elements are set to themselves, e.g. "<option selected="selected">". In the second form, these elements are set to a minimized version such that they appears only as attribute without any value, e.g. "<option selected>".

Most of the HTML elements come with a set of attributes. Before we proceed further, let us see some of the commonly used attributes.

Table: Some of the HTML Attribute
AttributeApplicable toDescription
idMost ElementsA unique ID for an HTML element
classMost ElementsA class name for one or more HTML elements
srcimgLocation of an image
srcscriptLocation of the script file
actionformLocation of the server-side form handler file
disablebutton, input, optgroup, option, select, textareaElements or their content cannot be modified
alt<img>Alternate text for image (for non-visual devices)
href<a>Location of a link

You may also find attributes that help HTML elements handle various events. We can use these attributes to attach functions (aka callbacks) that get invoked when the specified event occurs. For the sake of completeness, let us go over some of those as well. These attributes (given below) are applicable to most of the HTML elements except elements like applet, base, frame, frameset, head, html, script, style, title, etc.

Table: Some of the HTML Event Attributes
onclickMost elementsTriggers with click of a pointer button
ondblclickMost elementsTriggers with the double-click of a pointer button
onfocusMost elementsTriggers when an element receives focus either by mouse or by tab
onblurMost elementsOpposite of onfocus. Triggers when an element loses focus either by mouse or by tab
onkeydownMost elementsTriggers when we press a key
onkeyupMost elementsTriggers when we release a previously pressed key

While adding the above event-based attributes allow us to add handlers that get triggered when the event occurs, the recommended way is to decouple them from HTML content. Using JavaScript or jQuery (a popular JavaScript library), one can simply add the event-handling behavior for an HTML page from within a script. To do that, one would get hold of the element using JavaScript and then attach an event-handler to it. For more, please refer to our JavaScript module or jQuery module.

comments powered by Disqus