Updated July 28, 2023
HTML Attributes
HTML attributes are special words that modify the behavior of an HTML element. They come in use within the opening tags of elements and can either modify the default functionality of an element or provide the necessary functionality. Syntactically, an attribute is added to the HTML start tag. They can be categorized as required, optional, standard, or event attributes, and are written as name-value pairs separated by an equal sign ” = ” within an element’s start tag.
Different HTML Attributes
Given below are the different HTML attributes and how they work in detail:
1. Core Attributes
There are four core attributes primarily in use:
- ID: This attribute identifies an element uniquely within an HTML page. When an element carries an ID attribute, it serves as a unique identifier that makes it easy to identify the element and its content. This is particularly useful when there are multiple elements with the same name within a web page.
- Title Attribute: This attribute provides a suggested title for an element. Its behavior depends on the context in which it is used, and it may be displayed as a tooltip when the cursor hovers over the element or when the element is loading. It can also provide additional information about an element when the user hovers the mouse pointer over it.
- Class Attribute: This attribute associates an element with a style sheet by specifying the class of the element. More can be learned about this attribute when Cascading Style sheet is being learned. The value of the class attribute can be a space-separated list of class names. For example: class=”className1 className2 className3″
- Style Attribute: This attribute allows the user to specify CSS rules for an individual element. With the style attribute, the user can apply various CSS effects to HTML elements, such as changing the font size, font family, and color.
2. Internationalization Attribute
- Dir: The dir attribute helps indicate to the browser the direction that text should follow. This attribute can take on two values: LTR and RTL. LTR means left to right, which is the default value, while RTL stands for right to left. When used within the <html> tag, it determines how text should be represented throughout the entire document. It can also control the direction of text within the content of the tag.
- Lang Attribute: This attribute helps showcase the main language used in a document. One can use it in HTML to maintain backward compatibility with earlier versions of HTML. Also, one replace it by the XML: lang attribute in new XHTML documents. The values of the lang attribute are based on the ISO-639 standard and consist of two-character language codes. Declaring a language is important for accessibility and for search engines to index content properly.
- XML-Lang Attribute: This attribute tends to replace the lang attribute. The value of the XML-lang attribute must include the language and country codes as specified by ISO-639.
3. Generic Attribute
- Align Attribute: This attribute is useful when you want to position certain elements on your web page. It allows you to change the alignment to the left, right, or center of the page. The default alignment for all elements is set to the left, but you can change it using the align attribute.
- Src Attribute: When one wants to insert an image into a web page, one needs to use the <img> tag with the src attribute. One can specify the image’s address as the attribute’s value inside double quotes. One can use the src attribute as follows to include the image on the webpage.
Code:
<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 alternative tag that can be used to display something if the primary attribute, which is the <img> tag, fails to display the original image assigned to it. It 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 display.
- The Width and Height Attribute: These attributes can adjust the height and width of an image.
Example:
Code:
<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>- Href Attribute: This attribute is used when the user wants to direct a specific link to any address and is used along with the <a> tag. When the link is placed in the href attribute, it is associated with the text displayed within the <a> tag. Clicking on this text will redirect the user to the URL specified in the href attribute. By default, clicking on the link will open the linked page in the same tab or window. If one wants to open the linked page in a new tab or window, one can use the target attribute and set its value to “_blank”. This behavior may vary based on the user’s browser settings.
4. Data Attribute
HTML provides custom data attributes that allow adding additional information related to the content in HTML tags. These attributes are not specific to HTML5 and can be used on all HTML elements. The data-* attribute enables the creation of custom data attributes that can store private data for the page or application.
In order to customize, one divides the data 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: Any string value can be associated with the attribute.
The syntax for a data attribute is as follows:
<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>5. DOM Attribute Property
To retrieve the NamedNodeMap objects, one can use the attribute properties in the HTML DOM. This will return a group of node attributes. The NamedNodeMap represents a collection of attribute objects, which can be accessed by their index number, starting at 0. To use this, the user can access the node’s attributes using the syntax node.attributes.
The value returned is a NamedNodeMap object that contains all the attributes in the collection of nodes. However, if someone is using Internet Explorer 8 or an earlier version, the attributes property may return all possible attributes for any element, resulting in more values than expected.
Example:
Code:
<!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: 26. Global Attributes
HTML also provides global attributes that can work with any HTML element:
- Accesskey: Specifies a shortcut key to activate or focus on any element.
- Translate: Specifies whether the content of the element is to be translated or not.
- Class: One or more class names for an element are specified.
- Title: Specifies extra information about an element.
- Contenteditable: This attribute can be used to specify whether the content is editable or not.
- Tabindex: Specifies the tabbing order of an element.
- Dir: Specifies the text direction for any content of an element.
- Spellcheck: Users can explicitly specify if they want to have the spelling and grammar checked or not.
- Draggable: Specifies if an element should be draggable or not.
- Dropzone: Specifies whether the dragged data is copied, moved, or linked when dropped.
7. Event Attributes
HTML has the ability to trigger actions when some events take place.
- Onload: Fires after the page has finished loading.
- Onmessage: A script that runs when the message is triggered.
- Onstorage: A script that runs when a web storage area is updated.
- Onerror: The script runs when an error occurs.
- Onpagehide: The script can be used when the user navigates away from a page.
8. 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 the entered element is invalid.
9. Key Event Attributes
- Onkeydown: Triggered when a key is being pressed.
- Onkeypress: Triggered when a key is pressed.
- Onkeyup: This is triggered when a user releases a key.
10. Mouse Event Attributes
- Onclick: This is triggered when the mouse clicks on an element.
- Onmousemove: Fired when the mouse pointer is moving while it is over an element.
- Onmouseip: Triggered when a mouse button is released from over an element.
- On-wheel: Triggered when the mouse wheel rolls up or down over an element
11. Drag Event Attributes
- Ondrag: This is triggered when an element is dragged.
- Ondragleave: The script runs when an element leaves a valid drop target.
- Ondrop: Triggered when the dragged element is being dropped
- Onscroll: The script runs when an element’s scroll bar is being scrolled.
Conclusion
HTML has evolved over time, offering a wide range of attributes such as core, internationalization, data, global, and event, making web applications and pages more interactive. Combined with CSS, HTML allows for easy customization of web elements to create visually appealing web applications.
Recommended Articles
Here are some further related articles:
