HTML Guides for content model

Every <hgroup> must contain one heading element, from <h1> to <h6>, as a direct child, and this <hgroup> has none.

<hgroup> pairs a heading with related text, such as a subtitle, a tagline or a chapter number. It holds exactly one heading, with optional <p> elements before or after it. Script-supporting elements like <script> and <template> are allowed too.

This error usually appears when <hgroup> is used as a styling wrapper, for example around a logo link in the page header, or when every line inside it is a <p>. A heading wrapped in a <div> or <a> doesn't count, because it has to be a direct child. Any element that isn't allowed inside <hgroup> also gets its own error, such as Element “a” not allowed as child of element “hgroup” in this context.

If the content isn't a heading with a subtitle, replace the <hgroup> with a <div> or remove it. If it is, mark the title up as a heading and keep the extra lines in <p> elements. Older versions of the spec let <hgroup> hold several headings, but now it takes only one, so a subtitle written as <h2> belongs in a <p>.

Invalid example

<header>

<hgroup>

<a href="/">

<img src="logo.png" alt="Example Shop">

</a>

</hgroup>

</header>

<hgroup>

<p>Chapter 3</p>

<p>The long way home</p>

</hgroup>

Valid example

<header>

<a href="/">

<img src="logo.png" alt="Example Shop">

</a>

</header>

<hgroup>

<p>Chapter 3</p>

<h1>The long way home</h1>

</hgroup>

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>