v150 · HTML · Quirks vs Standards

Quirks vs Standards Mode

What triggers quirks mode, what it means for anchor name matching, and why Chrome 150's alignment of the two modes is the right fix for interoperability.

live DOCTYPE tester

Load the same named-anchor document twice: once with <!doctype html> and once without it. Chrome 150 should require exact case in both frames, so a mismatched fragment no longer scrolls in quirks mode.

Ready. Run the test to compare standards mode and quirks mode fragment matching.

Standards frame

Not run yet.

Quirks frame

Not run yet.
Rule Result
Chrome 150 expected matchWaiting for input.
Detecting document mode…

mode overview

Quirks mode

  • ✗ No DOCTYPE declaration
  • ✗ Unrecognised DOCTYPE
  • ✗ Old non-standard doctypes

Browser emulates old quirky behaviour for legacy compatibility. Before Chrome 150: anchor name matching was case-insensitive.

Standards mode

  • ✓ <!DOCTYPE html>
  • ✓ Any valid HTML5 DOCTYPE
  • ✓ XHTML doctypes

Browser follows the HTML and CSS specs strictly. Anchor name matching has always been case-sensitive in this mode.

audit and fix guide

Scenario Action needed
Page has <!doctype html> No action — already case-sensitive, Chrome 150 doesn't change anything for you
Page has no DOCTYPE (quirks mode) with consistent case in anchors and links No action — your links already use the right case
Quirks page with mismatched case: name="foo" + #Foo Fix case mismatch: either change <a name="Foo"> or change the link to #foo
Legacy page — can't modify HTML easily Add <!DOCTYPE html> at the top of the page and verify your links still work

code

<!-- Always include DOCTYPE to avoid quirks mode -->
<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <!-- Named anchor -->
    <h2><a name="section-one">Section One</a></h2>
    <!-- Or use id="" -- preferred modern approach -->
    <h2 id="section-one">Section One</h2>

    <!-- Link must match case exactly -->
    <a href="#section-one">Go to Section One</a>  <!-- ✓ -->
    <a href="#Section-One">Go to Section One</a>  <!-- ✗ won't match -->
  </body>
</html>

// Detect document mode in JS
console.log(document.compatMode);
// → "CSS1Compat" = standards mode
// → "BackCompat"  = quirks mode

see also