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.
| Attribute | Applicable to | Description |
|---|---|---|
| id | Most Elements | A unique ID for an HTML element |
| class | Most Elements | A class name for one or more HTML elements |
| src | img | Location of an image |
| src | script | Location of the script file |
| action | form | Location of the server-side form handler file |
| disable | button, input, optgroup, option, select, textarea | Elements 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.
| Attribute | Element | Description |
|---|---|---|
| onclick | Most elements | Triggers with click of a pointer button |
| ondblclick | Most elements | Triggers with the double-click of a pointer button |
| onfocus | Most elements | Triggers when an element receives focus either by mouse or by tab |
| onblur | Most elements | Opposite of onfocus. Triggers when an element loses focus either by mouse or by tab |
| onkeydown | Most elements | Triggers when we press a key |
| onkeyup | Most elements | Triggers 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.