Head vs Body: Understanding HTML Document Sections
If you’re just starting with HTML, the terms <head> and <body> can feel confusing.
What goes where? And what happens if you mix them up?
In this beginner-friendly guide, you’ll learn:
- What the
<head>and<body>sections are - What belongs in each one (with examples)
- How to build a simple, well-structured HTML page
By the end, you’ll be able to create a basic web page with a solid foundation.
Step 1: See the big picture of an HTML page
Every HTML page has a basic structure. Think of it like a book:
- The cover info (title, author, etc.) is like the
<head> - The actual content (chapters, text, images) is like the
<body>
Here’s the simplest version of a complete HTML page:
<!DOCTYPE html> <!-- Tells the browser this is an HTML5 document -->
<html lang="en"> <!-- The root element of the page -->
<head>
<meta charset="UTF-8"> <!-- Sets the character encoding -->
<title>My First Page</title> <!-- The text shown in the browser tab -->
</head>
<body>
<h1>Hello, world!</h1> <!-- Visible heading on the page -->
<p>This is my first web page.</p> <!-- Visible paragraph on the page -->
</body>
</html>
What you’ll see in the browser:
- In the tab at the top:
My First Page(this comes from the<title>tag in the head) - On the page itself:
Hello, world!and the paragraph (this comes from the body)
Key idea
<head>: information about the page<body>: the content on the page
Step 2: Understand the <head> section
The <head> section is not visible on the page.
It tells the browser and search engines important things about your site.
Common things you put inside <head>:
- The page title
- Character set (like UTF-8)
- Links to CSS (styling) files
- Meta tags (page description, keywords, etc.)
Here’s an example of a slightly richer <head>:
<head>
<!-- Sets the character encoding so special characters display correctly -->
<meta charset="UTF-8">
<!-- Controls how the page scales on phones and tablets -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The text shown in the browser tab or window title -->
<title>My Awesome HTML Page</title>
<!-- A short description for search engines and social media -->
<meta name="description" content="A simple example page to learn HTML head and body sections.">
<!-- A link to a CSS (styling) file (don’t worry if you don’t know CSS yet) -->
<link rel="stylesheet" href="styles.css">
</head>
You won’t see any of this content directly on the page. But it matters a lot for how your page behaves, looks, and appears in searches.
Try it yourself
- Create a new file called
head-example.html. - Paste the full HTML structure from Step 1.
- Change the
<title>text and reload the page in your browser.
Watch how only the tab text changes, not the content on the page.
This is your first proof that the <head> controls information, not content.
Step 3: Understand the <body> section
The <body> is where all visible content goes.
If you can see it on the page, it should be inside the <body>.
Common things in <body>:
- Text (headings, paragraphs)
- Images
- Links and buttons
- Lists
- Forms
Here’s a basic example:
<body>
<h1>My First Website</h1> <!-- Big main heading -->
<p>Welcome to my website. I am learning HTML!</p> <!-- A paragraph of text -->
<h2>Things I like:</h2> <!-- Smaller subheading -->
<ul>
<li>Coding</li>
<li>Coffee</li>
<li>Music</li>
</ul>
<a href="https://www.example.com">Visit Example.com</a> <!-- A clickable link -->
</body>
What you’ll see in the browser:
- A main heading: My First Website
- A paragraph welcoming the visitor
- A bulleted list of three items
- A clickable link (blue, underlined by default)
All of this is visible and interactive, so it belongs in the <body>.
Quick rule to remember
Ask yourself: Should the visitor see or interact with this?
- If yes → put it in
<body> - If no (it’s just information about the page) → put it in
<head>
Step 4: Put it all together in one clean file
Let’s build a simple, well-structured page that uses both <head> and <body> properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Learning Journal</title>
<meta name="description" content="A simple page where I document my HTML learning journey.">
</head>
<body>
<header>
<h1>My Learning Journal</h1>
<p>Tracking my progress as I learn HTML.</p>
</header>
<main>
<section>
<h2>Day 1: Understanding Head vs Body</h2>
<p>Today I learned the difference between the head and body sections in HTML.</p>
</section>
<section>
<h2>What I Learned</h2>
<ul>
<li>The head contains information about the page.</li>
<li>The body contains everything the user sees.</li>
<li>The title tag text shows in the browser tab.</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 My Learning Journal</p>
</footer>
</body>
</html>
What’s happening here?
- The
<head>sets up the page’s title, character set, description, and mobile behavior. - The
<body>uses<header>,<main>, and<footer>to organize visible content. - Everything visitors can read is inside
<body>.
Try it yourself
- Save this code as
journal.html. - Open it in your browser.
- Change the text in
<title>and refresh. - Change the text in
<h1>and refresh.
You’ll see that changing <title> affects the tab, while changing <h1> affects the page content.
That’s the head vs body difference in action.
Step 5: Common mistakes (and how to avoid them)
Mistake 1: Putting visible content in the <head>
Example of what not to do:
<head>
<title>Oops</title>
<h1>This should not be here</h1> <!-- Wrong: this is visible content -->
</head>
Headings, paragraphs, images, and buttons should always be in the <body>.
Browsers may try to fix this for you, but the result can be unpredictable.
Mistake 2: Forgetting the <head> entirely
This might work in some cases, but you lose:
- A proper page title
- Good behavior on mobile devices
- Helpful info for search engines
Even for simple practice files, it’s good habit to include a basic <head>.
Here’s a minimal but correct starter template you can reuse:
<!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>
</head>
<body>
<!-- Your visible content goes here -->
</body>
</html>
Step 6: Experiment and build confidence
You learn HTML best by tinkering. Here are some simple experiments you can try right now:
Experiment 1: Change the title and heading
- In your file, set the
<title>to one thing (for example,Experiment Page). - Set the
<h1>in the body to something different (for example,Hello Visitor!).
Observe:
- The tab shows
Experiment Page. - The page shows
Hello Visitor!.
Experiment 2: Add a description
- In the
<head>, add a<meta name="description" ...>tag. - For now, you won’t see it in the browser, but tools like search engines use it.
This helps you get used to the idea that not everything you write in HTML is visible, but it can still be important.
Quick recap: Key takeaways
- Every HTML page is split into two main sections:
<head>and<body>. - The
<head>holds information about the page: title, meta tags, styles, and more. - The
<body>holds everything the user can see and interact with on the page. - Use the
<title>tag in the head to control the browser tab text. - Put only visible content (headings, paragraphs, images, links, etc.) in the body.
- Start with a simple template and experiment by changing one thing at a time.
Learning HTML is a journey, and understanding head vs body is a big step. Celebrate that you now know how to structure a real web page—and when you’re ready, your next step can be learning how to style it with CSS or add interactivity with JavaScript.
