Document Structure

data-* is HTML's sanctioned slot for custom data: it is valid markup, it can never collide with an attribute the language adds later, and browsers expose it to scripts through element.dataset. An invented attribute such as userid gets none of those guarantees.

Browsers pre-scan only the first 1024 bytes of an HTML file for the encoding declaration, so <meta charset="utf-8"> must come first inside <head>. Declared later, the browser guesses an encoding and may have to reparse the document or render garbled text.

A plain <script src> pauses HTML parsing to download and run. defer downloads in parallel and runs after parsing, in document order. async downloads in parallel and runs the moment it arrives, in unpredictable order.

lang declares the document's natural language with a BCP 47 tag, and it drives screen-reader pronunciation and voice choice, hyphenation and line breaking, font and glyph selection, the spellcheck dictionary, and translation offers. Set it again on any element whose content is in a different language.

A stylesheet linked in <head> is render-blocking: the browser will not paint until it has downloaded and parsed that CSS, so it never shows unstyled content. Adding media="print" still downloads the file, at lower priority, but stops it from blocking the first paint.

A p element cannot contain a div, so the div's start tag implicitly closes the open p. The DOM becomes a p holding "Intro", a sibling div holding "Block", and an empty p created by the now-stray end tag.

In HTML the trailing slash is ignored. Void elements such as br, img and input never take an end tag and close themselves anyway; on an ordinary element such as div the slash does nothing, so <div /> stays open.

Quirks mode restores legacy layout rules: a declared width includes padding and border, percentage heights resolve against ancestors standards mode treats as auto, unitless CSS lengths and hashless hex colours are accepted, and a line box holding only an image loses its descender gap.

dataset drops the data- prefix and converts each hyphen-plus-lowercase-letter into a capital, so data-user-id is read as dataset.userId. Every value read back is a string, never a number, boolean or object.

The hidden attribute is not a rendering switch — browsers implement it with a user-agent stylesheet rule that sets display: none. Any author rule setting display on the same element outranks the user-agent origin and un-hides it. The fix is a stronger author rule or a state class that controls display.

Nothing throws — every lookup that resolves an id to one element silently takes the first in tree order, so getElementById, fragment links and attributes that reference an id all point at the first match while selector matching still matches all of them, which is what hides the bug.

They are resource hints of increasing cost. dns-prefetch resolves an origin's DNS only; preconnect additionally opens the TCP connection and completes the TLS handshake; preload actually fetches one specific file early, and requires an as attribute naming its type.

The parser inserts a tbody element for you, so the DOM is table > tbody > tr > td. A row start tag inside a table implies a tbody start tag, which means table rows are never direct children of the table element.

The download starts earlier, because the parser discovers the tag at the top instead of at the bottom. Execution timing barely moves: both forms run after the markup exists and before DOMContentLoaded, but the deferred one waits for the complete document.

A module script is deferred by default: it downloads in parallel and executes after the document is parsed, in document order, before DOMContentLoaded. Adding async makes it run as soon as it is ready, and async works on inline modules too.

Confirm with document.compatMode: "BackCompat" means quirks mode. Then inspect the raw response body rather than the DevTools element tree, looking for non-whitespace output emitted before the doctype, a misspelled or legacy doctype, and remember that iframes and injected documents carry their own mode.

inert makes an element and everything inside it non-interactive: the subtree cannot be focused by Tab or programmatically, does not respond to clicks, is not selectable or findable by find-in-page, and is hidden from assistive technology. It fixes background content behind a modal that is dimmed but still reachable by keyboard.

Only a fixed set of elements may appear in <head>. On reaching a <div> the parser implicitly closes <head>, opens <body>, and puts the div and everything after it in the body — so metadata written later is no longer in the head, and a late encoding declaration is missed.

Nothing fails. The div stays on the parser's stack of open elements, so following markup becomes its descendants until an ancestor's end tag or end of file closes it implicitly. Catch it by validating rendered pages in CI, not by eye.

document.write() injects markup at the parser's current position, so the parser must stop and tokenise it — and any script it injects blocks the parser again. After parsing has finished, the same call implicitly reopens the document and wipes the existing page.

Almost-standards mode, called limited-quirks mode in the HTML standard, is triggered by transitional legacy doctypes such as XHTML 1.0 Transitional. It matches standards mode except for one rule: a line box containing only images is sized to the images, removing the descender gap under an inline image.

Inside <svg> the parser switches to foreign-content rules: a trailing slash genuinely self-closes an element, and known attribute names are case-corrected to spellings such as viewBox. A <p> start tag forces a breakout, popping the parser back into HTML.

nomodule tells any browser that supports ES modules to skip that script. Paired with a type="module" tag, modern browsers run the module bundle and ignore the fallback, while older engines ignore the unknown module type and run the nomodule one.

Treat it as a per-document migration, not a one-line change. Because rendering mode is set per document, migrate route by route behind visual regression coverage, prioritise pages whose stylesheets depend on the legacy box model and percentage heights, and expect layout numbers to shift on every page you switch.