Validación HTML: Un documento no debe incluir tanto un elemento "meta" con un atributo "http-equiv" cuyo valor sea "content-type", como un elemento "meta" con un atributo "charset".

Acerca de este problema HTML

Tanto <meta charset="UTF-8"> como <meta http-equiv="content-type" content="text/html; charset=UTF-8"> instruyen al navegador sobre qué codificación de caracteres usar al interpretar los bytes del documento como texto. Tener ambas declaraciones en el mismo documento crea una situación redundante y potencialmente conflictiva. La especificación HTML prohíbe explícitamente incluir ambas, porque si alguna vez especificaran codificaciones diferentes, el navegador tendría que decidir en cuál confiar, llevando a un comportamiento impredecible.

La codificación de caracteres es crítica para mostrar correctamente el texto. Si la codificación es incorrecta o ambigua, caracteres como letras acentuadas, emojis o símbolos de escrituras no latinas pueden aparecer como texto ilegible (a menudo llamado “mojibake”). Al requerir una declaración única e inequívoca, la especificación asegura que los navegadores puedan determinar de forma fiable la codificación.

La sintaxis <meta charset="UTF-8"> se introdujo con HTML5 como una alternativa más corta y limpia al enfoque más antiguo <meta http-equiv="content-type">. Ambas son válidas por sí solas, pero las mejores prácticas modernas favorecen fuertemente <meta charset="UTF-8"> por su simplicidad. Cualquiera que elijas, debe aparecer lo antes posible dentro del elemento <head> (idealmente como primer hijo) y debe aparecer dentro de los primeros 1024 bytes del documento para que el navegador pueda detectar la codificación antes de analizar el resto del contenido.

Para solucionar este problema, busca en el <head> de tu documento ambas formas de la declaración y elimina una de ellas. En la mayoría de los casos, deberías mantener <meta charset="UTF-8"> y eliminar el elemento <meta http-equiv="content-type">.

Ejemplos

Incorrecto: ambas declaraciones presentes

Esto activa el error de validación porque se usan simultáneamente ambos métodos de declarar la codificación de caracteres.

<!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>

Correcto: usando `<meta charset>` (recomendado)

Este es el enfoque moderno y preferido 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>

Correcto: usando `<meta http-equiv="content-type">`

Esta sintaxis más antigua también es válida por sí sola. Podrías encontrarla en bases de código heredadas o al 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>

Escenario común: declaraciones divididas entre incluidos

En sistemas de plantillas o plataformas CMS, las dos declaraciones a veces terminan en archivos parciales diferentes; por ejemplo, una en un layout base y otra inyectada por un plugin o tema. Si encuentras este error inesperadamente, verifica todos los archivos que contribuyen a tu sección <head>, no solo la plantilla principal.

<!-- base-layout.html -->

<head>
  <meta charset="UTF-8">
<!-- ...otras etiquetas... -->

</head>

<!-- plugin-head-snippet.html (eliminar este duplicado) -->

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Audita tus incluidos y parciales para asegurar que solo una declaración de codificación de caracteres termine en el <head> final renderizado.