Geek Answers Handbook

Use the same id for multiple HTML tags?

Possible duplicate:
Multiple elements with the same identifier responding to the same CSS identifier selector

Below is an example of the code that I tested and I got confused. Everyone says that we can use or use only once for each identifier, but I have testers that use it several times, but it gives me the correct result.

What should I do?

In this example, it works like a class for me

the code:

<html> <head> <style> #exampleID1 { background-color: blue; } #exampleID2 { text-transform: uppercase; } </style> </head> <body> <p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p> <p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.</p> <address id="exampleID1"> Written by W3Schools.com<br /> <a href="mailto:us@example.org">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address> <blockquote id="exampleID1"> Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation. </blockquote> </body> </html>

Please review the code above and tell me why we should not use the id selector twice on the page while it is working fine.

+8
html css css-selectors
source share
5 answers

The identifier must be unique on the page. Use a class if you want to describe a group of elements.

why shouldn't we use the id selector twice on the page while it is working fine.

You make a mistake and depending on each browser that has ever viewed the page to compensate for this. You cannot be sure that they will all be.

+16
source share

I think an easier way to understand is to make an analogy with the product. Imagine that an ID works like a serial number, in other words, it must be unique, so you can identify a product with a million equal copies.

Then, imagine that class as a Product Code can be a barcode, for example. In the supermarket, all the same products have the same barcode that is read by the optical reader.

Thus, the ID is a unique identifier, and the class groups a group of elements.

But if I use the same ID in my HTML / CSS, I get a great result, why should I worry about unique s ID ?

Reason number 1:

In the future, if you need to use Javascript, and if you need to manipulate a specific element and it has a duplicate ID , your code will not generate the expected result.

Reason number 2

Your code will not be rated by W3C, which means you may have headaches with the compatibility of your website compared to browsers. It can work fine in one browser, but not in another.

Using a real-life example, imagine that you want to dynamically update, using Javascript, the text of this element:

 <blockquote id="exampleID1"> Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation. </blockquote>

With Javascript / JQuery you will use code like this:

 $("#exampleID1").html("Changing element content");

And then the text of the <blockquote id="exampleID1"> element will be updated, but this element will also be updated because it has the same ID .

 <p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>

So, if you want to update only one item, they must have a unique ID s.

Hope you can use this explanation to better understand the difference between an ID and a class .

+5
source share

It works, but this does not mean that identifiers should be used (in accordance with HTML specifications). The identifier must refer to only one object. The description of several objects should be performed using the class, not id.

+2
source share

You must use unique identifiers to ensure that HTML is valid.

The rationale for this is that identifiers are used to identify unique elements.

The page will still display despite being invalid, but the biggest practical problem is that JavaScript and other libraries are optimized to work under the assumption that the identifiers are unique, so if you try to extract all elements with an identifier and hide them e.g. using jQuery

 $('#exampleID1').hide();

Only the first element will be hidden, since only one element must be returned for the selection by identifier, and as soon as one element is found, the query closes to return one element. Without knowing this, you may get some strange behavior and it is difficult to diagnose defects.

0
source share

why shouldn't we use the id selector twice on the page while it is working fine

Because you do not know if it works in any browser.

The specs indicate that the identifier must be unique on the page, so when browsers find your duplicate id: s, they will try to handle it as best as possible. Most browsers seem to handle this by using the identifier only for the first element, but leaving the id attribute on the elements so that your CSS still works, but there is no guarantee that all browsers will handle it that way.

Different browser providers use different tactics to handle incorrect markup, and each provider finds a “new, better” way, so incorrect markup is usually handled in as many ways as possible.

0
source share

More articles:


All Articles