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.
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.
I've been seeing these attributes around on more modern websites like GitHub and such, and they always seemed to coincide with a customized popover like the title attribute.
Option 1
Option 2
Option 3
Option 4
I read some documents about data- attributes on HTML5 Doctor, and I'm not quite sure of the point.
Is there some SEO or accessibility benefit to using them? And what is the plugin(hopefully jQuery) commonly being used to create the popovers in this specific case?
Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).
This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
From : Ejohn.org 'Not sure about the external link policy, just putting it in here in case someone wants to know'
HTML5 data-* attribute is used for storing data in element
For manipulating with this attribute you can use jQuery.data() or .data() methods.
The main point is that data- attributes will not clash with attributes that may added to HTML later or with browser-specific attributes. The idea is to give an author a playground, a name space where he can use attributes for private purposes without fear of having them ever interpreted as standard or vendor-defined attributes in some different meaning.
According to this idea, search engines and assistive software ignore such attributes, as they have no interoperable meaning.
I've been seeing these attributes around on more modern websites like GitHub and such, and they always seemed to coincide with a customized popover like the title attribute.
Option 1
Option 2
Option 3
Option 4
I read some documents about data- attributes on HTML5 Doctor, and I'm not quite sure of the point.
Is there some SEO or accessibility benefit to using them? And what is the plugin(hopefully jQuery) commonly being used to create the popovers in this specific case?
Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).
This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
From : Ejohn.org 'Not sure about the external link policy, just putting it in here in case someone wants to know'
HTML5 data-* attribute is used for storing data in element
For manipulating with this attribute you can use jQuery.data() or .data() methods.
The main point is that data- attributes will not clash with attributes that may added to HTML later or with browser-specific attributes. The idea is to give an author a playground, a name space where he can use attributes for private purposes without fear of having them ever interpreted as standard or vendor-defined attributes in some different meaning.
According to this idea, search engines and assistive software ignore such attributes, as they have no interoperable meaning.
I have noticed that the "rel" attribute is not used at all by browsers, does this make it an ideal place to store additional information for javascript (eg a delete ajax request could read the id from rel)
I'm assuming you are looking for a way to store custom data you can use in javascript. I that case:
Storing custom data can be done using data- attributes (see here).
Link 5
Alternatively/additionally you could use jQuery Metadata
I have noticed that the "rel" attribute is not used at all by browsers
You noticed wrong. Browsers do make use of it (e.g. some browsers have a keyboard shortcut to go to the next page and can use the rel attribute to determine that that is). Search engines also make use of it (e.g. nofollow).
does this make it an ideal place to store additional information for javascript
No. Attributes have specified purposes. Don't assume that they aren't going to be used for that.
The problem you'll have is that search engines do make use of the rel attribute. While SEO is not my focus, we often have SEO firms telling us to stick a rel in here and a rel in there... usually rel="nofollow" to prevent giving weight to certain external links.
You could just create your own custom attributes but make sure that you name it currently as to not conflict with other js libraries that you may use.