HTML Tutorial
The <data>
tag is used to store arbitrary data associated with an element. This data can be accessed by JavaScript.
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>
The <data>
tag has no attributes. However, the value of the data-
attribute can be any string.
Here are some examples of how you can use the <data>
tag:
<p data-user-name="John Doe">Hello, world!</p>
<p data-current-date="2023-03-08">Today is March 8, 2023.</p>
<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.