What kind of CSS attributes are these?

Question

What are these types of attributes called?

data-role=
data-theme=
data-position=
data-display=

Those specific attributes are coming out of Phonegap but I've seen these in other web frameworks. Are these custom or part of CSS3?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

From the Mozilla Developer Network:

HTML5 is designed with extensibility for data that should be in the HTML, but not visible. data-* attributes allow us to store extra information on standard, semantic HTML elements without polluting the class name.

The syntax is easy. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that:

<article
  id="electriccars"
  data-columns="3"
  data-indexnumber="12314"
  data-parent="cars">
...
</article>

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 19 '14 at 19:27

John Conde

217,595
99
455
496

Thanks. As long as you start with "data-" this attribute will be valid but only in HTML5? – 4thSpace Jun 19 '14 at 19:41
Valid? Yes. But you'll see it elsewhere for sure. – John Conde Jun 19 '14 at 19:48
What do you mean by that? – 4thSpace Jun 19 '14 at 19:49
You can use it in HTML4. It wouldn't be valid but it would work. – John Conde Jun 19 '14 at 19:50
Interesting. Thanks again. – 4thSpace Jun 19 '14 at 19:55

What kind of CSS attributes are these?

1 Answers1