HTML Document Structure
Every HTML document follows a defined structural blueprint that browsers use to interpret and render content. Understanding this structure is the foundation of building valid, accessible, and performant web pages.
An HTML document is composed of a strict hierarchy of elements beginning with the doctype declaration and wrapping everything in <html>, <head>, and <body> tags. This structure has remained consistent across HTML4, XHTML, and HTML5.
The minimal valid HTML5 document consists of a doctype declaration followed by the root <html> element containing <head> and <body> sections:
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Document</title> |
| 7 | </head> |
| 8 | <body> |
| 9 | <h1>Hello, World!</h1> |
| 10 | <p>This is a minimal HTML5 document.</p> |
| 11 | </body> |
| 12 | </html> |
Every element in this template serves a specific purpose. The doctype tells the browser to render in standards mode, the lang attribute on <html> sets the document language, and the <meta> tags configure character encoding and responsive viewport behavior.
A live rendering of the minimal HTML5 document template:
Notice how the browser applies default styles to <h1> and <p>elements. These defaults come from the browser's user-agent stylesheet and are applied only in standards mode.
The doctype declaration <!DOCTYPE html> is the very first line of any HTML document. It is not an HTML element but a processing instruction that tells the browser which version of HTML the document uses and triggers the correct rendering mode.
In HTML5, the doctype is dramatically simplified compared to older versions. Previous doctypes were lengthy SGML declarations:
| 1 | <!-- HTML5 (modern, simple) --> |
| 2 | <!DOCTYPE html> |
| 3 | |
| 4 | <!-- HTML 4.01 Strict --> |
| 5 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| 6 | "http://www.w3.org/TR/html4/strict.dtd"> |
| 7 | |
| 8 | <!-- XHTML 1.0 Strict --> |
| 9 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| 10 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 11 | |
| 12 | <!-- HTML 4.01 Transitional --> |
| 13 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 14 | "http://www.w3.org/TR/html4/loose.dtd"> |
info
Omitting the doctype triggers quirks mode, where browsers emulate the buggy layout behavior of older browsers like IE5. This results in inconsistent box models, broken layouts, and unexpected styling. Always include the doctype.
The <html> element is the root element of every HTML document. It wraps all content except the doctype. The most important attribute is lang, which sets the primary language of the document:
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <!-- all content goes here --> |
| 4 | </html> |
The lang attribute accepts en for English, es for Spanish, fr for French, ja for Japanese, and many more BCP 47 language tags. You can also specify regional variants like en-US or en-GB.
Common language attribute values:
| Value | Language | Region |
|---|---|---|
| en | English | Generic |
| en-US | English | United States |
| en-GB | English | United Kingdom |
| es | Spanish | Generic |
| fr | French | Generic |
| ja | Japanese | Generic |
| zh-CN | Chinese | Simplified |
| ar | Arabic | Generic |
best practice
The <head> element is a container for metadata about the document. Content inside the head is not displayed in the browser viewport. It contains elements like <title>, <meta>, <link>, <style>, and <script>.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>My Website</title> |
| 7 | <meta name="description" content="A description of the page"> |
| 8 | <meta name="keywords" content="html, css, web development"> |
| 9 | <link rel="stylesheet" href="styles.css"> |
| 10 | <link rel="icon" href="favicon.ico" type="image/x-icon"> |
| 11 | <script src="app.js" defer></script> |
| 12 | </head> |
| 13 | <body> |
| 14 | <!-- visible content --> |
| 15 | </body> |
| 16 | </html> |
The head section is where you configure SEO, responsive behavior, stylesheets, scripts, and metadata. Properly structuring the head is essential for search engine ranking, social sharing, and performance.
The <body> element contains all the visible content of the document: text, images, videos, forms, and interactive elements. There is exactly one <body> element per document, and it must be a direct child of <html>.
| 1 | <body> |
| 2 | <header> |
| 3 | <nav> |
| 4 | <ul> |
| 5 | <li><a href="/">Home</a></li> |
| 6 | <li><a href="/about">About</a></li> |
| 7 | <li><a href="/contact">Contact</a></li> |
| 8 | </ul> |
| 9 | </nav> |
| 10 | </header> |
| 11 | |
| 12 | <main> |
| 13 | <article> |
| 14 | <h1>Article Title</h1> |
| 15 | <p>Article content goes here.</p> |
| 16 | </article> |
| 17 | </main> |
| 18 | |
| 19 | <footer> |
| 20 | <p>© 2026 My Website</p> |
| 21 | </footer> |
| 22 | </body> |
Use semantic elements like <header>, <main>, <article>, <section>, <nav>, and <footer> to structure the body content meaningfully. These elements improve accessibility and SEO.
HTML collapses multiple consecutive whitespace characters (spaces, tabs, newlines) into a single space when rendering. This is called whitespace collapse and is defined by the CSS white-space: normal property applied by default to most elements.
| 1 | <!-- These two paragraphs render identically --> |
| 2 | <p>Hello World</p> |
| 3 | <p>Hello World</p> |
| 4 | |
| 5 | <!-- Newlines collapse to a single space --> |
| 6 | <p> |
| 7 | This is |
| 8 | a paragraph |
| 9 | with line breaks |
| 10 | in the source code. |
| 11 | </p> |
This behavior means you can format your HTML with indentation and line breaks for readability without affecting the visual output. However, there are exceptions:
pro tip
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| HTML5 doctype | ✓ | ✓ | ✓ | ✓ |
| Semantic elements | ✓ | ✓ | ✓ | ✓ |
| lang attribute | ✓ | ✓ | ✓ | ✓ |
| Viewport meta | ✓ | ✓ | ✓ | ✓ |
HTML comments allow developers to leave notes in the source code that are not rendered by the browser. Comments are enclosed in <!-- and --> delimiters:
Comments are useful for documentation, debugging, temporarily disabling code, and conditional comments (legacy IE support). However, avoid exposing sensitive information in comments since they are visible in the page source.