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:
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:
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.
Browser Support for data-* Attribute in HTML:
Related Searches to data-* Attribute in html
data attribute jquery
html5 data attribute jquery
data attribute css
html data attribute jquery
data attribute definition
javascript set data attribute
jquery dataset
html tutorialshtml editor html code html form html tutorial html color html color codes html table html img html5 html code for website html and css html programs html website free html editor html5 tutorial wysiwyg html editor html tutorial pdf html converter php tutorial html example html tutorial css tutorial html css html tags html basics code html html online html mailto html lang html tags list
html attributes