HTML Tutorial

HTML Tag: <data>

The <data> tag is used to store arbitrary data associated with an element. This data can be accessed by JavaScript.

Usage of

To use the <data> tag, simply add it as an attribute to an element. The value of the data- attribute should be the name of the data you want to store.

For example, the following code stores the user's name in a <data> tag:

<p data-user-name="John Doe">Hello, world!</p>

Attributes of

The <data> tag has no attributes. However, the value of the data- attribute can be any string.

Examples with

Here are some examples of how you can use the <data> tag:

  • Store the user's name:
<p data-user-name="John Doe">Hello, world!</p>
  • Store the current date:
<p data-current-date="2023-03-08">Today is March 8, 2023.</p>
  • Store a list of items:
<ul>
  <li data-item="item1">Item 1</li>
  <li data-item="item2">Item 2</li>
  <li data-item="item3">Item 3</li>
</ul>

Exploring the tag

To explore the <data> tag, you can use the following HTML:

<p data-user-name="John Doe">Hello, world!</p>

<script>
  // Get the data from the <data> tag
  const userName = document.querySelector('p').dataset.userName;

  // Log the data to the console
  console.log(userName); // John Doe
</script>

This code will log the user's name to the console.