When I used HTML4 and its "ancestors", so to speak, I used to declare non-existent attributes that in a syntactic way presented no error, but in a semantic way yes.
W3C realized that there were many cases in which these statements left html polluted and so created the data-whatever.
Example:
If you were to define an input, usually its behavior, by default it would only have a value.
Now, if you had a menu, and you need to define multiple behaviors, you could declare them like this:
data-toggle="true"
data-width="500"
data-height="200"
data-resize="true"
Another cool thing, and that the developers used to use input type='hidden'
to save values so that no one could access them, today you could already put them in the same input by inserting the data-valor
, these two cases are used in various frameworks and plugins, what they bring in themselves and more semantics and reliability in a matter of no conflict with existing attributes.
Compatibility Can I Use data-
An example could be found in dropboxes, where in a menu, in the Dropbox li would put (data-target #menu) (if I’m not mistaken) where the menu would be the id of the list of sub-items, so by clicking on the Dropbox it would open the list with id menu.. An example of this can be found in the Sb-admin and Sb-admin 2 templates in startbootstrap.com . I did not put it as an answer because it is rather incomplete, and I cannot draw up an answer now.
– Leonardo
@lvcs understood about the use in the element li, but what about the html element? Can you imagine a situation or identify a real use case in the html element?
– Ingrid Farabulini
Press CTRL+U on this page and look at the source code, there are some examples.
– Renan Gomes
@This Stackoverflow page has no data-* attribute in its html element, unfortunately. Can you, even if it contains no examples, imagine a situation where data-* can be of great or small use in the html element?
– Ingrid Farabulini
Maybe I didn’t understand what your question is then. The element in which your question is placed has an attribute
data-questionid="118395"
, Only the OS personnel can answer. Kicking (too far maybe) this value can be used to point out what the question ID is when someone gives a upvote or downvote.– Renan Gomes
Would you have any reason to not use?
– bfavaretto
@Renan think it will help, when I spoke html element was saying "use data-* as an attribute of the html tag", understood young?
– Ingrid Farabulini
@bfavaretto can’t say. First we need to know a real reason to use... thank you!
– Ingrid Farabulini
For example, if the current page presents a news, why not put the news id as
data-noticia-id
in the root element, or in the body? If it is a metadata that relates to the most general entity that that html document represents, it makes sense to root it.– bfavaretto
Playing devil’s advocate, I’d say a good reason to not use is that the tag
html
will be parsed before the goalcharset
, so that if the browser tries to open it without knowing beforehand its encoding (for example, if the file is read from the local file system) it may have problems with Unicote characters within that attribute. For that reason, I would use thebody
to save "global" attributes to the page, not thehtml
. Now, something very "goal" that would even apply tohead
, maybe I had to go tohtml
even with restrictions on content.– mgibsonbr