This question already has an answer here:
what are data-* HTML attributes?
(1 answer)
Closed 9 months ago.
<!DOCTYE html>
<html lang="ae-ar">
<head data-info="f:msnallexpuser,muiflt13cf">
I am not understand the function of data info above
data-* attribute in HTML stores custom values. This stored data can be retrieved in JavaScript. In your case, data-info is the attribute name and its value is f:msnallexpuser,muiflt13cf. Value can be retrieved using getAttribute function in JavaScript.
"HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM." - MDN
You could use el.getAttribute('data-whatever') to get the data attribute in JavaScript however a better way to get the HTML data attribute is to use el.dataset.whatever, whatever being what-ever you want.
You can also get data attributes in CSS as well using the content: attr(data-whatever) or the selector: [data-whatever='value'] or [data-whatever]
I think the below code which I copied from W3Schools HTML data-* Attribute tutorial will help you to understand it easily.
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
<h1>Species</h1>
<p>Click on a species to see what type it is:</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
If you want the definition and usage, for it, I also have copied and pasted it for you.
The data-* attribute is used to store custom data private to the page
or application.
The data-* attribute gives us the ability to embed custom data
attributes on all HTML elements.
The stored (custom) data can then be used in the page's JavaScript to
create a more engaging user experience (without any Ajax calls or
server-side database queries).
The data-* attribute consist of two parts:
The attribute name should not contain any uppercase letters, and must
be at least one character long after the prefix "data-" The attribute
value can be any string Note: Custom attributes prefixed with "data-"
will be completely ignored by the user agent.
The data-* attribute is a Global Attribute, and can be used on any
HTML element.
Thanks and best regards!
Related
I know that custom tags need to have a "-". And I kwnow that custom attributes need the "data-" prefix. But what about custom attribute on a custom tag?
If I define a custom HTML tag/element, such as <x-sososlik></x-sososlik>.
And I need some custom attributes on it. For example: hair-color.
Does that attribute need the data-* prefix?
<x-sososlik hair-color="green"></x-sososlik>
-or-
<x-sososlik data-hair-color="green"></x-sosolik>
The question is more about "what is the CORRECT way", because it works with both.
I'm asking because I cannot find that information.
I need to know it because I'm trying to shorten the attribute names on existing project, in the real code there a lot of them.
No, you don't need to use the data- prefix on an autonomous custom element (as opposed to a customized built-in element). As specified in the WHATWG HTML standard:
Any namespace-less attribute that is relevant to the element's functioning, as determined by the element's author, may be specified on an autonomous custom element, so long as the attribute name is XML-compatible and contains no ASCII upper alphas. The exception is the is attribute, which must not be specified on an autonomous custom element (and which will have no effect if it is).
I have seen this code from the tutorial that I'm studying. I searched for the purpose of the p attribute inside the li tag but found no answer. What is the purpose of that p attribute inside the li tag?
$msgs .= "<li p=\"$no_of_paginations\" class=\"inactive\">Last</li>";
The purpose cannot be inferred from the code snippet. As such, the attribute, being not defined in any HTML specification or draft or browser-specific extension, has no effect beyond being stored as data into the p element node in the document tree.
Such an attribute, though invalid by the specs, can be used like any other attribute in styling (e.g. attribute selector .p) in CSS or in scripting. In this case, it is probable, but by no means certain, that the attribute is meant to be used in scripting to carry a number as its value, with that number inserted with some server-side code, so that this value can be accessed in client-side scripting, as relating to a specific element.
The recommended way is to use data-* attributes instead, such as data-p, to avoid any risk of clashing with attribute names that might be introduced in some future HTML version.
The default HTML(whichever version) namespace doesn't have a purpose for "p" inside a li tag. If there's another namespace declared then that's where it's from. Other than that, it's not valid by w3 standards.
It should be a custom attribute to use in JavaScript codes to get something.
That is just a custom tag used in some javascript functions
My question is simple
How many custom attributes we can use in a element e.g
<input value="1" vcFlag="true" name="example" />
I am using vcFlag="true" as custom attribute how many attributes like this I can put in this input element. Is there any limit or not.
thanks
There is no (theoric) limit to the number of attributes you can add to a HTML tag:
Every HTML element may have any number of custom data attributes specified, with any value.
Attribute parsing is slower than node parsing so if you use a huge number of custom attributes you may slow down page parsing, specially on some old browsers.
Just rmember to prefix them with data- to be HTML 5 compatible: Data Attributes on W3C Working Draft.
In your case it should be:
<input value="1" data-vcFlag="true" name="example" />
There is no limit for custom attributes.
Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements, these new custom data attributes consist of two parts:
Attribute Name :
The data attribute name must be at least one character long and must be prefixed with 'data-' and should not contain any uppercase letters.
Attribute Value :
The attribute value can be any string.
HTH
I have a list of items in an html table. On each row (tr) I'm proceeding like this:
<tr idAffaire="#suite.IdAffaire" idSuite="#suite.IdSuite" class="#suite.Username row droppable">
I used the attributes idAffaire and idSuite for retrieving some infos later. I know the official identification attribute is "id" but in my case I need 2 id. When I compile my code, VS is warning me about some things:
this name contains uppercase characters, which is not allowed.
attribute 'idaffaire' is not a valid attribute of element 'tr'
...
Is it possible to prevent these warnings? Is there a better way of doing?
Thank you.
Yes, in Tools > Options > Text Editor > HTML > Validation > [Untick] Show errors
Ideally, you could use 2 hidden input fields with the id="suite" and value="whatever" to allow you to pick these up in a valid way.
The problem is that you are writing invalid HTML. As you mentioned, id is a valid attribute but idAffaire or idSuite are not. I'm assuming from the fact that you get a warning about uppercase characters, you are using an XHTML doctype. A better way to do this would be to use an HTML5 doctype:
<!DOCTYPE html>
And use custom data attributes for your new attributes:
<tr data-affaire="#suite.IdAffaire" data-suite="#suite.IdSuite" class="#suite.Username row droppable">
I believe you should add name space extension of yours. Then define your newly introduced attributes.
What you are doing is termed as adding custom attributes to html elements, which have a very varying opinion among the experts.
Firstly , using capital in html attributes is not recommended, you can switch to small case.
Secondly , adding custom attributes in XHTML (which i suppose you are using) throws warning, where as this is perfectly valid in HTML5.
there are few option to deal with it -
use Jquery .data() api to store data with java script.
or
follow a specific convention while storing data making it easy to maintain and read.You can follow HTML5 syntax
<ul>
<li data-id='5' data-name='john'></li>
</ul>
Like a tag that I can use to store some necessary info? But really isn’t required or used by the HTML? Works like the tag attribute for objects on Visual Basic?
Up until HTML5 no. With HTML 5 there is provision for this with the data-* attribute.
For example:-
<div id="myStuff" data-mydata="here is my data">
In current technology there is no "official" away to do this. However all browsers allow you to add any arbitary attribute to a HTML element so in HTML4 you can do this:-
<div id="myStuff" data-mydata="here is my data">
Which as you can see is identical but not offically sactioned and if you want strict XHMTL compliance will be considered "broken".
You can access the attribute just as you would any other:-
var mydata = document.getElementById("myStuff").getAttribute("data-mydata");
You could perhaps use the html5 data-* attributes? It'll fail validation on html4, but it is still probably the best option...
If you're storing data to use in javascript, you can also use something like jQuery's Metadata plugin. Basically, you can store data within the element's class="" attribute, like so:
<div id="aaa" class="class1 class2 class3 { type: 'food', color: 'green' }"></div>
Then in javascript:
alert($('#aaa').metadata().color) // "green"
Other kits use the title or rel attributes to store data. While this is more validation friendly, it may or may not be better than using AnthonyWJones' answer of just using non-standard attributes. It'll "break" validation, but then again according to Dojo, custom attributes are perfectly valid HTML, even if they don't validate against a DTD.
So no - there isn't a single well accepted specific attribute where you can dump all data. All existing attributes are for specific uses. But you can either 1) create your own attributes, or 2) coopt an existing tag to reuse for your purposes. Just wanted to point out the alternative.
Have a look at www.htmlref.com or W3C for the used attributes.
Other than those you can just add your own, they will render and they will be accessible via code for instance in C# you can access a controls attribute collection.
Control.Attributes["MyCustomAttribute"] = "Hello World";
there’s rel and rev attributes, which work in elements with an href-attribute. they have a semantic meaning, but are often abused as an attribute to store additional information