Skip to main content
Validação HTML

Tag de início incorreta em “p” em “noscript” em “head”.

Sobre este problema HTML

A especificação HTML define dois modelos de conteúdo distintos para o elemento <noscript> baseados na sua localização no documento. Quando <noscript> aparece dentro de <head>, herda as restrições do próprio elemento <head> — apenas conteúdo de metadados é permitido. Isto significa que elementos como <link>, <style> e <meta> são permitidos, mas conteúdo de fluxo como <p>, <div>, <h1>, ou qualquer outro elemento do nível do body não é. Quando <noscript> aparece dentro de <body>, segue as regras mais permissivas do conteúdo de fluxo e pode conter parágrafos, cabeçalhos e outros elementos visíveis.

Esta distinção existe porque a seção <head> é estritamente reservada para metadados que descrevem o documento — nunca é renderizada como conteúdo visível da página. Colocar uma tag <p> dentro de uma <noscript> no <head> viola este princípio. Os navegadores podem lidar com isto de forma inconsistente: alguns podem ignorar silenciosamente o conteúdo inválido, enquanto outros podem forçar o <head> a fechar prematuramente e empurrar o conteúdo para o <body>, causando problemas de layout inesperados e potencialmente perturbando outros elementos de metadados que se seguem.

Esta é também uma preocupação de acessibilidade. Os leitores de ecrã e outras tecnologias assistivas dependem de um documento bem estruturado onde o <head> contém apenas metadados e todo o conteúdo visível vive no <body>. O aninhamento inválido pode confundir estas ferramentas e levar a que o conteúdo seja ignorado ou mal interpretado.

Como corrigir

Você tem duas abordagens principais:

  1. Manter <noscript> no <head> mas usar apenas elementos de metadados. Isto é ideal quando precisa carregar uma folha de estilos de fallback ou adicionar um redirecionamento <meta> para utilizadores sem JavaScript.

  2. Mover o bloco <noscript> para o <body> se precisar mostrar texto visível ou outro conteúdo de fluxo ao utilizador.

Exemplos

❌ Incorreto: Conteúdo de fluxo dentro de <noscript> no <head>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <noscript>
      <p>JavaScript is disabled.</p>
    </noscript>
  </head>
  <body>
  </body>
</html>

O elemento <p> é conteúdo de fluxo e não é permitido dentro de <noscript> quando está situado dentro de <head>.

✅ Correto: <noscript> apenas com metadados no <head>

Se o seu objetivo é fornecer uma folha de estilos de fallback ou redirecionamento quando JavaScript não está disponível, use apenas elementos de metadados:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <noscript>
      <link rel="stylesheet" href="no-js-fallback.css">
    </noscript>
  </head>
  <body>
  </body>
</html>

Você também pode usar <style> ou <meta> dentro da <noscript> no <head>:

<head>
  <title>Example</title>
  <noscript>
    <style>
      .js-only { display: none; }
      .no-js-message { display: block; }
    </style>
  </noscript>
</head>

✅ Correto: Fallback textual em <noscript> dentro do <body>

Quando precisa mostrar uma mensagem visível aos utilizadores que têm JavaScript desativado, coloque o bloco <noscript> no <body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <noscript>
      <p>This site requires JavaScript to function properly. Please enable JavaScript in your browser settings.</p>
    </noscript>
  </body>
</html>

✅ Correto: Combinando ambas as abordagens

Para uma estratégia de fallback abrangente, pode usar <noscript> em ambas as localizações — metadados no <head> e conteúdo visível no <body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <noscript>
      <link rel="stylesheet" href="no-js-fallback.css">
    </noscript>
  </head>
  <body>
    <noscript>
      <p>JavaScript is disabled. Some features may not be available.</p>
    </noscript>
  </body>
</html>

Isto dá-lhe o melhor dos dois mundos: ajustes de estilo através do fallback do <head> e uma mensagem voltada para o utilizador através do fallback do <body>.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.