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

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.

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.

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.

i realize that this is a fairly old topic, but i just ran across something that may be pertinent.

where i work, we use a home-grown cms (huge, high-traffic site). a div that has normally been defined within one of the cms content blocks unfortunately needed to be hard-coded into the jsp page that serves that block. the reason was that the block itself needed to be divided into two, for ease of updating only one portion of its contents. we needed to use the same div id to keep from breaking the page. that then left us with lots and lots of pages with two instances of that id, until we can go through and remove the div from the cms blocks.

the horrible part: one instance was now the ancestor of the other, and with styles being applied to both, the page broke.

on my first attempt at I added $('#theId').attr('id', ''); to remove the id, and found that jQuery did so only from the first instance, which is an ancestor of the second. even though it stopped with the first, there was no js error.

keeping this in mind, until we can clean out the cms,

$('#theId').addClass('notThisOne');

$('.notThisOne #theId').attr('id', '');`

will keep pages from breaking, whether new (no div#theId) or old (including div#theId) content is in the cms block.

• 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....

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
}