Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts

Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?

I am a big fan of the proposed HTML 5 solution (data- prefixed attributes). Edit: I'd add that there are probably better examples for the use of custom attributes. For instance, data that a custom application will use that have no analogue in standard attributes (eg. customization for event handlers based on something that can't necessarily be expressed in a className or id).

Is it considered bad practice to use non-standard HTML attributes?

In HTML 5 you can do this with the data-* attribute:

<a id="myDiv" data-stackoverflowId="123">...</a>

---

Since you are using jQuery, you may also want to check the jQuery Metadata Plugin. It will allow you to store and parse JSON metadata in the class attribute, and your markup will still validate.

You would be able to insert your metadata like this:

<a class="your_class {stackoverflowId: '123'}">...</a>

And extract it as follows:

var data = $selectofA.metadata();

Generating/selecting non-standard HTML tags with jQuery, a good idea?

There's really no reason to do something like this. The better way is to use classes like

<p class = "my_class">

And then do something like

$('p.my_class').html('bah');

Edit:

The main reason that it's bad to use fake tags is because it makes your HTML invalid and could screw up the rendering of your page on certain browsers since they don't know how to treat the tag you've created (though most would treat it as some kind of DIV).

That's the main reason this isn't good, it just breaks standards and leads to confusing code that is difficult to maintain because you have to explain what your custom tags are for.

If you were really determined to use custom tags, you could make your web page a valid XML file and then use XSLT to transform the XML into valid HTML. But in this case, I'd just stick with classes.

What are non standard attributes use for?

jsaction attribute is added by Google's jsaction library.
It's source code can be found on project's GitHub page: https://github.com/google/jsaction

I have no idea about the other attributes though.

How to add non-standard attributes in a valid way

Using those attribute will produce an invalid document.

Adding those attributes later using Javascript will produce an invalid document (even if the W3C validator is unable to tell you so).

But W3C has never been against using proprietary extensions. Validation should not be a requirement. It is a way to tell you when you do not conform to the spec. W3C will not send the FBI just for an invalid page.

If you are relying on proprietary extensions to give your visitor a better experience (but not rely on it) then you are on the good path :-) Just pray (or contribute) for those to be in the next spec.

---

Now if it is about preventing browser context menu or selection, that's just rude! Don't do it!

Is it OK to add your own attributes to HTML elements?

There has been much discussion about this:

• Custom attributes - Yay or nay?
• How to store arbitrary data for some HTML tags
• Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?

At the end of the day, I am on the camp that believes data attributes are the best way to go. They are being introducted in HTML5 to avoid name conflicts. Essentially, if you want to store anything data related you just prepend "data-" on the attribute name:

<div class="user" data-userid="5"></div>

The only con to the whole thing is then that your XHTML won't validate, but I honestly don't care about that stuff. (That's right, I said it)

what happens when we include wrong attributes in html tags?

You can technically have any sort of attribute you want, and it will be accessible throughout html, css, and javascript.

Example:

<h1 id="heading" my-attribute="foo" another="bar">My Heading</h1>

CSS

h1[my-attribute=foo]{
   background:red;
}

Javascript

console.log(document.getElementById('heading').getAttribute('my-attribute');//logs "foo"

This technically works too:

<mytag>Something awesome.</mytag>

However, there is a reason we have a standards model (W3C). Do we want developers relearning all the tags they are going to be using in a project? Or figure out how to access certain attributes of those tags? It can get out of control quite quickly.

How to do custom attributes

With HTML5, now it's considered standard practice to use data- to create custom defined attributes:

<h1 data-alt="my alternate data">This is totally standard compliant</h1>

These are 100% valid, standard compliant custom attributes, you can read about them in depth at MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

This allows for us to tag custom data and be sure that new browsers won't come along and stomp all over us with handling our attributes in odd ways (as Katana314 said in their more concise answer).

What are the concrete risks of using custom HTML attributes?

There are no browser limitations/risks. Only the w3 validator will bark, but barking dogs doesn't bite.

The w3 spec says the following:

• If a user agent encounters an attribute it does not recognize, it
  should ignore the entire attribute
  specification (i.e., the attribute and
  its value).

IE will also not render in quirks mode or so as some may think. It will only do that on invalid/forced doctypes, not on invalid attributes.

However, keep in mind that some Javascript libraries/frameworks will "invisibly" add/use custom HTML attributes in the DOM tree, such as several jQuery plugins do. This way you may risk collisions in attributes because it "by a coincidence" uses an attribute with the same name as you do for your own purposes. Sadly this is often poorly or even not documented at all.

Is there any possible negative repercussions of using made up attributes in html tags

Browsers will almost universally handle custom attributes. And when I say universally, I mean even IE6.

Of course the standard way to do that is with:

<a data-lol="haha" href=""></a>

Which, since you've tagged with jQuery, I'll mention can be read (even in IE6) with

$("a").data("lol");

---

Related Topics