I have come across the following tag, and am really curious as to what the dynamic attribute means. Google is not being very helpful, as it returns most results for dynamic attributes and dynamically adding attributes, not for this attribute itself.
So, what effect does the dynamic attribute have on span, and possibly other, elements?
There is no "dynamic" attribute according to the standard. However, it has always been possible to add arbitrary attributes to elements for various reasons and I guess this is one of those cases. HTML5 defines a standard way to add "dynamic" and/or "custom made" attributes to elements, that's by prefixing the attribute with "data-". If you do that, you can have your own "data" attributes but still validate your document according to the HTML5 standard.
Related
I've recently found on one of the sites opening tag like this:
<script data-ip="93.1xx.3.2x" data-backuri="something.com">
And I couldn't find any information about it. What are those tags used for?
data-* attributes are custom HTML attributes.
Basically, there are standard HTML attributes like style, src, width, height, class... and these have a special meaning to browsers and are 'reserved'.
However, custom attributes have no special meaning generally and are only special to the owner's application. They can be used to simplify an application's logic.
Using data- before your attribute name ensures that future standard attributes will not use your current attribute. For example, imagine today you are using a sound attribute but then the HTML standard adds a sound attribute meaning something other than what you meant. Had you used data-sound, you would have been fine because there would be no conflict. The specification says no future standard browser attributes will start with data-.
See jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity for some useful info on why we use data-* attributes.
Also, see MDN docs for some useful information.
There are very clear rules for how custom elements should be named. The main difference to other HTML elements is that they must have a non-leading hyphen. While it's possible to load an HTML document that includes made-up tag names that don't stick to these rules, it's supposed to guarantee a certain level of future-proofing and platform support.
However, I'm looking for guidance on how to name attributes for my custom elements. For readability and convenience I would prefer to use short, descriptive attribute names, e.g. not using a data- prefix for everything, but I also want to be sure things won't break as new features are added to HTML5. My research so far has not given any clear answers, and suggests that in practice, it's a bit of a wild west.
For example, the W3 HTML5 validator seems to accept made-up attribute names that follow basic conventions like using only a-z and hyphens, but only when they're used on custom elements. It complains about things like using special characters or repeating the same attribute, so that suggests that it's not simply giving up validation completely on a custom element, but actually considers arbitrary attribute names to be valid in that context.
Google's developer resources as a page Custom Element Best Practices, but as far as I can tell it does not answer this question. However, their examples seem to stick to using existing attribute names like checked and disabled. Examples from Google's web component-focused javascript library Lit seem to make use of arbitrary attribute names, however.
My question boils down to:
What, if any, is the official word in the spec on how to name custom attributes for custom elements?
If there's no official word, what is considered to be best practices? How can anyone using custom elements be sure that their attributes will not trigger unexpected functionality in future browsers?
The specification defines the attributes accepted on a custom element as:
Global attributes, except the is attribute
form, for form-associated custom elements — Associates the element with a form element
disabled, for form-associated custom elements — Whether the form control is disabled
readonly, for form-associated custom elements — Affects willValidate, plus any behavior added by the custom element author
name, for form-associated custom elements — Name of the element to use for form submission and in the form.elements API
Any other attribute that has no namespace (see prose).
And then says
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).
Customized built-in elements follow the normal requirements for
attributes, based on the elements they extend. To add custom
attribute-based behavior, use data-* attributes.
The HTML5 spec define how to set custom attributes using data-* prefix,
like:
<div data-attr="somedata"></div>
But what would be the difference if we write just:
<div attr="somedata"></div>
And I actually prefer the second way since it's shorter.
I can access both attributes using the getAttribute() method.
So is that wrong not using data-* prefix? I tested it only on chrome and IE11, so maybe there are other browsers to worry about?
HTML5 defines the data-* attributes as valid, while other custom attributes are not. So what?
If you run your code through an HTML validator it will look for invalid attributes. Among other things, they could indicate a typo. An HTML5 validator will accept data-* attributes but it isn’t psychic. It has no way of judging which other new attributes are part of the plan.
If you create a new attribute, it may not play nicely with future changes in HTML which may coincidentally use the same attribute name for a different purpose. The data-* attributes are exempt from future implementation.
A corollary of the above is that including additional libraries which also make arbitrary changes may interfere with your own code.
JavaScript cooperates with the data-* attributes by automatically collecting them in a dataset property for each element. If you make up another attribute it won’t be included.
If none of the above points are important to you, then, by all means, use whatever attribute names you like. As regards the last point above, you can always access your own arbitrary attributes using JavaScript’s *Attribute functions which will work just well on any attribute, regardless of its validity.
Speaking of JavaScript, there is no concept of HTML validity for JavaScript, and you can use JavaScript to assign any attribute names you like without fear of the HTML validator police knocking at your door. However, you still run the risk of competing with additional libraries or future implementations.
I have been searching for information about the attributes data-title and data-original-title. My issue is that Twitter Bootstrap converts the title-attribute into a data-original-title and I am not sure that this is what I want. What about screen readers for instance? Do they treat the data-title as a title, or do they ignore it? If I use one of those data-attributes, do I have to add a title-attribute as well?
The custom data-* attributes are defined for HTML5. They are "intended to store custom data private to the page or application".
The spec says:
These attributes are not intended for use by software that is independent of the site that uses the attributes.
So other tools (like screen readers) should not make use of them.
If something is a title, you should not use a data-* attribute (like data-title) in the first place, as the spec says "[…] for which there are no more appropriate attributes or elements"; use title.
I am seeing some attribute I have never seen before in a div tag. I haven't touch html for a while but googling the attribute didn't return much useful info.
<div dataquery="#item_1306" comp="box.components.Flashplayer" id="box_Flashplayer_2" propertyquery="#box_Flashplaye_2" class="box_Flashplaye_style2"...
My question is, do you know what are these "dataquery" "comp" and "propertyquery" attributes?
Thanks alot folks.
HTML is often enhanced with custom attributes these days, and HTML5 explicitly allows for that. Normally these attributes should be prefixed with "data-", but obviously this is not the case here.
The meaning depends most probably on a script included in the page.
For example, in twitter bootstrap it is common to see attributes like <body data-spy='scroll'> which is than interpreted by a script and allows for monitoring the amount a user scrolls.
When including Facebook like buttons you may have attributes like data-style which controls whether a box, or a button, or hwatever is used.
You can add you own attributes to elements. I don't think theese atributes are standard attributes lika class and name but an attribute that the programmer has added self for some purpose.
Those are not W3C attributes, they have used to perform some task, may be to the lagulage it used and may performance some special tags, But its not best practice because it gives HTML validation errors, better thing is use data-xxxx tag for extra attributes.
More readings.
http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
http://ejohn.org/blog/html-5-data-attributes/
http://html5doctor.com/html5-custom-data-attributes/