HTML - <data> Tag

HTML <data> tag is used to link the given piece of content with the machine-readable translation.

This element provides both a machine-readable value, and a human-readable value for rendering in a browser. If the given piece of content is related to date or time, then the <time> element must be used.Using its value attribute, we can use it to specify a machine-readable translation of the element's content.

Syntax

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

Attribute

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.

Examples of HTML data Tag

Bellow examples will illustrate the usage of data tag. Where, when and how to use data tag to add a machine-readable translation of a given content.

Implementing data Element

The following HTML example shows the usage of the <data> tag in an HTML.

<!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>
      <data>Text inside the p tag.</data>
   </p>
</body>
</html>

Using value attribute on Data Element

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

<!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>

Styling data Element

Let's look into the another scenario, where we are going to apply the CSS properties to the <data> tag

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML data tag</title>
   <style>
      data {
         color: red;
         font-style: italic;
         width: 120px;
         height: 30px;
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <!--create a data element-->
   <p>Example of HTML 'data' element</p>
   <p>Frontend Technologies: </p>
   <ul>
      <li>
         <data value="311">HTML</data>
      </li>
      <li>
         <data value="312">CSS</data>
      </li>
      <li>
         <data value="313">JavaScript</data>
      </li>
      <li>
         <data value="314">Angular</data>
      </li>
      <li>
         <data value="315">React</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