Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to declare a custom attribute in HTML?
In this article, we will discuss how to declare a custom attribute in HTML. Custom attributes can be useful in HTML when you want to store some additional information that is not part of the standard HTML attributes. It allows for more flexibility and customization in HTML and can help make your code more maintainable and understandable.
Approaches
We have two different approaches to declaring a custom attribute in HTML including the following −
Using the “ data- prefix”
Using the “custom prefix”
Let us look at each step in detail.
Approach: Using the "data- prefix method"
The first approach is to declare a custom attribute in HTML as “data- prefix”. we can define custom attributes by prefixing the attribute name with "data-". You can create your own names for a custom attribute by using a prefix of your choice. This allows you to attach specific data to an HTML element, which can be easily targeted using CSS, JavaScript, or jQuery.
Example
Following is an example to declaring a custom attribute in HTML using “data- prefix”.
<!DOCTYPE html>
<html>
<head>
<title>Employee Table</title>
<style>
h1 {
color: blue;
}
th {
color: red;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Employee Table</h1>
<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr data-empid="001" data-dept="IT" data-salary="75000">
<td>001</td>
<td>Taylor</td>
<td>IT</td>
<td>$75,000</td>
</tr>
<tr data-empid="002" data-dept="HR" data-salary="60000">
<td>002</td>
<td>Jhon</td>
<td>HR</td>
<td>$60,000</td>
</tr>
</tbody>
</table>
<script>
const rows = document.querySelectorAll("tr[data-empid]");
rows.forEach(row => {
const empid = row.dataset.empid;
const dept = row.dataset.dept;
const salary = row.dataset.salary;
console.log(`Employee ID: ${empid}, Department: ${dept}, Salary: ${salary}`);
});
</script>
</body>
</html>
Note − Here, JavaScript can access the custom attributes in the example code by selecting the "tr" elements based on their custom attributes, and then logging the values of those attributes to the console.
Approach: Using the "custom prefix method"
The first approach is to declare a custom attribute in HTML as a “custom prefix”. In HTML, a custom prefix refers to creating custom attributes on HTML elements. The prefix can be any name of your choice that is added before the attribute name, and it can be used to add additional data or information to an element. By using a custom prefix, you can create your own custom attributes that are specific to your needs and can be targeted in CSS or JavaScript.
Example
Following is an example of declaring a custom attribute in HTML using “custom prefix”.
<!DOCTYPE html>
<html>
<head>
<title>Custom Attribute Example</title>
<style>
[custom] {
color: red;
}
</style>
</head>
<body>
<h1 custom="header-color">Tutorials point</h1>
<p custom="paragraph-color">Hello World!</p>
<script>
const header = document.querySelector("[custom='header-color']");
const paragraph = document.querySelector("[custom='paragraph-color']")
console.log(`Header color: ${header.getAttribute('custom')}`);
console.log(`Paragraph color: ${paragraph.getAttribute('custom')}`);
</script>
</body>
</html>
It defines a custom attribute named "custom" and applies the CSS style to any element with that attribute.The JavaScript code selects the header and paragraph elements based on their custom attributes and logs the values of those attributes.
Conclusion
In this article, we examined two different approaches to declare a custom attribute in HTML. Here, we are using two different approaches “data- prefix” and the “custom prefix”. Both custom prefix and data- prefix are used to declare custom attributes in HTML, but the dataprefix is more widely recognized and is supported by all modern browsers. The custom prefix is more flexible, as it allows you to choose your own prefix name, but it may not be recognized by all browsers or tools.
4K+ Views
