18

Sometimes I add an attribute to some of my controls. Like:

<a href id="myLlink" isClimber="True">Chris Sharma</a>

I know it is not a valid html. But it helps me in some cases.

Is this considered as a bad practice? A friend of mine says that it is ok for Intranet environment but on internet it might not be find friendly by search engines.

If it is not a good practice, what are the best practicess?

Thanks

Maroun
  • 94,125
  • 30
  • 188
  • 241
pencilCake
  • 51,323
  • 85
  • 226
  • 363

6 Answers6

23

If you are using HTML5 doctype then you can add data attrbutes which are valid.

So something like the following will be valid

<a href id="myLlink" data-isClimber="True">Chris Sharma</a>
rahul
  • 184,426
  • 49
  • 232
  • 263
  • What if the user's browser doesn't handle HTLM 5 doctype ? Doesn't it enable IE's quirk mode ? – Clement Herreman Apr 30 '10 at 12:34
  • 3
    The HTML5 doctype works just fine in older browsers like IE6, just not the elements. More information about using HTML5 "now": http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now/ – akamike Apr 30 '10 at 12:42
9

Yes. It is considered a bad practice. Your HTML (if it's 4.0) won't validate successfully. Instead, add a class like so:

<a href id="myLlink" class="climber" >...</a>

Remember that you can have multiple classes:

<a href id="myLlink" class="climber girl pretty" >...</a>

And you can use CSS or JQuery to select out stuff based on these classes, and selectively override style based on the combinations:

a.climber             { color: brown; }
a.climber.girl        { color: red; }
a.climber.girl.pretty { color: pink; }
Dave Markle
  • 95,573
  • 20
  • 147
  • 170
  • 1
    Does the HTML validates successfully if I refer to a class which even does not exist? – pencilCake Apr 30 '10 at 12:39
  • 1
    Yes, that's the beauty of it. The classes don't have to exist in your CSS in order for the HTML to be valid. So the cool thing is this... you can tag your elements with classes so that you can do functions on the elements with JQuery. Visual Studio may give you the "red squiggle" under your class name as you type, but it's a "false positive" -- it's totally kosher. – Dave Markle Apr 30 '10 at 13:07
  • 1
    what if the extra attrs are numbers `
    Chris Sharma
    `     – zidarsk8 Sep 14 '12 at 12:08
  • 1
    @zidarsk8: In cases like this, HTML defines the data-XXX attribute -- you could use `
    `, but instead of that, I would recommend using multiple classes and only one data element, since it's inadvisable to style based on data elements (and it makes for a longer tag) : `
    ` (then again, if you really want a button, why not just do ``?
     – Dave Markle Sep 14 '12 at 12:46
  • Thanks @DaveMarkle and yeah that button was just a lame example to get my point across. And thanks for the `data-` hint, that's what I was searching for. – zidarsk8 Sep 15 '12 at 08:30
3

It is not a best nor a good practice.

I guess you need it for some javascript treatment. I usually solve the problem by adding custom "class" attribute, prefixed with 'js'.

Another solution is to use the store data/retrieve data functionnality of JQuery, or the equivalent of any other framework, which imply echoing all over your generated HTML.

Clement Herreman
  • 10,274
  • 4
  • 35
  • 57
  • 1
    I like the Hungarian notaion naming idea. I think it can be helpful for the Css guys in the team not be confused. – pencilCake Apr 30 '10 at 12:35
  • wonderful answer + wonderful comment. Personally I beleive a lot in naming conventions and this method provides readability + hassle free with any doctype or browser – Oliver M Grech Oct 12 '13 at 11:44
2

It's invalid XHTML which is a bad thing - mainly because you can't show off with valid XHTML ;) Every mainstream browser and search engine will ignore extra attributes happily though. You could add an extra namespace though to make your XHTML valid again. 

<html xmlns:my="http://example.com">
  <!-- SNIP -->
  <a href id="myLlink" my:isClimber="True">Chris Sharma</a>
  <!-- SNIP -->
</html>

That's perfectly valid XHTML. However, W3C Validator will still refuse to validate it (I think). It's a shortcoming of their XML parser. For such non namespace aware parsers, my:isClimber will still be treated as would be isClimber. But you can now rest easy as you know that it is valid XML and finally that's what counts, isn't it ;)

Community
  • 1
  • 1
sfussenegger
  • 35,575
  • 15
  • 95
  • 119
0

Using jquery,

to store: $('#element_id').data('extra_tag', 'extra_info');

to retrieve: $('#element_id').data('extra_tag');

This was also posted @ [http://stackoverflow.com/a/16985773/2458978][1]

[1]: How to store arbitrary data for some HTML tags

user2458978
  • 259
  • 3
  • 5
-2

I don't believe it's bad practice as such, it's certainly very convenient and is exactly what you would do in an xml environment. More important is the nature of the information you hold in those custom attributes and how they are used within your code.

A nicer alternative would be to hold the data in different way for example the data() functionality of jQuery.

danspants
  • 3,099
  • 3
  • 27
  • 33
  • But then if someone reads the markup of the page, he won't have any clue regarding to such a data until he checks the javascript code. :( – pencilCake Apr 30 '10 at 12:34
  • @burak ozdogan - but that's where proper documentation comes in :) – danspants Apr 30 '10 at 12:37
  • 2
    It is bad practice as it is not future-proof. If you added an attribute of "foo" to your element and the HTML spec defined a new attribute of "foo" that was intended to be used completely differently from your implementation then problems are likely to occur. The new HTML5 data-* attributes exist to address this issue as they are to be ignored by the browser/machines. – akamike Apr 30 '10 at 12:49