Is it ever acceptable to have multiple IDs in a html page?

Question

There's quite a few questions on Stack Overflow about id vs class but these questions are nearly always in relation to CSS - and the generally accepted answer is to use classes to style a particular set of elements, and ids for specific instances. Makes sense, fair enough.

I'm finding however that as I do more and more Javascript/jQuery/ajax, that approach is starting to become less clear cut and I'm finding situations where semantically elements should be given ids, but because there could be multiple instances I'm supposed to use classes.

Here's an example of what I mean:

Take a look at the toolbar on Stack Overflow's markdown question editor - each button has an ID to uniquely identify it. Makes perfect sense - it's one button that performs a specific function and there's probably script hooked to it based on that id.

Now imagine that I'm building a rich web app and there's a page that has two tabs each with a markdown editor on it. Does this mean that the toolbar buttons should now be using classes to identify them?

This just seems wrong.

Another example: I'm working on a photo gallery site that has a little toolbar overlaid on each photo. Convention says that because there's multiple instances of these buttons I should use classes. Really?

So my questions are....

• If I commit the crime of duplicate IDs on a page, which browsers will actually break?
• For browsers where this does break, is it just the CSS styling that will break, or will jQuery selectors also break.
• Is it really so bad to use duplicate ids in cases like those described.

Answer 1

• If I commit the crime of duplicate IDs on a page, which browsers will actually break? HTML validators complain because id attributes are supposed to be unique, but the big three browser engines let me get away with it.

• For browsers where this does break, is it just the css styling that will break, or will jQuery selectors also break. jquery selector dont or may not work as expected. as it defined to select unique

• Is it really so bad to use duplicate ids in cases like those described. by every standard , its not good practice so trying avoid as much you can will make much sense to browser,jquery....

Answer 2

If you have two buttons, you should have two different IDs to identify them. You can use classes to style them, but there is nothing preventing you from using one Javascript function for two buttons:

$("#idOne").click(function(){
    myClickHandler(this);
});

$("#idTwo").click(function(){
    myClickHandler(this);
});

var myClickHandler = function(element){
    // element is the DOM Element of the Button that was clicked
    // Turn it into a jQuery Object: $(element)
};

Of course, your button usually interacts with a TextArea of some sorts, and the two textareas should have different IDs. Because then you can just do this:

$("#idOne").click(function(){
    myClickHandler(this,"idOfTextArea1");
});

$("#idTwo").click(function(){
    myClickHandler(this,"idOfTextArea2");
});

var myClickHandler = function(element, textAreaId){
    var ta = $("#"+textAreaId);
    // Do something with the textarea
}

Answer 3

Classes mean is a ... (indefinite) IDs mean is the ... (definitive)

"This div is a photo-toolbar. There can be more like it." Makes sense, I would use a class.

I wouldn't necessarily ID toolbar buttons, unless I was sure that there can only be one instance of that toolbar on the page. In the case with StackOverflow's markdown editor, I also think these should be classes for more flexibility (the whole editor can be wrapped in a unique ID, like #answer-editor, or #comment-editor) instead.

Browsers are quite flexible in what they accept, but that doesn't mean the standards should be broken.

Answer 4

Don't do it.

It's not that browsers will break, it's scripts that will break. jQuery, anything using .getElementById, etc.

At some point someone else may need to work on the app, and I expect they will be intensely infuriated by the duplicate ids.