HTML Document Structure

The outer document model

An HTML document is more than a collection of tags placed in a file. It has a document-level arrangement that parsers recognize. A modern document normally begins with <!doctype html>, followed by an html element. The doctype is a declaration, not an HTML element: it tells a browser to use standards mode rather than an older compatibility mode. The html element is the document element, meaning the root of the HTML element tree. In a normal page it contains two main children: head and body. Keeping that mental tree is more useful than memorizing indentation. The root is the container for document-level settings; the head supplies metadata about the document; the body contains the content that makes up the page. Browsers have error-recovery rules and may insert omitted elements while parsing, but an author should not use that recovery as a design method. Writing the complete outer structure makes intent legible to people and to validation tools. This lesson concerns the page skeleton only. It does not choose headings, paragraphs, landmarks, visual styles, scripts, or network behavior; those have dedicated topics.

What belongs in the head

The head element represents a collection of metadata for the document. Metadata describes the document or tells the browser how to handle it; it is not the ordinary page material a visitor reads in the main window. A basic head commonly includes a meta element declaring UTF-8 character encoding, a meta element whose name is viewport, and a title element. The encoding declaration should occur early in the document so the browser can interpret bytes as characters before it has read much text. The title is required as document metadata in a normal HTML document and supplies the document's title, which user agents can expose in places such as a tab or history entry. It is not a substitute for the page's visible top-level heading; a title identifies the document, while a heading organizes content in the body. A viewport meta element such as <meta name="viewport" content="width=device-width, initial-scale=1"> gives the browser viewport-related instructions used particularly by mobile browsers. It helps a responsive layout start from an appropriate viewport width, but it does not itself create a responsive design. Other metadata, stylesheets, and scripts can also occur in a head when their rules permit, but this lesson deliberately limits itself to the foundational metadata.

What belongs in the body

The body element represents the document's content. Visible prose, images, navigation, forms, tables, and other page material belong there when their individual HTML rules allow it. That does not mean every body child is visually visible at every moment, nor that metadata never affects what a person experiences. It means the body is the place where the page's content structure lives, whereas the head describes or configures the document. This boundary avoids a common beginner error: putting a title-like sentence in title and expecting it to appear in the page itself, or putting a metadata declaration among visible page content. A browser can repair some misplaced markup, but repair may not reflect the intended result. Think in terms of audience and role: document-level information for the browser and related tools goes in the head; the information and interface presented as the page go in the body. Later lessons decide how body content should be marked up semantically. For this lesson, an otherwise empty body is acceptable in a structural example because the point is the arrangement, not the content.

A minimal, valid-looking template

A useful starting template is:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Trail Notes</title> </head> <body> Page content goes here. </body> </html>

The language attribute shown on html is useful document-level information, but language selection is not this lesson's focus. The key structural test is nesting: the head and body close before the html root closes, and metadata stays inside the head. The doctype stands before the root element because it is a declaration about parsing, not a child of the page. The template also shows why indentation is helpful: it makes the hierarchy easy to inspect, while the tags—not the spaces—create the hierarchy. Copying a template is only the first step. Before treating it as finished, replace the placeholder title with a specific description, confirm the encoding declaration, and add only the head entries the page actually needs. A small, intentional head is easier to maintain than a collection of copied tags with unknown effects.