The <!DOCTYPE html> declaration tells the browser to render the page in standards-compliant (HTML5) mode, avoiding “quirks mode.”
The <html> element is the root of the document and must encompass all other elements; it often carries a lang attribute to specify the page’s language.
Inside <html>, the <head> section holds machine‑readable metadata—like character encoding, viewport settings, and the page title—which browsers use to configure rendering and search engines use for indexing.
The <body> section contains all the visible content—text, images, forms, scripts, etc.—that users see and interact with.
<!DOCTYPE html>
<!-- Declare HTML5 standards‑compliant document -->
<html lang="en">
<!-- Root element of the document; specifies English language -->
<head>
<!-- Document metadata (not rendered directly) -->
<meta charset="UTF-8">
<!-- Character encoding for the document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Responsive layout: viewport width = device width, no zoom by default -->
<title>Document</title>
<!-- Text shown in browser’s tab or window title bar -->
</head>
<body>
<!-- Visible page content goes here -->
<!-- Example content -->
<h1>Hello, world!</h1>
<p>This is the body of the document.</p>
</body>
</html>
Structured Diagram
This skeleton sets up the fundamental building blocks that every HTML5 page should include, ensuring correct rendering, metadata declarations, and a clear separation between metadata and visible content.
Document
├─ <!DOCTYPE html>
└─ <html lang="en">
├─ <head>
│ ├─ <meta charset="UTF-8">
│ ├─ <meta name="viewport" ...>
│ └─ <title>Document</title>
└─ <body>
├─ <h1>…</h1>
└─ <p>…</p>