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.
Related
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 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/
I know that data- Attributes is part of HTML 5. It seems to be a good choice to use it to serialize some data in markup. So there are people using data-bind="xxx" . But can I just use bind="xxx". It seems violate schema, of specification, but practically it works in all browser. So my question is, what is the practical reason (not in theory) like performance that I should not use customs attribute just like bind="xxx". I know bind attribute is not reserved attribute.
Thanks
Practically, some browser can implement bind with a totally different meaning.
You're using it for Knockout, but hypothetically the new meaning is different. When you change the inline CSS on one element, it should change it on another element based on a selector in the bind attribute.
There's a reason to respect standards and use private (e.g. data-) or vendor-specific prefixes.
I know this question is old but I had the same question as Fred. I found the answer and I wanted to share it. There is no practical reason not to use an arbitrary attribute name other than what was mentioned in another answer. That is a vendor or browser maker may decide to use the name for something else.
It is however not allowed in the spec, kind-of, while the spec does read that arbitrary attribute names should not be used, there is nothing preventing their use. This is like the US Code for Displaying a flag, it's a set of rules but no way to enforce it.
Contrast this to a rule that is enforced such as a single body tag within an html document, etc. and you can realize that there is nothing enforcing using arbitrary names for attributes.
So what remains is why should you not use arbitrary attribute names? Since it will not pass the W3 html validator, it can be argued that societal pressure may increase to the point that your code will not be acceptable. For example, SEO may suffer, a future employer may not like sloppy code, etc.
I certainly became embarrassed as I make liberal use of arbitrary attribute names to pass data. Something that I will stop immediately. I am now convinced that using the data-* attribute will make my code easier to read, easier to maintain and clean enough for peer review.
I am trying to link to a specific paragraph in a website that has added a "uri" attribute to each of their paragraphs. ie.:
<p uri="/level1/leve2/pagename.p5">
Any way to do that?
(To clarify, this is not a site that I have any control over or can change beyond suggesting that they change, just wondering if there is a way to link to the way they currently do it.)
No. It is a non-standard attribute, browsers do nothing with it.
If you want to link to an element, then you should give it an id and specify:
http://example.com/example.html#theElementId
You could, in theory, add some JavaScript to the page that would search through all the elements in the page for ones with a uri attribute and convert them to id attributes, but having a real HTML document in the first place would be better.
If you have no control over the page then, short of writing a browser plugin and making everyone use it, you cannot achieve this.
Using jQuery you could do something like pull the attribute value from URI
$('p[uri]').attr('uri');
jsfiddle.net example here:
http://www.jsfiddle.net/vNtTs/
You could use custom data attributes, as such:
<p id="myId" data-uri="...">
If you have more than one <p> then it's best to give it a unique id. You can use jQuery to reference the attribute as such:
$("#myId").data("uri")
And that would be perfectly legitimate and most browsers support custom data attributes.
I've been using rel to store some non-html information, what other attributes are not commonly used that I can utilize to store information?
You might want to switch to HTML5 and use custom data attributes.
In HTML5 you can define your own data- attributes to store whatever you want.
You can make up your own attributes if you wish. It is probably not a good idea to put data into an attribute if by specification it should have something meaningful in there.
In the HTML 5 spec, you can use data-* attributes; they're guaranteed not to do anything with the browser and they'll work in older browsers, too.
In JavaScript, you can access it with the normal attribute properties:
var value = elem.getAttribute("data-foo")
elem.setAttribute("data-foo", "value")
elem.removeAttribute("data-foo")
With new browsers you can use elem.dataset, but you probably don't want to do that as older browsers won't support it.
var value = elem.dataset.foo;
elem.dataset.foo = "value";
elem.dataset.foo = null;
This help? Scroll down to the rel section:
http://diveintohtml5.ep.io/semantics.html
HTML5 now supports storing information in data-* attributes but thats HTML5 and everyone isn't there yet. So a real world scenario...
If you don't have to worry about persisting across post backs you could map simple data objects as a JSON collection var and pull an object out of it based on a particular key. But that is a broad approach - more information on the overall goal would improve the feedback.
Depends on what kind of information you're looking to store and how are you planning on accessing it. I successfully used both the id and the class attributes to store and access database IDs for example, and even references for some database tables, which I then retrieved with jQuery to do some AJAX requests.
If you are NOT using HTML5, I would advise against using your own custom attributes. Otherwise, like people already suggested before me, have a look at the data- prefixed attributes.
data-* is the way to go if you can use HTML5. You can easily access them in javascript too with elem.data.*
Otherwise, custom attributes are probably better than screwing up the semantics of the page.