HTML Document Structure
Understand the required parts of every HTML document.
Syntax
<!DOCTYPE html>
<html>
<head> ... </head>
<body> ... </body>
</html>All HTML documents share the same basic structure. Each part has a specific job.
The main parts
<!DOCTYPE html>— tells the browser this is an HTML5 document.<html>— the root element that wraps the whole page.<head>— holds information about the page (title, metadata).<body>— holds the visible content of the page.
Content that appears on the screen goes inside the <body>.
Example
Loading editor…
Press Run to see the result.
When to use it
- A freelancer sets up the correct DOCTYPE and root element before writing any page content.
- A QA engineer checks that every page in a site begins with <!DOCTYPE html> to avoid quirks mode rendering.
- A teacher explains the required document shell to students starting their first HTML project.
More examples
The DOCTYPE declaration
The <!DOCTYPE html> declaration tells the browser to render in standards mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>Head vs body sections
Shows that <head> carries metadata and resources while <body> holds visible page content.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome</h1>
</body>Complete document with charset and viewport
A production-ready document shell with character encoding, viewport, title, and favicon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Page</title>
<link rel="icon" href="favicon.ico">
</head>
<body>
<h1>Our Product</h1>
<p>Crafted with care.</p>
</body>
</html>
Discussion