Document Structure

Document Skeleton

The Browser Builds a Page

A minimal HTML document enters standards mode, declares a language, sets the browser title, and finally paints a heading.

Program

HTML is declarative: each element describes document structure and the browser turns that structure into rendered output.

The browser keeps structure first; paint comes after body nodes exist.Document skeleton to DOMPinned nodes from document_skeleton.htmlhtmllang=enheadmetadatabodyvisibletitletab textmainregionh1headingThe browser keeps structure first; paint comes after body nodes exist.
Figure: HTML document structure becomes a DOM tree. Model source: books/html/01document_structure/document_skeleton/diagrams/dom_tree.semantic.json.
document_skeleton.html
Visuals: captured from real browser rendering
<!doctype html>
<html lang="en">
<head>
  <title>Launch Checklist</title>
</head>
<body>
  <h1>Launch Checklist</h1>
</body>
</html>

  1. Enter standards-mode parsing.

    A blank browser viewport with standards mode recorded.
    The doctype changes parsing mode, not visible page content.

  2. Declare the document language.

    A blank viewport with English as the document language.
    The lang attribute describes the document for browsers and assistive tools.

  3. Set the browser title.

    The browser title bar reads Launch Checklist while the page body is still empty.
    The title affects browser chrome before body elements render.

  4. Render the main heading.

    A large Launch Checklist heading appears in the page viewport.
    The h1 element creates visible body content.

  5. Close the document tree.

    The Launch Checklist heading remains after the document is complete.
    Closing the document finalizes the same rendered tree.
doctype The doctype asks the browser to parse the document in standards mode.
document title The title element updates browser chrome before body content is visible.