¿El ID debe ser único en toda la página?

Estoy usando jQuery y me pregunto si el ID siempre debe ser único en toda la página. La clase, lo sé, se puede repetir tantas veces como quiera, ¿qué pasa con la identificación?

Sí, debe ser único.

HTML4:

http://www.w3.org/TR/html4/struct/global.html

Sección 7.5.2:

id = nombre [CS] Este atributo asigna un nombre a un elemento. Este nombre debe ser único en un documento.

HTML5:

http://www.w3.org/TR/html5/dom.html#the-id-attribute

El atributo id especifica el identificador único (ID) de su elemento. El valor debe ser único entre todos los ID en el subárbol de inicio del elemento y debe contener al menos un carácter. El valor no debe contener ningún espacio de caracteres.

de mdn enter image description here https://developer.mozilla.org/en/DOM/element.id

así que supongo que será mejor …

Los navegadores solían ser indulgentes con esto (hace muchos años cuando css era joven) y permiten que la identificación se use más de una vez. Se han vuelto más estrictos.

Sin embargo, las identificaciones de sí deben ser únicas y solo se deben usar una vez.

Si necesita usar el formato css más de una vez, use CLASS.

Sí, los ID son únicos. La clase no es

Los ID siempre deben ser únicos.

Todos tienen un número de identificación único (por ejemplo, el número de la Seguridad Social), y hay muchas personas en una clase social

Ese es básicamente el objective de una identificación. 🙂 Los ID son específicos, solo se pueden usar una vez por página. Las clases se pueden utilizar como contento.

Con Javascript, solo puede hacer referencia a un elemento usando ID. document.getElementById y jQuery $ selector devolverá solo el primer elemento que coincida. Por lo tanto, no tiene sentido usar la misma ID en múltiples elementos.

Enero de 2018, aquí está el HTML de Youtube, puede ver id = “button” id = “info” están duplicados.

enter image description here

Técnicamente, según las normas de HTML5, la identificación debe ser única en la página: https://developer.mozilla.org/en/DOM/element.id

Pero he trabajado en sitios web extremadamente modulares, donde esto se ignora por completo y funciona. Y tiene sentido, la parte más sorprendente.

Lo llamamos “componentes”

Por ejemplo, puede tener un componente en su página, que es algún tipo de widget. Tiene cosas dentro con sus propios ID únicos, por ejemplo, “ok-button”

Una vez que hay muchos de estos widgets en la página, técnicamente tiene HTML no válido. Pero tiene mucho sentido componer sus widgets para que cada uno, internamente, haga referencia a su propio botón de $widgetRoot.find("#ok-button") por ejemplo, si utiliza jquery para buscar desde su propia raíz, podría ser: $widgetRoot.find("#ok-button")

Esto funciona para nosotros, pensamos técnicamente que las identificaciones no deberían usarse en absoluto, una vez que no son únicas.

Como se encuentra arriba, incluso YouTube lo hace, así que no es tan renegado

Hay excelentes respuestas para la misma pregunta en https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really .

Un tidbit no mencionado anteriormente es que si hay varios id idénticos uno en la misma página (lo que sucede, aunque viola el estándar):

Si tiene que solucionar esto (eso es triste), puede usar $("*#foo") que convencerá a jQuery de usar getElementsByTagName y devolver una lista de todos los elementos coincidentes.