html tutorial - data-* Attribute in HTML - html5 - html code - html form



Data hypen star attribute in html

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:

data-* Attribute Code Explanation

  1. <script> tag defines a client-side script in javascript.
  2. showDetails(obj) is a JavaScript function to show an alert message as data-tutorials attribute values.
  3. onclick attribute is used call the showDetails() function on user click.
  4. “CSS is define styles for web pages” value is stored in data-tutorials attribute.

Output for data-* Attribute in HTML:

data-* Attribute Output

  1. The output displays the list of tutorials topics.
  2. data-* Attribute Output
  3. When the user click the CSS from the list, the alert box has been shown the data-tutorials attribute value.
  4. “CSS is define styles for web pages” text is shown in the alert message.

Browser Support for data-* Attribute in HTML:

4.0 5.5 2.0 3.1 9.6

Related Searches to data-* Attribute in html