Malformed HTML: doctype, nesting and deprecated tags

What malformed HTML means here

Browsers are required to recover from broken markup, so a page with structural errors usually looks correct. Anything else reading the page, a crawler, a reader-mode extractor, an assistive technology, may recover differently or not at all.

The errors worth checking are the ones with consequences. A missing doctype puts the browser in quirks mode, where layout follows rules from the 1990s. Nested interactive elements, a link inside a link or a button inside a link, are nonconforming. The parser has defined recovery for them, so the page renders, but what a click or a screen reader does with the result is not what the markup suggests. Deprecated presentational elements still render and have had CSS equivalents for two decades.

What squirrel checks

The rule runs on every crawled page against the raw HTML and the parsed document. It emits a single check named broken-html:

• Pass when nothing was found. Message: HTML structure appears valid.
• Warn or info otherwise. Message: 3 HTML issue(s) found, with each issue listed by a slug and a readable label.

The issues detected are: missing-doctype when the trimmed HTML does not start with <!doctype; missing-html, missing-head and missing-body when the parsed document has no such element; nested-links labelled 2 nested <a> tag(s); button-in-link for a button inside a link or the reverse; nested-forms; and one deprecated-<tag> for the first of center, font, marquee, blink or strike that appears, reported once regardless of how many deprecated elements the page has.

The status is warn when any of the four structural issues fired, and info otherwise. Severity for the rule is warning, weight 4.

How to fix it

<!doctype html>
<html lang="en">
  <head>…</head>
  <body>…</body>
</html>

Start every document with the doctype. For nested interactive elements, pick one: a card that is a link should be one anchor, and a button inside it should be a sibling rather than a child.

Replace deprecated presentational tags with CSS. <center> is text-align: center, <font> is a font declaration, <strike> is <s> or <del> depending on what you mean.

Enable / disable

Disable this rule

[rules]
disable = ["content/broken-html"]

Disable all Content rules

[rules]
disable = ["content/*"]

Enable only this rule

[rules]
enable = ["content/broken-html"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• content/meta-in-body: meta tags displaced by a structural error.
• a11y/empty-heading: the accessibility view of an empty heading.
• core/doctype: the doctype checked on its own.
• content/unrendered-markup: markup that reached the reader as text.

Content findings ship in every audit next to the SEO, performance and agent experience rules. See Fix SEO issues with AI for how an agent works through a report.

References

• The head element, HTML Standard
• Parsing HTML documents, HTML Standard

Check your site

Run squirrel audit https://example.com and open the Content section of the report. Each page is listed with the structural issues found. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.