Verificação HTML: Tag de abertura `style` perdida.

Sobre este problema HTML

O erro “Tag de abertura style perdida” ocorre quando o analisador HTML encontra um elemento <style> algures onde não deveria estar de acordo com a especificação HTML. As causas mais comuns são:

Um elemento <style> colocado após a tag de fecho </body> ou após a tag de fecho </html>.
Um elemento <style> acidentalmente colocado dentro de um elemento como <p>, <span>, ou <a> que apenas aceita conteúdo frásico e não <style> nesse contexto.
Um elemento <style> que aparece no <body> sem ser um filho válido nesse contexto (embora o padrão HTML living standard permita <style> no <body> em certas condições).

De acordo com o padrão HTML living standard do WHATWG, o elemento <style> é principalmente esperado dentro da secção <head>. Embora a especificação tecnicamente permita <style> no <body> onde é esperado conteúdo de metadados (como dentro de um elemento <noscript> que é filho de <head>), colocá-lo no <head> é a abordagem mais fiável e universalmente válida.

Quando uma tag <style> aparece após </body> ou </html>, o comportamento de recuperação de erro do navegador entra em ação. Os navegadores continuarão a tentar aplicar os estilos, mas você está a depender de comportamento de recuperação indefinido em vez da especificação. Isto pode levar a renderização inconsistente, torna o documento mais difícil de manter, e sinaliza problemas estruturais no seu HTML.

Este problema surge comumente quando sistemas de gestão de conteúdo, frameworks JavaScript, ou erros de copiar-colar injetam estilos no final de um documento. Também pode acontecer quando includes de template ou renderização do lado do servidor colocam blocos <style> em localizações inesperadas.

Para corrigir este problema, mova o elemento <style> para a secção <head>. Alternativamente, considere mover o CSS para uma folha de estilos externa ligada via um elemento <link>, que é geralmente a abordagem preferida para manutenibilidade e cache.

Exemplos

Incorreto: `<style>` após a tag de fecho `</body>`

Este é o cenário mais comum que desencadeia o erro. O elemento <style> está “perdido” porque aparece fora do <body> e <head>:

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

Incorreto: `<style>` após a tag de fecho `</html>`

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

Incorreto: `<style>` aninhado dentro de um elemento `<p>`

O elemento <p> apenas aceita conteúdo frásico, portanto um elemento <style> aqui pode desencadear o erro de tag perdida:

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

Correto: `<style>` dentro do `<head>`

Mova todos os elementos <style> para a secção <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>

Correto: usar uma folha de estilos externa em vez disso

Para melhor separação de responsabilidades, cache, e manutenibilidade, use uma folha 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>

Se tem múltiplos blocos <style> espalhados pelo seu documento, consolide-os todos num único elemento <style> no <head>, ou melhor ainda, mova-os para um ficheiro .css externo. Isto garante HTML válido, renderização previsível entre navegadores, e estrutura de documento mais limpa.