HTML

`html/doctype`

Every HTML document starts with <!doctype html> so the browser renders it in standards mode.

moderatestaticfe-html

Why

Without a doctype, browsers switch to quirks mode, which emulates old rendering bugs: the box model, table sizing and line heights differ, so the layout breaks in ways CSS alone cannot explain.

Fix

Make <!doctype html> the very first line of every HTML document (case does not matter). Partial templates and framework components do not need it.

Examples

<!-- bad -->
<html lang="en">
<!-- good -->
<!doctype html>
<html lang="en">

Sources

WHATWG HTML, the DOCTYPE
MDN, Quirks mode and standards mode
W3Schools, HTML style guide (document type)

Facts

Id: html/doctype
Severity: moderate
Check: static checked in the source by audit
Applies to: html
Same problem in: Lighthouse doctype
Taught by the skill: fe-html HTML documents and semantics
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain html/doctype