JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

El problema de los IDs duplicados en HTML

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!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (6) -

Colombia Mauricio Montoya Medrano

Muy buen aporte, muchas gracias

Responder

Pedro Lasa

Deseo hacerle una pregunta de lego...
Las extensiones al uso para encontrar duplicados en Chrome, no me funcionan (pues tengo infinidad de duplicados) ¿ Existe la posibilidad, de utilizar un soft (desconozco si lo hay) que pueda detectarlos en un listado de htlm? Pues en mi ignorancia, se me ocurre ese ¿posible? atajo, pues borraría, los enlaces del navegador y los supliría con el listado "saneado"...
En todo caso le agradezco la atención y gracias por su interesante "Blog".
Un saludo.

Responder

by Jose M. Alarcon

Hola:

¿A qué duplicados se refiere? Si se trata de IDs duplicados, que es de lo que habla este blog, es muy fácil localizaros usando cualqujier funcionalidad de buscar de cualquier editor. Si se refiere a otra cosa... dependerá de a lo que se refiera.

Saludos.

Responder

Pedro Lasa

Disculpe, a los Bookmarks, Links o Favoritos(Enlaces) Disculpe mi olvido y despiste al formular mi pregunta en el Blog o articulo equivocado. Gracias de todos modos.

Responder

Buenos días, muy buen aporte.
Una pregunta ,tengo varias web con bastantes páginas cada una de ellas, en una página en concreto he detectado con el chrome que tengo ids duplicados. Sabrías decirme si hay alguna forma de poder chequear todas las páginas que forman la web para comprobar que no haya más duplicados, sin tener que pasar por cada una de ellas.
Saludos

Responder

by Jose M. Alarcon

Buff, pues la verdad es que ni idea, lo siento...

Responder

Agregar comentario