DuplicadosEsto es lo que dice la especificación de HTML5 respecto a los identificadores de elementos HTML en una página (traduzco):

El valor (del ID) debe ser único entre todos los IDs en el sub-árbol raíz del elemento, y debe contener al menos una letra. El valor no puede contener espacio alguno.

El quid de la cuestión aquí es ¿qué es eso de "sub-árbol raíz"?. Bueno, pues yendo de nuevo a la especificación lo que dice es:

El sub-árbol raíz de un nodo es el sub-árbol cuya raíz es el nodo raíz del elemento. Cuando un nodo está en un documento, su sub-árbol raíz es el árbol de ese documento.

Esto parece un trabalenguas y, para ser sinceros, no lo deja nada claro. Pero si sigues leyendo, acabas por llegar a lo importante, que en lo que nos ocupa viene siendo que en una página web hecha con HTML el sub-árbol raíz de cualquier elemento dentro de la página es el documento.

Es decir, en la práctica todo esto lo que quiere decir es que para cualquier elemento de una página web HTML su identificador debe ser único dentro de la página.

Sin embargo, la realidad es que luego vemos por ahí elementos con el mismo atributo id dentro de una misma página, es decir, con identificadores repetidos.

Propósito y comportamiento de los identificadores de elementos

Los identificadores de los elementos HTML están pensados para identificar zonas diferentes dentro de una página con alguno de estos tres propósitos:

  1. Enlazar de manera directa a zonas internas concretas de la página con enlaces de tipo <a href="#Identificador"...>.
  2. Poder acceder mediante script de manera rápida a elementos individuales concretos dentro de una página.
  3. Aplicar estilos CSS concretos a ciertos elementos individuales con la máxima especificidad posible por el uso de reglas CSS (esto es, dejando aparte el uso de estilos en línea).

Si usamos un mismo identificador varias veces ¿qué ocurre con cada una de estos propósitos?.

Bueno, es muy fácil probarlo en una página de ejemplo, pero te resumo aquí lo que ocurre en la práctica a día de hoy en todos los navegadores:

  1. Los enlaces solamente irán al primero de los elementos que tengan el mismo identificador. Por primero me refiero, claro, al primero que encontremos en el árbol del DOM.
  2. El uso de la función JavaScript getElementById solamente devolverá, nuevamente, el primero de los elementos que tenga el identificador que le pasemos.
  3. Las reglas CSS de tipo #identificador se aplicarán a todos los elementos que tengan ese identificador. Aquí si se aprecia una diferencia.

Es decir, en la práctica parece que no hay demasiado problema en utilizar varias veces el mismo identificador en la página, o al menos no saltará todo por lo aires.

La tolerancia de los navegadores: un arma de doble filo

Una cosa es lo que dice el estándar y otra muy diferente es lo que hace la gente en la realidad. Por eso los navegadores suelen ser muy tolerantes a todo tipo de fallos en la forma en la que está construido el código de una página: etiquetas sin cerrar, elementos anidados dentro de otros que no están permitidos (un form dentro de un table, por ejemplo) o, como en el caso que nos ocupa, elementos con un mismo identificador utilizado varias veces.

Si de hoy para mañana los principales navegadores decidieran ponerse en plan estricto con el código de las páginas, dejarían de funcionar más de la mitad de las páginas que hay en la Web. Y quizá me quede corto.

Es por eso que muchas veces hacemos cosas incorrectas en el código HTML, CSS o JavaScript de una página, pero funcionan igual y ni siquiera nos damos cuenta.

Esto es bueno porque podemos desarrollar más rápido y con menos problemas, pero es malo a largo plazo porque pueden aparecer errores complicados de encontrar y depurar y desde luego no fomenta las buenas prácticas.

En el caso concreto de los identificadores duplicados, en cada caso de uso lo que nos puede ocurrir es:

  1. Que nos dejen de funcionar enlaces y no nos enteremos nunca. Los usuarios quizá no nos digan nada nunca o tardemos meses en enterarnos.
  2. Que en algunas páginas nos volvamos locos para encontrar porqué un determinado código JavaScript está funcionando para una parte de la página, pero falla para otras (podemos tardar horas en darnos cuenta de que hay un identificador duplicado y que ahí reside el problema).
  3. Los CSS nos funcionarán bien pero conceptualmente los estamos utilizando mal. Los elementos CSS apropiados para dar estilo mediante nombre a varios elementos son las clases, no los identificadores. El propósito de las clases es dar el mismo estilo a los elementos que conceptualmente son iguales en la página. El propósito de los identificadores en CSS es aplicar estilo a un elemento concreto dentro de la página. Además, este comportamiento sí que sería fácil que cambiase en cualquier actualización y entonces tendríamos un problema gordo.

En resumen

El problema de utilizar identificadores duplicados es más conceptual que práctico ahora mismo. Sin embargo esto podría cambiar de un día para otro si un navegador popular como Chrome, de repente, decide ser más estricto con esto por algún motivo o cambia el comportamiento por defecto de alguno de los caso anterior (por ejemplo, que getElementById en vez del primer elemento devuelva el último o que las reglas CSS solo se apliquen al primer elemento). En este caso tendríamos un grave problema.

Por eso debemos ser cuidadosos y utilizar apropiadamente los identificadores y sobre todo tratar de que no se usen nunca más de una vez en la misma página. En cualquier caso eso es lo que marca el estándar y es cómo deberíamos utilizarlo.

¡Espero que te sea útil!

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA