Sobre este problema HTML
Tanto <meta charset="UTF-8"> como <meta http-equiv="content-type" content="text/html; charset=UTF-8"> instruem o navegador sobre qual codificação de caracteres usar ao interpretar os bytes do documento em texto. Ter ambas as declarações no mesmo documento cria uma situação redundante e potencialmente conflituosa. A especificação HTML proíbe explicitamente incluir ambas, porque se alguma vez especificassem codificações diferentes, o navegador teria de decidir em qual confiar, levando a comportamentos imprevisíveis.
A codificação de caracteres é crítica para exibir texto corretamente. Se a codificação estiver errada ou ambígua, caracteres como letras acentuadas, emoji ou símbolos de scripts não latinos podem aparecer como texto distorcido (frequentemente chamado “mojibake”). Ao exigir uma única declaração não ambígua, a especificação garante que os navegadores podem determinar a codificação de forma confiável.
A sintaxe <meta charset="UTF-8"> foi introduzida com HTML5 como uma alternativa mais curta e limpa à abordagem mais antiga <meta http-equiv="content-type">. Ambas são válidas por si só, mas a melhor prática moderna favorece fortemente <meta charset="UTF-8"> pela sua simplicidade. Qualquer que escolha, deve aparecer o mais cedo possível dentro do elemento <head> — idealmente como o primeiro filho — e deve aparecer dentro dos primeiros 1024 bytes do documento para que o navegador possa detetar a codificação antes de analisar o resto do conteúdo.
Para corrigir este problema, procure no <head> do seu documento por ambas as formas da declaração e remova uma delas. Na maioria dos casos, deve manter <meta charset="UTF-8"> e remover o elemento <meta http-equiv="content-type">.
Exemplos
Incorreto: ambas as declarações presentes
Isto desencadeia o erro de validação porque ambos os métodos de declarar a codificação de caracteres são usados simultaneamente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Correto: usar <meta charset> (recomendado)
Esta é a abordagem moderna e preferida para documentos HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Correto: usar <meta http-equiv="content-type">
Esta sintaxe mais antiga também é válida por si só. Pode encontrá-la em bases de código legadas ou ao servir documentos como application/xhtml+xml.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Cenário comum: declarações divididas por includes
Em sistemas de templates ou plataformas CMS, as duas declarações às vezes acabam em ficheiros parciais diferentes — por exemplo, uma num layout base e outra injetada por um plugin ou tema. Se encontrar este erro inesperadamente, verifique todos os ficheiros que contribuem para a sua secção <head>, não apenas o template principal.
<!-- base-layout.html -->
<head>
<meta charset="UTF-8">
<!-- ...outras tags... -->
</head>
<!-- plugin-head-snippet.html (remover este duplicado) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Audite os seus includes e parciais para garantir que apenas uma declaração de codificação de caracteres acaba no <head> renderizado final.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.