Validación HTML: El atributo "X" no está permitido en el elemento "Y" en este punto.

Acerca de este problema HTML

Cada elemento HTML tiene un conjunto definido de atributos que acepta. La especificación HTML mantiene reglas estrictas sobre qué atributos pertenecen a qué elementos. Por ejemplo, el atributo href es válido en un elemento <a> pero no en un <div>. El atributo for pertenece a los elementos <label> y <output> pero no en <span>. Cuando colocas un atributo en un elemento que no lo reconoce, el validador marca el error.

Este problema importa por varias razones. Primero, los navegadores pueden ignorar silenciosamente atributos no reconocidos, lo que significa que tu código podría parecer funcionar pero en realidad no está haciendo nada — llevando a errores difíciles de diagnosticar. Segundo, las tecnologías de asistencia como los lectores de pantalla dependen de HTML válido para interpretar correctamente la estructura y comportamiento de la página. Los atributos inválidos pueden confundir estas herramientas y degradar la accesibilidad. Tercero, el HTML que cumple con los estándares garantiza un comportamiento consistente en todos los navegadores y hace que tu código esté preparado para el futuro.

Hay varias causas comunes de este error:

Errores tipográficos o de ortografía — Escribir hieght en lugar de height, o scr en lugar de src.
Atributos en el elemento incorrecto — Usar placeholder en un <div> en lugar de un <input> o <textarea>.
Atributos obsoletos — Usar atributos de presentación como align, bgcolor, o border que han sido removidos de la especificación HTML en favor de CSS.
Atributos específicos de frameworks — Usar atributos como ng-click (Angular), v-if (Vue), o @click (atajo de Vue) que no son parte del HTML estándar. Estos frameworks típicamente los procesan antes de que el navegador los vea, pero el HTML sin procesar no validará.
Atributos personalizados sin el prefijo data-* — Inventar tus propios atributos como tooltip o status sin seguir la convención data-*.
Atributos ARIA con errores tipográficos — Escribir aria-role en lugar del correcto role, o aria-labelled en lugar de aria-labelledby.

Ejemplos

Atributo usado en el elemento incorrecto

El atributo placeholder solo es válido en elementos <input> y <textarea>:

<!-- ❌ "placeholder" no permitido en "div" -->

<div placeholder="Ingresa texto aquí">Contenido</div>

<!-- ✅ Usar placeholder en un elemento compatible -->

<input type="text" placeholder="Ingresa texto aquí">

Atributo de presentación obsoleto

El atributo align ha sido removido de la mayoría de elementos en HTML5. Usa CSS en su lugar:

<!-- ❌ "align" no permitido en "div" -->

<div align="center">Contenido centrado</div>

<!-- ✅ Usar CSS para la presentación -->

<div style="text-align: center;">Contenido centrado</div>

Atributo personalizado sin el prefijo `data-*`

Si necesitas almacenar datos personalizados en un elemento, usa el formato de atributo data-*:

<!-- ❌ "tooltip" no permitido en "span" -->

<span tooltip="Más información">Pasa el cursor aquí</span>

<!-- ✅ Usar un atributo data-* para datos personalizados -->

<span data-tooltip="Más información">Pasa el cursor aquí</span>

Los atributos data-* están específicamente diseñados para incrustar datos personalizados. Puedes acceder a ellos en JavaScript a través de la propiedad dataset, por ejemplo, element.dataset.tooltip.

Atributo mal escrito

Un simple error tipográfico puede desencadenar este error:

<!-- ❌ "widht" no permitido en "img" -->

<img src="photo.jpg" widht="300" alt="Una foto">

<!-- ✅ Corregir la ortografía -->

<img src="photo.jpg" width="300" alt="Una foto">

Error tipográfico en atributo ARIA

Los atributos ARIA deben coincidir con sus nombres exactos de especificación:

<!-- ❌ "aria-labelled" no permitido en "input" -->

<input type="text" aria-labelled="name-label">

<!-- ✅ Usar el nombre correcto del atributo ARIA -->

<input type="text" aria-labelledby="name-label">

Atributos específicos de frameworks

Si estás usando un framework de JavaScript y quieres que tus plantillas fuente validen, ten en cuenta que la sintaxis específica del framework no pasará la validación. En Vue, por ejemplo, puedes usar el equivalente data-* o aceptar que las plantillas son preprocesadas:

<!-- ❌ "v-if" no permitido en "div" -->

<div v-if="isVisible">Hola</div>

<!-- Esto es esperado con plantillas de Vue y típicamente no es una preocupación,
     ya que el framework los procesa antes de que lleguen al navegador. -->

Cuando encuentres este error, consulta la referencia de MDN Web Docs para el elemento en cuestión para ver qué atributos realmente soporta. Esto aclarará rápidamente si necesitas corregir un error tipográfico, mover el atributo a un elemento diferente, reemplazarlo con CSS, o convertirlo a un atributo data-*.