HTML data Tag

In HTML, whenever you need to assign some custom information to some data which you wish to display on your webpage, in that case, you can use <data> tag.

For example, if you have an ecommerce website, or you have a shop page in your website where you list some products. The products have a name (obviously) and some product code(like SKU number), then we can use the <data> tag, to show the product name to the website user, and can add the product code to this <data> tag, which will not be visible to the end user, but we can pick that value using JavaScript code.

The <data> tag is new in HTML5.

HTML <data> Tag - Syntax and Usage

The <data> tag requires the start(opening) tag and end(closing) tag.

<data value="somevalue">
    some text visible on webpage
</data>

HTML <data> Tag Basic Example

Let's take one more example. If you have a forum, and you show the name of the top users for every one to see. When we save user data in database, we either assign every user row a unique id or a unique username. We can use the <data> tag to show the names of the user on the webpage, while use its value attribute to add the useful user id information for our server side code to use.

HTML <data> Tag Attributes

This element supports Global attributes and Event attributes.

value Attribute:

There is one attribute specific to this tag, its the value attribute. We have used this attribute in the code example above too. This attribute is used to store the data which is not displayed on the webpage but is available in the DOM and can be used using Javascript.

Browser Support for HTML5 <data> tag

Following browsers support this attribute:

• Google Chrome 62.0+

• Internet Explorer 13.0+

• Firefox 22.0+

• Opera 49.0+

• Safari - Not supported