The HTML Skeleton
Every file you have built so far has been working — but it has been missing something. The browser was forgiving enough to show your tags anyway, but a proper HTML file has a fixed structure that wraps everything.
Every single HTML page on the internet uses it. Time to learn it.
The full structure
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my page.</p>
</body>
</html>
That is the skeleton. Let's go through each part.
<!DOCTYPE html>
The very first line of every HTML file. It is not a tag — it is a declaration that tells the browser:
"This file uses modern HTML."
One line. Always first. Never skip it.
<html>
Everything in your page lives inside <html>. It is the outermost wrapper. Open it right after the DOCTYPE, close it at the very bottom of the file.
<head>
The <head> section holds information about the page — the title that appears in the browser tab, settings, and links to CSS files.
None of it appears on screen. It is instructions for the browser, not content for the user.
<body>
The <body> section holds everything the user actually sees — headings, paragraphs, images, buttons, forms.
All the tags you have learned so far belong inside <body>.
The picture
html
├── head ← instructions for the browser (not visible)
│ └── title, settings, stylesheet links
└── body ← everything the user sees
└── h1, p, img, a, button, form...
Head for the browser. Body for the user. Simple.
Challenge
Open your first.html in VSCode. Wrap everything you have already written inside the proper skeleton:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<!-- your existing tags go here -->
</body>
</html>
Save and refresh. Does everything still look the same? It should. You just gave it the frame it was always supposed to have.