Learn html - html tutorial - Data hypen star attribute in html - html examples - html programs
The data-* attributes are used to save custom data in the page or application.
The data-* attributes provide us the ability to insert characteristic data attributes on all HTML elements.
The saved data can then be used in JavaScript to make a more interesting user experience.
This attributes contains three sections:
The attribute name has not hold any uppercase letters.
The attribute name need at least one character long after the prefix "data-".
The attribute value must be any string.
The data-* attribute is a section of the Global Attributes.
Syntax for data-* attribute in HTML:
<element data-* ="somevalue">
Difference between HTML 4.01 and HTML 5 for data-* Attribute:
HTML 4.01
The data-* attribute has not been defined.
HTML 5
The data-* attribute is added.
Applies To:
Element
Attribute
All HTML Elements
data-*
data-* Attribute Value:
Value
Description
somevalue
Defines the attribute value (string).
Sample Coding for data-* Attribute in HTML:
Tryit<!DOCTYPE html><html><head><title>Wikitechy data-* attribute</title><script>
function showDetail(obj)
{
alert(obj.getAttribute("data-tutorials"));
}
</script></head><body><h1>Wikitechy tutorials</h1><p>Click The Tutorial list to view details</p><ul><li onclick="showDetail(this)" data-tutorials="HTML is a
standard markup language">HTML</li><li onclick="showDetail(this)" data-tutorials="Java is a
Programming Language">JAVA</li><li onclick="showDetail(this)" data-tutorials="CSS is define
styles for web pages">CSS</li></ul></body></html>
Code Explanation for data-* Attribute in HTML:
<script> tag defines a client-side script in javascript.
showDetails(obj) is a JavaScript function to show an alert message as data-tutorials attribute values.
onclick attribute is used call the showDetails() function on user click.
“CSS is define styles for web pages” value is stored in data-tutorials attribute.
Output for data-* Attribute in HTML:
The output displays the list of tutorials topics.
When the user click the CSS from the list, the alert box has been shown the data-tutorials attribute value.
“CSS is define styles for web pages” text is shown in the alert message.
