Validación HTML: Etiqueta de inicio "style" extraviada.

Acerca de este problema HTML

El error “Etiqueta de inicio style extraviada” ocurre cuando el analizador HTML encuentra un elemento <style> en algún lugar donde no pertenece según la especificación HTML. Las causas más comunes son:

Un elemento <style> colocado después de la etiqueta de cierre </body> o después de la etiqueta de cierre </html>.
Un elemento <style> colocado accidentalmente dentro de un elemento como <p>, <span>, o <a> que solo acepta contenido de fraseo y no <style> en ese contexto.
Un elemento <style> que aparece en el <body> sin ser un hijo válido en ese contexto (aunque el estándar HTML living standard sí permite <style> en el <body> bajo ciertas condiciones).

Según el estándar HTML living standard de WHATWG, el elemento <style> se espera principalmente dentro de la sección <head>. Aunque la especificación técnicamente permite <style> en el <body> donde se espera contenido de metadatos (como dentro de un elemento <noscript> que es hijo de <head>), colocarlo en el <head> es el enfoque más confiable y universalmente válido.

Cuando una etiqueta <style> aparece después de </body> o </html>, se activa el comportamiento de recuperación de errores del navegador. Los navegadores seguirán intentando aplicar los estilos, pero estás dependiendo de un comportamiento de recuperación indefinido en lugar de la especificación. Esto puede llevar a un renderizado inconsistente, hace que el documento sea más difícil de mantener, y señala problemas estructurales en tu HTML.

Este problema surge comúnmente cuando los sistemas de gestión de contenido, frameworks de JavaScript, o errores de copiar y pegar inyectan estilos al final de un documento. También puede suceder cuando las inclusiones de plantillas o el renderizado del lado del servidor colocan bloques <style> en ubicaciones inesperadas.

Para solucionar este problema, mueve el elemento <style> a la sección <head>. Alternativamente, considera mover el CSS a una hoja de estilos externa enlazada mediante un elemento <link>, que generalmente es el enfoque preferido para la mantenibilidad y el cacheo.

Ejemplos

Incorrecto: `<style>` después de la etiqueta de cierre `</body>`

Este es el escenario más común que desencadena el error. El elemento <style> está “extraviado” porque aparece fuera del <body> y <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
  <style>
    p {
      color: green;
    }
  </style>
</html>

Incorrecto: `<style>` después de la etiqueta de cierre `</html>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>
<style>
  p {
    color: green;
  }
</style>

Incorrecto: `<style>` anidado dentro de un elemento `<p>`

El elemento <p> solo acepta contenido de fraseo, por lo que un elemento <style> aquí puede desencadenar el error de etiqueta extraviada:

<p>
  <style>
    .highlight { color: red; }
  </style>
  Some highlighted text.
</p>

Correcto: `<style>` dentro del `<head>`

Mueve todos los elementos <style> a la sección <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <style>
      p {
        color: green;
      }
      .highlight {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Hello world</p>
    <p class="highlight">Important text.</p>
  </body>
</html>

Correcto: usar una hoja de estilos externa en su lugar

Para una mejor separación de responsabilidades, cacheo y mantenibilidad, usa una hoja de estilos externa:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

Si tienes múltiples bloques <style> dispersos por todo tu documento, consolídalos todos en un solo elemento <style> en el <head>, o mejor aún, múevelos a un archivo .css externo. Esto asegura HTML válido, renderizado predecible en todos los navegadores, y una estructura de documento más limpia.