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
HTML data-* Attributes
The data-* attributes in HTML is used to embed custom data attributes on all HTML elements. This is a global attribute and can be used on any element.
Following is the syntax −
<element data-attribute-name=”attribute_value”
Above, the attribute-name should have only lowercase character. With that, it must be at least one character long after the prefix "data-"
Let us now see an example to implement the data-* attributes in HTML. Click on any of the attribute to get more info about it −
Example
<!DOCTYPE html>
<html>
<head>
<script>
function display(tutorial) {
var type = tutorial.getAttribute("data-tutorial-type");
alert(tutorial.innerHTML + " = " + type + ".");
}
</script>
</head>
<body>
<h1>Tutorials</h1>
<h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
<h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
<h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html>Output
Now click any of the <h2> heading above to get more info about the attribute. We clicked on the jQuery attribute here −
Updated on: 29-Jun-2020
466 Views
Advertisements