HTML - <data> Tag

The 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.

Following are the supported attributes of the HTML <data> tag −

S.No Attribute & Description
1

value

Links given content to machine readable

Syntax

Following is the syntax of the <data> tag −

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

Example

The following HTML program 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>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

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>

On running the above code, the output window will pop up, consisting of list items displayed on the webpage.

Example

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>

When we run the above code, it will generate an output displaying the list items alon with a CSS applied to it on the webpage.

html_tags_reference.htm
Advertisements