{"id":34124,"date":"2023-03-02T03:03:10","date_gmt":"2023-03-01T21:33:10","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-why-should-not-be-id-repeated-duplicate\/"},"modified":"2023-03-02T03:03:10","modified_gmt":"2023-03-01T21:33:10","slug":"solved-why-should-not-be-id-repeated-duplicate","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-why-should-not-be-id-repeated-duplicate\/","title":{"rendered":"[Solved] Why should not be id repeated? [duplicate]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Like others before me have said, you are using the id<\/code> tag which is a unique identifier. Whereas you should use a class<\/code> to apply styles across multiple elements.<\/p>\n

See what the W3C defines an id<\/code> as: (http:\/\/www.w3.org\/TR\/html401\/struct\/global.html#h-7.5.2<\/a>)<\/p>\n

\n

Element identifiers: the id and class attributes<\/p>\n

Attribute definitions<\/p>\n

id<\/strong> = name [CS] This attribute assigns a name to an element. This name
\n must be unique in a document. <\/p>\n

class<\/strong> = cdata-list [CS] This attribute
\n assigns a class name or set of class names to an element. Any number
\n of elements may be assigned the same class name or names. Multiple
\n class names must be separated by white space characters.<\/p>\n<\/blockquote>\n

What’s more interesting is that you stated that your example works, and it does in most browsers<\/strong>. This doesn’t make it valid or even good HTML\/CSS it is just that some browsers pick up on developer’s shortcomings<\/strong> and will render non-standards compliant code as if it were standards compliant.<\/p>\n

Here is an example that can never work. As you may know id<\/code> tags can be used for named anchors. E.g.<\/p>\n

<a href=\"#content\">Jump to content<\/a>\n<div id=\"content\">\n  some content\n<\/div>\n<div id=\"content\">\n  some other content\n<\/div>\n<\/code><\/pre>\n
In this example, which element should the named anchor link to? In most cases I would assume it would go to the first element. However this may not be what the developer wanted.<\/p>\n
The id<\/code> element has more uses than just applying styles to elements, the W3C goes on to state:<\/p>\n
\n
The id attribute has several roles in HTML:<\/p>\n