Skip to main content
Validación HTML

El atributo “name” en el elemento “img” está obsoleto. Usa el atributo “id” en su lugar.

Acerca de este problema HTML

El atributo name se usaba históricamente en elementos img para referenciar imágenes a través de la colección document.images de JavaScript o mediante document.getElementsByName(). En los primeros HTML, name servía como identificador para varios elementos antes de que el atributo id fuera ampliamente adoptado. El estándar HTML actual (WHATWG) ahora marca name como obsoleto en elementos img, lo que significa que ya no debería usarse en contenido nuevo.

Esto importa por varias razones:

  • Cumplimiento de estándares: Usar atributos obsoletos significa que tu HTML no se ajusta a la especificación actual, lo que puede causar errores de validación y podría llevar a comportamientos inesperados en futuras versiones del navegador.
  • Consistencia: El atributo id es el mecanismo universal para identificar únicamente cualquier elemento HTML. Usar id en lugar de name mantiene tu marcado consistente y predecible.
  • Direccionamiento con JavaScript y CSS: Las APIs modernas como document.getElementById() y document.querySelector() funcionan con id, no con name en elementos de imagen. Los selectores CSS también dirigen elementos por id (ej., #myImage), haciendo que id sea la opción más versátil.
  • Enlaces de fragmento: El atributo id te permite enlazar directamente a un elemento usando un fragmento de URL (ej., page.html#myImage), mientras que el atributo obsoleto name en img no sirve para este propósito.

Para arreglar este problema, simplemente reemplaza name con id en tus elementos img. Ten en cuenta que los valores id deben ser únicos dentro de todo el documento — dos elementos no pueden compartir el mismo id. Si tienes código JavaScript que referencia la imagen por nombre (ej., document.images["myImage"] o document.getElementsByName("myImage")), actualiza esas referencias para usar document.getElementById("myImage") o document.querySelector("#myImage") en su lugar.

Ejemplos

Incorrecto: usando el atributo obsoleto name

<img src="photo.jpg" name="heroImage" alt="A sunset over the ocean">

Esto desencadena el error de validación porque name ya no es un atributo válido en img.

Correcto: usando el atributo id

<img src="photo.jpg" id="heroImage" alt="A sunset over the ocean">

El atributo name se reemplaza con id, y el elemento ahora puede ser dirigido con document.getElementById("heroImage") o el selector CSS #heroImage.

Actualizando referencias de JavaScript

Si tu código existente referencia la imagen por name, actualízalo en consecuencia.

Antes (dependiendo de name):

<img src="logo.png" name="siteLogo" alt="Company logo">
<script>
  var logo = document.images["siteLogo"];
  logo.style.border = "2px solid blue";
</script>

Después (usando id):

<img src="logo.png" id="siteLogo" alt="Company logo">
<script>
  var logo = document.getElementById("siteLogo");
  logo.style.border = "2px solid blue";
</script>

Múltiples imágenes que previamente compartían un name

Ya que los valores id deben ser únicos, no puedes dar el mismo id a múltiples elementos. Si previamente usaste el mismo name en varias imágenes y las seleccionaste como grupo, cambia a una class compartida en su lugar:

<img src="slide1.jpg" class="gallery-image" alt="Mountain landscape">
<img src="slide2.jpg" class="gallery-image" alt="Forest trail">
<img src="slide3.jpg" class="gallery-image" alt="River valley">
<script>
  var images = document.querySelectorAll(".gallery-image");
  images.forEach(function(img) {
    img.style.borderRadius = "8px";
  });
</script>

Este enfoque cumple con los estándares y te da selección de elementos flexible y moderna usando class para grupos e id para elementos únicos.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.