HTML Document Structure
The Anatomy of an HTML Document
Every HTML page you have ever visited follows the same fundamental skeleton. Understanding this structure is the first step to writing real web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Page Title</title>
</head>
<body>
<!-- Your visible content goes here -->
</body>
</html>
Let's break down every single part.
The DOCTYPE Declaration
<!DOCTYPE html>
This is not an HTML tag — it is an instruction to the browser. It tells the browser to render the page using the modern HTML5 standard. Without it, some browsers enter "quirks mode" and interpret your HTML incorrectly.
Always put <!DOCTYPE html> on the very first line of every HTML file.
The <html> Element
<html lang="en">
...
</html>
This is the root element — every other element on the page lives inside it. The lang attribute tells the browser (and screen readers) what language the content is written in. Use "en" for English, "fr" for French, etc.
The <head> Element
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Page Title</title>
</head>
The <head> contains metadata — information about the page that the browser uses but does not display on screen.
| Tag | What it does |
|---|---|
<meta charset="UTF-8"> | Enables special characters (é, ñ, ₦, emojis) to display correctly |
<meta name="viewport" ...> | Makes the page responsive on mobile devices |
<title> | Sets the text shown in the browser tab |
<link> | Links external files like CSS stylesheets |
<script> | Links or embeds JavaScript |
The <body> Element
<body>
<h1>Hello, World!</h1>
<p>This is visible on the page.</p>
</body>
The <body> contains everything the user actually sees and interacts with. Every heading, paragraph, image, button, and form goes here.
Putting It Together
Here is a complete, real-world HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CareerEx | Learn Frontend Development</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>CareerEx</h1>
<p>Your tech career starts here.</p>
</header>
<main>
<h2>Frontend Engineering Track</h2>
<p>Build modern, responsive websites from scratch.</p>
</main>
<footer>
<p>© 2025 CareerEx</p>
</footer>
</body>
</html>
HTML Comments
Comments are notes you leave in your code. The browser ignores them completely:
<!-- This is a comment. It does not appear on the page. -->
<p>This paragraph is visible.</p>
Use comments to explain sections of your HTML or to temporarily hide elements while experimenting.
Indentation and Readability
HTML does not care about whitespace — extra spaces and blank lines are ignored. But indentation makes your code readable:
<!-- Hard to read -->
<body><header><h1>Title</h1></header><main><p>Content</p></main></body>
<!-- Easy to read -->
<body>
<header>
<h1>Title</h1>
</header>
<main>
<p>Content</p>
</main>
</body>
Standard practice is 2 spaces per indent level.
Try it yourself
Key Takeaways
- Every HTML page starts with <!DOCTYPE html> to activate modern HTML5 rendering
- The <html> element is the root container for all other elements; the lang attribute sets the document language
- The <head> contains metadata like title, charset, and viewport settings — nothing visible on screen
- The <body> contains all visible content the user sees and interacts with
- Use the <title> tag to set the text shown in the browser tab
- HTML comments (<!-- -->) are ignored by the browser and are useful for documentation
Quick Quiz
1.What is the purpose of the <!DOCTYPE html> declaration?
2.What goes inside the <head> element?
3.Which attribute on the <html> tag specifies the document language?
4.What does the viewport meta tag do?
5.Where should visible page content like headings and paragraphs be placed?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx