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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×