O atributo “X” não é serializável como XML 1.0.

Quando o Validador HTML W3C reporta que um atributo “não é serializável como XML 1.0”, significa que o nome do atributo contém caracteres que estão fora do intervalo permitido definido pela especificação XML 1.0. Os documentos HTML5 podem ser serializados como HTML ou XML (XHTML), e o validador verifica que a sua marcação é compatível com ambos os formatos de serialização. Os nomes de atributos em XML 1.0 devem começar com uma letra ou underscore e podem conter apenas letras, dígitos, hífenes, underscores, pontos e certos caracteres Unicode — não podem incluir caracteres como {, }, @, $ ou outros símbolos comummente encontrados em linguagens de templates.

Esta questão aparece mais frequentemente quando um motor de templates do lado do servidor ou cliente (como Mustache, Handlebars, Angular, Jinja2 ou Blade) falha ao processar completamente as suas expressões antes de o HTML chegar ao navegador. Em vez do marcador de posição do template ser substituído por um valor adequado, a sintaxe bruta do template acaba no HTML como um atributo mal formado. Por exemplo, {{class}} pode aparecer como um nome de atributo em vez de ser resolvido para o seu valor pretendido.

Porque é importante

• Conformidade com padrões: HTML que não é serializável como XML 1.0 não pode ser convertido de forma fiável para XHTML, o que limita a interoperabilidade.
• Inconsistência do navegador: Os navegadores podem lidar com nomes de atributos inválidos de forma imprevisível, potencialmente ignorando o atributo completamente ou interpretando mal a marcação circundante.
• Acessibilidade: Atributos mal formados podem quebrar atributos ARIA ou outra marcação relacionada com acessibilidade, tornando o conteúdo inacessível para tecnologias assistivas.
• Ferramentas e parsing: Ferramentas baseadas em XML, feeds RSS e sistemas de sindicação de conteúdo que consomem o seu HTML irão falhar com atributos que violam as regras de nomenclatura XML.

Como corrigir

1. Verifique expressões de template não resolvidas. Inspecione o HTML renderizado (não os seus templates fonte) para marcadores de posição restantes como {{...}}, <%= ... %>, @{...} ou padrões similares.
2. Certifique-se de uma renderização adequada do lado do servidor. Garanta que o seu motor de templates está a processar corretamente todas as expressões antes de o HTML ser enviado para o cliente.
3. Remova caracteres inválidos dos nomes dos atributos. Se está a usar atributos personalizados, mantenha-se nos atributos data-* válidos com nomes que consistem apenas em letras minúsculas, dígitos e hífenes (após o prefixo data-).
4. Verifique erros tipográficos. Um sinal = em falta, aspas ou espaço pode causar que um valor seja interpretado como um nome de atributo.

Exemplos

Marcador de posição de template não resolvido num atributo

Isto ocorre quando uma expressão de template não é processada e aparece literalmente na saída:

<!-- ❌ Mau: sintaxe de template renderizada como nome de atributo -->

<div {{classBinding}} id="main">
  <p>Olá, mundo!</p>
</div>

A correção é garantir que o motor de templates resolve a expressão. A saída renderizada deve parecer-se com isto:

<!-- ✅ Bom: atributo devidamente resolvido -->

<div class="container" id="main">
  <p>Olá, mundo!</p>
</div>

Erro tipográfico causando que um valor seja analisado como nome de atributo

Um sinal de igual ou aspas em falta pode causar que parte de um valor se torne um nome de atributo com caracteres inválidos:

<!-- ❌ Mau: sinal = em falta causa que "bold}" seja tratado como atributo -->

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

<!-- ✅ Bom: sintaxe de atributo adequada -->

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

Caracteres especiais em nomes de atributos personalizados

Usar caracteres inválidos diretamente em nomes de atributos irá desencadear este erro:

<!-- ❌ Mau: @ e $ não são válidos em nomes de atributos -->

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

Se precisar de atributos personalizados, use o padrão data-* padrão:

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

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

Vinculações estilo Angular em HTML estático

Frameworks como Angular usam sintaxe de atributo especial (ex: [property] ou (event)) que é apenas válida dentro do contexto do framework e irá falhar na validação se renderizada diretamente:

<!-- ❌ Mau: sintaxe específica do framework em HTML bruto -->

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

Se está a gerar HTML estático, use atributos padrão em vez disso:

<!-- ✅ Bom: atributo HTML padrão -->

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

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços