Up to this point, we’ve been writing bits of HTML directly—like <p>Hello</p>.
That works fine, but real web pages need a proper structure. Without it, browsers might still show your content, but it’s messy and not professional.
Think of it like writing an essay: you can just scribble sentences, but it’s always better when you have a title, introduction, and clear sections. HTML works the same way.
The Skeleton of Every HTML File
Every proper HTML page has the same basic skeleton:
<!DOCTYPE html>
<html>
<head>
<!-- Information about the page (not shown directly to users) -->
</head>
<body>
<!-- The actual content users see -->
</body>
</html>Let’s break it down:
<!DOCTYPE html> → Tells the browser “this is an HTML5 page.”
<html>...</html> → Wraps the entire document. Everything lives inside it.
`<head>…</head> → Holds information about the page (title, CSS, metadata). Users don’t see this directly.
<body>...</body> → The main content users see—headings, paragraphs, images, tables, forms, etc.
A Minimal Example
Here’s the smallest proper HTML page you can make:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>What happens here:
The title shows up in the browser tab, not on the page itself.
The paragraph (<p>) shows up on the page.
Why the <head> Matters
Even though the <head> isn’t visible, it’s very important. You can put things like:
The page title (<title>)
A link to CSS for styling
Metadata (description, keywords, author) that search engines read
Favicon (the little icon in the browser tab)
<head>
<title>Scarlett Johansson Fan Page</title>
<meta charset="UTF-8" />
<meta name="description" content="A simple practice page about Scarlett Johansson." />
<link rel="stylesheet" href="styles.css" />
</head>Why the <body> Matters
Everything the user actually sees goes here:
Headings (<h1> … <h6>)
Paragraphs (<p>)
Images (<img>)
Links (<a>)
Lists, tables, forms, etc.
<body>
<h1>Scarlett Johansson</h1>
<p>American actress and singer.</p>
<img src="scarlett.jpg" alt="Scarlett Johansson photo" width="200" />
</body>Step-by-Step Explanation
1. <!DOCTYPE html>
This line tells the browser:
“Hey, this file is written in HTML5.”
Without it, browsers might guess, and sometimes they’ll get it wrong. Always include this at the very top.
2. <html lang=”en”>
This wraps the entire page.
lang="en"tells the browser (and screen readers, and Google) that the page is in English.- If your site is in Spanish, you’d write
<html lang="es">.
3. <head>…</head>
This section is like the “settings” of your page. Users don’t see it directly, but it’s crucial.
Inside the <head>, we added:
<meta charset="UTF-8">
- This tells the browser what character set to use.
UTF-8supports pretty much every language (English, Spanish, Chinese, emojis 😊).- Without it, weird characters might show up as � instead of letters.
- This tells the browser what character set to use.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- This makes your page mobile-friendly.
- Without it, your site could look squished or zoomed out on phones.
- This makes your page mobile-friendly.
<meta name="description" content="...">
- A short description of your page.
- Search engines (Google, Bing) use this in search results.
- Example: if someone searches “Scarlett Johansson,” your description might appear under the link.
- A short description of your page.
<meta name="author" content="Your Name">
- Optional. Just credits you as the author of the page.
- Optional. Just credits you as the author of the page.
<title>Scarlett Johansson</title>
- This shows up in the browser tab.
- It’s also what search engines display as the clickable headline in results.
- This shows up in the browser tab.
What This Means for a Newbie
You can think of it like this:
DOCTYPE= “I’m writing in HTML5.”- HTML tag = the box for your whole page.
- Head = behind-the-scenes info (title, description, mobile support, author, links to CSS/JS).
- Body = the actual content people see (text, images, videos, etc.).