HTML Guides for content model

A <noscript> element contains another <noscript>, and the HTML standard doesn't allow one inside the other at any depth.

When JavaScript is off, a <noscript> in the <body> may contain whatever its parent may contain, with one exception: it must have no <noscript> descendants. The validator reports the inner element whether it's a direct child or sits deeper, for example inside a <div> within the outer <noscript>. An inner <noscript> adds nothing anyway, because the outer one already shows its content only to visitors without JavaScript.

With JavaScript on, browsers read a <noscript> in the <body> as plain text up to the first </noscript> end tag. In nested markup that's the inner end tag, so the outer element ends early. Anything between the two end tags is then parsed as regular page markup: text there shows up for every visitor, and a closing tag such as </div> can end a parent container too soon.

Nested <noscript> elements usually come from markup assembled by several sources, such as a lazy-loading plugin that wraps an image in a <noscript> fallback when that image already sits inside one. Remove the inner <noscript> tags and keep their content directly inside the outer element.

Invalid example

<noscript>

<p>Turn on JavaScript to browse the full gallery.</p>

<noscript>

<img src="harbor.jpg" alt="Harbor at sunset">

</noscript>

</noscript>

Valid example

<noscript>

<p>Turn on JavaScript to browse the full gallery.</p>

<img src="harbor.jpg" alt="Harbor at sunset">

</noscript>