An HTML document has a doctype, a root element, metadata in head, and rendered content in body.
HTML document skeleton: declare language, encoding, and a real title
Use it for a real task
A receipt archive can be opened in a browser without a framework. The document declares English for pronunciation and translation, UTF-8 before visible text, and a title that identifies the page in tabs and history. The viewport declaration permits the layout to use the device width; it does not make a fixed-width design responsive by itself.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Receipt archive | AI Trove</title>
</head>
<body>
<main>
<h1>Receipt archive</h1>
<p>Review issued receipts before exporting a batch.</p>
</main>
</body>
</html>What the markup guarantees
The first heading names the visible page; title names the document when it is seen outside the page. They can differ. Put meaningful content in body and keep one main landmark for the primary task.
Cost and limits
A small static document needs no script or build step. Referenced CSS, images, and scripts add their own requests and failure paths; add them only for a concrete need.
Common Mistakes
- Do not omit the title and expect the heading to fill browser history.
- Declare the page language rather than assuming the browser infers it.
- A viewport meta tag cannot repair overflowing fixed-width content.
Connected lessons
- HTML title and metadata: distinguish document identity from page copy
- HTML landmarks: give navigation, main content, and page edges clear owners
- Responsive CSS: keep reading order and controls usable
Related: HTML title and metadata: distinguish document identity from page copy.
Related: HTML headings and paragraphs: expose a readable outline without styling tricks.
Related: HTML anchors: use href for navigation and stable fragment targets.
Related: HTML iframe sandbox: isolate an embedded preview and name its purpose.
Related: HTML script loading: choose ordered defer or independent async work.
Related: HTML lang, dir, and bdi: keep text pronunciation and direction stable.
Related: HTML receipt index project: landmarks, links, tables, and a bounded image.
Related: HTML parsing: void elements and repaired markup.
Related: HTML doctype: keep the browser in standards mode.
Related: HTML viewport metadata: let a mobile layout use device width.
Related: HTML print stylesheet: declare a separate rendering context.
Style this pattern
Continue with the connected Web Development lesson: Page loading: keep content available while CSS and scripts arrive.
