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

Acerca de este problema HTML

La declaración <meta charset="utf-8"> no solo es válida sino recomendada por el estándar HTML living. Así que cuando el validador se queja de que el atributo charset “no está permitido en este punto”, el problema no es la etiqueta <meta> en sí — es lo que la rodea. El parser HTML sigue reglas estrictas sobre qué elementos pueden aparecer dentro de <head>. Cuando encuentra un elemento que no pertenece ahí (como <img>, <div>, <p>, u otro contenido de flujo/fraseado), cierra implícitamente el <head> y abre el <body>. Cualquier etiqueta <meta> que venga después de ese punto se analiza ahora como estando dentro de <body>, donde <meta charset> no está permitido.

Esto es un problema por varias razones. Primero, la declaración <meta charset> debe aparecer dentro de los primeros 1024 bytes del documento para que los navegadores puedan determinar la codificación de caracteres temprano. Si el parser la mueve fuera de <head>, los navegadores pueden no aplicar la codificación correctamente, potencialmente llevando a texto corrupto — especialmente para caracteres no-ASCII. Segundo, esto a menudo señala un error estructural en tu HTML que podría causar otros problemas de renderizado inesperados.

Las causas comunes incluyen:

Un elemento que solo pertenece en <body> (como <img>, <div>, <span>, o <p>) colocado antes de <meta charset> en el <head>.
Una etiqueta de cierre perdida (como </head>) apareciendo muy temprano.
Una etiqueta <script> con contenido que hace que el parser salga de <head>.

Para solucionar el problema, inspecciona los elementos que aparecen antes de <meta charset> en tu <head>. Mueve cualquier elemento que no pertenezca en <head> al <body>, y coloca <meta charset="utf-8"> como el primer elemento dentro de <head>.

Ejemplos

Incorrecto — elemento antes de `<meta>` fuerza al parser a salir de `<head>`

Una etiqueta <img> dentro de <head> hace que el parser cierre implícitamente <head> y abra <body>. El <meta charset> que sigue se analiza ahora como estando en <body>, desencadenando el error.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <img src="photo.jpg" alt="A smiling cat">
    <meta charset="utf-8">
  </head>
  <body>
    <p>Some content</p>
  </body>
</html>

Correcto — `<meta charset>` primero, elementos inválidos movidos a `<body>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <img src="photo.jpg" alt="A smiling cat">
    <p>Some content</p>
  </body>
</html>

Incorrecto — `<div>` perdido en `<head>` rompe el contexto

<!DOCTYPE html>
<html lang="en">
  <head>
    <div>Oops</div>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

Correcto — solo elementos head válidos antes de `<meta charset>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <div>Content goes here</div>
    <p>Hello</p>
  </body>
</html>

Buena práctica

Como regla general, siempre haz que <meta charset="utf-8"> sea el primer hijo de <head>. Esto asegura que el navegador detecte la codificación lo más temprano posible y evita el riesgo de que otros elementos rompan accidentalmente el contexto del parser antes de que se declare el charset.