HTML Attributes
HTML attributes can be said as special words which are used inside opening tags and are responsible for controlling an element’s behavior. They are a modifier of HTML element type. This modifier can do two jobs. It can either modify the default functionality of an element or provide the functionality to any element that cannot function properly without them. Syntactically, an attribute is added to the HTML start tag. There are different types of attributes that have been identified. These include the required attributes, optional attributes, standard attributes, and event attributes. Required attributes are those which are needed by a particular element type so that the function works correctly. The optional attribute can be used to modify the default functionality of an element type. A large number of element types support the standard attributes, and event attributes can cause element types that can specify the scripts that run under specific circumstances. The attributes usually appear as name-value pairs and are separated by ‘=’ (equal sign). They are written within the start tag of an element after the element’s name.
Different HTML Attributes
Let us have a look at different attributes and how they work in detail.
Core Attributes
There are four core attributes that are majorly used. To name these, they are as follows:
- ID: This HTML attribute can be easily used to identify an element present within an HTML page uniquely. The user id can be used either when an element carries an id attribute as a unique identifier, making it possible to identify the element and its content or this is used when there are two elements with the same name within a web page. The ID attribute can help in easily identifying the difference between the elements which have the same name.
- The Title Attribute: This attribute does the work of giving a suggested title for a particular element. It depends on the carrier how it will behave, and although it is not usually displayed as a tooltip whenever the cursor comes over the element or if it has to display it when the element is loading. It is also used to explain an element on hovering the mouse over it. The behavior can differ with different elements, and generally, its value is displayed on loading or on hovering the mouse pointer over it.
- The Class Attribute: The association of this attribute is done with an element of the style sheet. The user needs to specify the class of the element. More can be learned about this attribute when Cascading Style sheet is being learned. The value here may also be a space-separated list of class names. For example: class = “className1 className2 className3”
- The Style Attribute: This attribute allows you to specify the Cascading Style Sheet rules within any element. It can provide various Cascading Style sheet effects to the HTML elements like increasing the font size. It can also change the font family and coloring.
After the core attributes, we have some internationalization attributes. They are as below:
Internationalization Attribute
- Dir: The dir attribute helps you in indicating to the browser the direction in which a text should follow. This attribute can usually take up two values. These can be LTR and RTL. LTR means left to right, and this is the default value, while RTL stands for the right to left. When this attribute is used within the <html> tag, it determines how a text should be represented within the entire document. It can also be used to control text’s direction from just the content of the tag.
- The Lang Attribute: This attribute helps in showcasing the main language that is used in a document. This attribute can be kept in HTML so that it is backward compatible with earlier versions of HTML. It can also be replaced by the XML: lang attribute in new XHTML documents. The values of lang attributes are ISO-639 standard and have two-character language codes. Declaring a language is important in order to access the application and different search engines.
- The XML-Lang Attribute: This attribute is supposed to be the replacement for the lang attribute. The value of the XML-lang attribute must have the country code as mentioned previously.
In addition to these, there are many generic attributes that are described below.
Generic Attribute
- Align Attribute: This attribute is useful when you wish to have some elements of your page at your disposition. You can change the alignment to left, right or the center of the page. The default alignment for all elements is set to the left. This can be changed by using this align attribute.
- Src Attribute: If a user needs to insert an image into a web page, we need to use the <img> tag with the src attribute. We can specify the address of the image as the attribute’s value inside the double quote. You can use the src attribute as below to include the image on the webpage.
<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449">
</body>
</html>
- Alt Attribute: This attribute is used as an alternate tag that can be used to show something if the primary attribute that is the <img> tag which fails to display the original value which is assigned to it. This can describe the image to a developer who is using it at the coding end. If the main image fails, then the alternate image can be used to display.
- The Width and Height Attribute: This attribute can be used to adjust the height and width of an image.
Example:
<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449" width="300px" height="100px">
</body>
</html><
- The Href Attribute: This attribute is used when the user wants to direct to a specific link to any address. This attribute is used along with the <a> tag. When the link is placed in the href attribute where it is to be directed, it is linked to the text displayed within the <a> tag. When the user clicks on this text, the user will be redirected to the link’s address. The default option to open this page in the same tab. If you make use of the target attribute, then you can set its value to _blank. This will redirect to another tab or another window based on your browser’s configuration.
Data Attribute
HTML also provides custom data attributes that help you to add information related to you in HTML tags. These are not specific to HTML5 and can be used on all HTML elements. The data -* attribute helps us in customizing our own custom data attributes; it can store the data privately to the page or the application. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,492 ratings)Course Price
₹6999 ₹41999
View Course
Related CoursesBootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)
In order to customize, the data is divided into two parts:
- Attribute Name: It should have at least one character long and should not have any capital letters. This name can also be prefixed by using ‘data-’.
- Attribute Value: The value for an attribute can be any string.
The syntax for data attribute is as:
<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>
DOM Attribute Property
To get the NamedNodeMap objects, the attribute properties in HTML DOM should be used. It will return the group of node attributes. The NamedNodeMap also represents the collection of attribute objects, and it can be accessed by index number. This index number starts at 0.
The syntax to use this is a node.attributes
The value that is returned is the NamedNodeMap objects which are present in the collection of nodes. If the user is using Internet Explorer 8 or any of the earlier versions, then the attributes property will return all possible attributes for any element, and this can result in more values than expected.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM attributes Property
</title>
</head>
<body>
<h2>
HTML DOM attributes Property
</h2>
<button id = "CBA" onclick = "myeduCBA()">
Click Here!
</button>
<br><br>
<span>
Button element attributes:
</span>
<span id="sudo"></span>
<script>
function myeduCBA() {
// It returns the number of nodes
var cba = document.getElementById("CBA").attributes.length;
// Display the number of nodes
document.getElementById("sudo").innerHTML = cba;
}
</script>
</body>
</html>
The output for above program will be
Button element attributes: 2
Global Attributes
HTML also provides global attributes which can be used with any HTML element. The attributes are as below.
- Accesskey: It specifies a shortcut key to activate or focus on any element.
- Translate: If this attribute is used, it specifies whether the content of the element is to be translated or not.
- Class: It specifies one or more class names for an element.
- Title: This attribute specifies extra information about an element.
- Contenteditable: In order to specify whether the content is editable or not, this attribute can be used.
- Tabindex: It specifies the tabbing order of an element.
- Dir: It specifies the text direction for any content of an element.
- Spellcheck: User can explicitly specify if they have to check the spelling and grammar checked or not.
- Draggable: It specifies if an element should be draggable or not.
- Dropzone: It specifies whether the dragged data is copied, moved or linked when dropped.
Event Attributes
HTML has the ability to trigger actions when some events take place. The event attributes can be as below.
- Onload: It fires after the page has finished loading.
- Onmessage: This can be said as a script that runs when the message is triggered.
- Onstorage: This is a script to be run when a web storage area is updated.
- Onerror: This script is run when an error occurs.
- Onpagehide: This script can be used when a user can navigate away from a page.
Form Event Attributes
Actions inside an HTML form trigger these events.
- Onblur: It is triggered as soon as the element loses focus.
- Onchange: It is triggered as soon as the value of an element changes.
- Oncontextmenu: This is run when a context menu is triggered.
- Onfocus: It is triggered as soon as the element gets focus.
- Oninput: The script has to run when the element receives an input.
- Onsearch: This is triggered when the user writes something in the search field.
- Oninvalid: This is triggered when an element that is entered is invalid.
Key Event Attributes
- Onkeydown: It is triggered when a key is being pressed.
- onkeypress: This is triggered when a key is pressed.
- Onkeyup: This is triggered when a user releases a key.
Mouse Event Attributes
- Onclick: This is triggered when the mouse clicks on an element.
- Onmousemove: This is fired when the mouse pointer is moving while it is over an element.
- Onmouseip: It is triggered when a mouse button is released from over an element.
- Onwheel: It is triggered when the mouse wheel rolls up or down over an element
Drag Event Attributes
- Ondrag: This is triggered when an element is dragged.
- Ondragleave: The script is run when an element leaves a valid drop target.
- Ondrop: It is triggered when the dragged element is being dropped
- Onscroll: The script is run when an element’s scroll bar is being scrolled.
Conclusion
HTML is the oldest technology that is being used to create different web applications. With time HTML has evolved gradually and provides a lot of features for the elements that are present. It provides a wide variety of attributes that help in making the application more effective. These include core attributes which are the basic ones that are used most frequently. It also provides Internationalization attributes that enable languages changes. The data attribute helps in storing data and customize it the way the user wants it to be. With all these, it also has global attributes which can be used with any element and anywhere. It also has Event attributes that are triggered when any kind of event takes place. As a result, it makes the web application or web page very interactive. HTML thus proves to be still in the game of development of web applications due to all these features. With these, the style attribute which can be used with CSS makes it more beautiful and attractive to use. So do make use of all attributes that are present and have an awesome web application of your choice the easy way.
Recommended Articles
This has been a guide to HTML Attributes. Here we have discussed the Concepts and different Attributes of HTML. You may also look at the following articles to learn more –