El atributo “X” no es serializable como XML 1.0.

Cuando el Validador HTML del W3C informa que un atributo “no es serializable como XML 1.0”, significa que el nombre del atributo contiene caracteres que están fuera del rango permitido definido por la especificación XML 1.0. Los documentos HTML5 pueden serializarse como HTML o XML (XHTML), y el validador verifica que tu marcado sea compatible con ambos formatos de serialización. Los nombres de atributos en XML 1.0 deben comenzar con una letra o guión bajo y solo pueden contener letras, dígitos, guiones, guiones bajos, puntos y ciertos caracteres Unicode — no pueden incluir caracteres como {, }, @, $, u otros símbolos comúnmente encontrados en lenguajes de plantillas.

Este problema aparece con mayor frecuencia cuando un motor de plantillas del lado del servidor o cliente (como Mustache, Handlebars, Angular, Jinja2 o Blade) falla en procesar completamente sus expresiones antes de que el HTML llegue al navegador. En lugar de que el marcador de posición de la plantilla sea reemplazado con un valor apropiado, la sintaxis de plantilla cruda termina en el HTML como un atributo malformado. Por ejemplo, {{class}} podría aparecer como un nombre de atributo en lugar de resolverse a su valor previsto.

Por qué esto importa

• Cumplimiento de estándares: El HTML que no es serializable como XML 1.0 no puede convertirse de manera confiable a XHTML, lo que limita la interoperabilidad.
• Inconsistencia del navegador: Los navegadores pueden manejar nombres de atributos inválidos de manera impredecible, potencialmente ignorando el atributo por completo o malinterpretando el marcado circundante.
• Accesibilidad: Los atributos malformados pueden romper atributos ARIA u otro marcado relacionado con accesibilidad, haciendo el contenido inaccesible para tecnologías asistivas.
• Herramientas y análisis: Las herramientas basadas en XML, feeds RSS y sistemas de sindicación de contenido que consumen tu HTML fallarán con atributos que violan las reglas de nomenclatura XML.

Cómo solucionarlo

1. Verifica expresiones de plantilla sin resolver. Inspecciona el HTML renderizado (no tus plantillas fuente) en busca de marcadores de posición restantes como {{...}}, <%= ... %>, @{...}, o patrones similares.
2. Asegúrate del renderizado adecuado del lado del servidor. Verifica que tu motor de plantillas esté procesando correctamente todas las expresiones antes de enviar el HTML al cliente.
3. Elimina caracteres inválidos de los nombres de atributos. Si estás usando atributos personalizados, adhiérete a atributos data-* válidos con nombres que consistan solo de letras minúsculas, dígitos y guiones (después del prefijo data-).
4. Verifica errores tipográficos. Un signo = faltante, comilla o espacio puede causar que un valor se interprete como un nombre de atributo.

Ejemplos

Marcador de posición de plantilla sin resolver en un atributo

Esto ocurre cuando una expresión de plantilla no se procesa y aparece literalmente en la salida:

<!-- ❌ Malo: sintaxis de plantilla renderizada como nombre de atributo -->

<div {{classBinding}} id="main">
  <p>¡Hola, mundo!</p>
</div>

La solución es asegurar que el motor de plantillas resuelva la expresión. La salida renderizada debería verse así:

<!-- ✅ Bueno: atributo resuelto correctamente -->

<div class="container" id="main">
  <p>¡Hola, mundo!</p>
</div>

Error tipográfico causando que un valor se analice como nombre de atributo

Un signo igual o comilla faltante puede causar que parte de un valor se convierta en un nombre de atributo con caracteres inválidos:

<!-- ❌ Malo: signo = faltante causa que "bold}" se trate como un atributo -->

<p style"font-weight:bold}" class="intro">Bienvenido</p>

<!-- ✅ Bueno: sintaxis de atributo correcta -->

<p style="font-weight:bold" class="intro">Bienvenido</p>

Caracteres especiales en nombres de atributos personalizados

Usar caracteres inválidos directamente en nombres de atributos activará este error:

<!-- ❌ Malo: @ y $ no son válidos en nombres de atributos -->

<input @change="update" $value="test">

Si necesitas atributos personalizados, usa el patrón estándar data-*:

<!-- ✅ Bueno: atributos data válidos -->

<input data-change="update" data-value="test">

Enlaces estilo Angular en HTML estático

Los frameworks como Angular usan sintaxis de atributo especial (por ejemplo, [property] o (event)) que solo es válida dentro del contexto del framework y fallará la validación si se renderiza directamente:

<!-- ❌ Malo: sintaxis específica del framework en HTML crudo -->

<img [src]="imageUrl" (load)="onLoad()">

Si estás generando HTML estático, usa atributos estándar en su lugar:

<!-- ✅ Bueno: atributo HTML estándar -->

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

Encuentra problemas como este automáticamente

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

Iniciar prueba gratuita Ver precios