foundation

Document structure and metadata

Use doctype, html language, head metadata, title, viewport, and body structure as the page contract.

A correct HTML document starts with doctype, an `html` element with `lang`, a `head` with machine-readable metadata, and a `body` that reflects visible content. Title, viewport, charset, and canonical links affect usability, sharing, indexing, and mobile rendering.

					<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Checkout — Acme Shop</title>
    <link rel="canonical" href="https://example.com/checkout">
  </head>
  <body>...</body>
</html>

On interviews: explain why `lang`, `title`, `viewport`, and meaningful initial body structure are not decorative.

Common pitfalls: missing `lang` hurts screen reader pronunciation; missing viewport breaks mobile layout; client-only shells without meaningful initial HTML weaken SEO and accessibility.

The trade-off is richer client rendering versus crawlable, accessible first paint — ship meaningful HTML even when JavaScript hydrates later.

Checklist:

Set doctype and `lang`.
Use unique, descriptive titles.
Include viewport for responsive pages.
Keep initial body meaningful for crawlers.