An HTML document is a tree of elements that starts with a doctype and an html root, contains machine-readable metadata in head, and visible page content in body, preferably marked with semantic landmark and content elements.
In simpler words
HTML is the page skeleton: head holds title and links to CSS; body holds what people see. Prefer meaningful tags (header, main, nav) over a pile of anonymous divs.
Document outline, semantic landmarks, headings, lists, links, and basic form controls so you can read markup before JSX.
After this you can
Sketch a valid document with head/body landmarks and choose semantic tags for a simple page layout.
Explain the trade-off to a teammate using a small example.
Name at least one common bug pattern for this topic.
Understand HTML document structure
Document outline, semantic landmarks, headings, lists, links, and basic form controls so you can read markup before JSX.
Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.
HTML document structure in code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tickets</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav aria-label="Primary">
<a href="/">Home</a>
</nav>
</header>
<main>
<h1>Open tickets</h1>
<article>
<h2>Cookie auth on web</h2>
<p>Login with credentials and hit /auth/me.</p>
</article>
</main>
</body>
</html>
Read the example from data and control flow to the resulting UI. Keep the component boundary small.
Apply HTML document structure
Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.
Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.
Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?
Where bugs hide
Definition
High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.
In simpler words
Each mistake below shows Wrong vs Right code — compare them side by side.
When something misbehaves, match the symptom to a pattern below before rewriting the feature.
Prefer fixing the ownership or update path over adding another Effect or sync step.