CODEWITHSUNDEEP
html
tejas_spy007
tejas_spy007

Reputation: 448

What is the difference between data element and data attribute in HTML

I came across data element recently and dint quite understand the purpose. I suppose even data attribute can be used to fetch and retrieve data in machine readable format.

Data Element: 

<p>New Products</p>
<ul>
 <li><data value="3967381398">Mini Ketchup</data></li>
 <li><data value="3967381399">Jumbo Ketchup</data></li>
 <li><data value="3967381400">Mega Jumbo Ketchup</data></li>
</ul>

Data attribute: 

<p>New Products</p>
<ul>
 <li data-value="3967381398">Mini Ketchup</li>
 <li data-value="3967381399">Jumbo Ketchup</li>
 <li data-value="3967381400">Mega Jumbo Ketchup</li>
</ul>

When should I use data element and when should i go for data attibute?

Upvotes: 4

Views: 2434

Answers (2)

Šime Vidas
Šime Vidas

Reputation: 186073

Yes, but sometimes the value can appear inside other text, so if you wanted to use a data-* attribute on the value, you’d have to wrap it in a <span> or similar element. The <data> element is useful in these situations.

Upvotes: 1

Thermatix
Thermatix

Reputation: 2929

According to this link : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data

It's away to associate a data value with a human readable equivalent Like a book name and it's ISBN.

Upvotes: 1

Related Questions