Document Structure

Build the complete shell every standards-friendly HTML page needs.

更新于 2026年8月13日适用于 HTML Living Standard

A complete page includes metadata for the browser and a body for visible content. This predictable shell helps browsers, search engines, and accessibility tools interpret the document correctly.

The page skeleton

index.html

01<!doctype html>
02<html lang="en">
03  <head>
04    <meta charset="utf-8" />
05    <meta name="viewport" content="width=device-width, initial-scale=1" />
06    <title>My learning journal</title>
07  </head>
08  <body>
09    <h1>My learning journal</h1>
10  </body>
11</html>

The doctype selects standards mode. lang identifies the document language. UTF-8 supports modern text, and the viewport declaration lets mobile browsers use the device width.

Head and body

The head contains information about the page: its title, description, icons, styles, and other metadata. The body contains everything rendered as page content.

index.html

01<head>
02  <title>Journal · Ada</title>
03  <meta name="description" content="Notes from Ada's web-learning journey." />
04</head>

Nest cleanly

Elements must be nested, not crossed. Indentation is optional to the browser but essential for readers.

clean-nesting.html

01<main>
02  <article>
03    <h1>A clear document</h1>
04    <p>Each child closes before its parent.</p>
05  </article>
06</main>

Keep this

Use one document shell per page, declare its language, keep metadata in head, and place visible content in body.