views:

179

answers:

5

Hi,

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

+5  A: 

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
What if the user's browser doesn't handle HTLM 5 doctype ? Doesn't it enable IE's quirk mode ?
Clement Herreman
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
A: 

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
Geez, danspants you're reading my mind !
Clement Herreman
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. :(
burak ozdogan
I wondered whose that was!
danspants
@burak ozdogan - but that's where proper documentation comes in :)
danspants
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
+1  A: 

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
I like the Hungarian notaion naming idea. I think it can be helpful for the Css guys in the team not be confused.
burak ozdogan
+6  A: 

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
Does the HTML validates successfully if I refer to a class which even does not exist?
burak ozdogan
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
+1  A: 

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"&gt;
  <!-- 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 ;)

sfussenegger