HTML - <data> Tag

Introduction to <data> Tag

The HTML <data> tag is used to link the given piece of content with corresponding machine-readable values, making it easier for applications to process and manipulate data.

The <data> tag supports the value attribute, that holds the machine-readable data. The visible text inside the <data> element represents human-readable information. It is not used commonly like <span> or <div>, as it plays a critical role for improving data binding in web applications.

Syntax

Following is the syntax of HTML <data> tag −.

<data>.....</data>

Attributes

HTML data tag supports Global and accept a specific attribute as well which is listed below.

Attribute	Value	Description
value	machine-readable format	Specify the machine-readable translation of the content of the element.

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of the <data> tag.

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        font-family: verdana;
    }
</style>
<body>
    <p>Example of HTML data element</p>
    <p>Price: <data value="12.32">12.32 USD</data></p>
</body>
</html>

Example : Using value Attribute

Consider the following example, where we are going to use the value attribute along with the<data>.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML data tag</title>
</head>
<body>
   <!--create a data element-->
   <p>Example of HTML 'data' element</p>
   <p>Fruits: </p>
   <ul>
      <li>
         <data value="101">Apple</data>
      </li>
      <li>
         <data value="102">Banana</data>
      </li>
      <li>
         <data value="103">Orange</data>
      </li>
      <li>
         <data value="104">Grapes</data>
      </li>
   </ul>
</body>
</html>

Supported Browsers

Tag
data	Yes 62.0	Yes 13.0	Yes 22.0	No	Yes 49.0

html_tags_reference.htm