Module 1: First Page · Lesson 5 of 6
HTML Head vs Body: What Goes Where and Why
All lessons in Module 1
Goal: Learn what goes in the head and what goes in the body.
Learn
A page has two parts. The head is backstage: information about the page, called metadata, such as the <title> on the tab and the character encoding. Visitors never see it in the page itself, and the HTML standard defines exactly which elements the head may contain (opens in a new tab). The body is the stage. Every heading, paragraph and picture the visitor sees goes inside <body>.
Put visible content in the head and the browser fixes it without telling you. It ends the head early and starts the body. The page may look fine, but your source code is still wrong, and every other reader of that code (search engines, validators, you in six months) gets a muddled picture. Write it correctly and don't count on the browser to tidy up. The HTML best practices guide collects more habits like this.
The short version
- The head holds metadata, information about the page such as the title and character encoding. Visitors don't see it in the page.
- The body holds everything visitors see: headings, paragraphs, images and links.
- A page has exactly one head and one body, in that order.
- Browsers silently repair visible content placed in the head, so a page can look right while its source code is wrong.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Backstage: you see this on the tab</title>
</head>
<body>
<h1>On stage</h1>
<p>You see this in the page.</p>
</body>
</html>Your task
Someone put the weekend plans backstage. Fix the page:
- Move the
<h1>and both<p>lines out of the head and into the body. - Change the title from
UntitledtoWeekend Plans.
The preview already looks right, by the way. That's the browser hiding the mistake, and it's exactly how this bug slips past people.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<head>
<meta charset="utf-8">
</head>
<body>
<title>Weekend Plans</title>
<h1>Weekend Plans</h1>
</body>Right
<head>
<meta charset="utf-8">
<title>Weekend Plans</title>
</head>
<body>
<h1>Weekend Plans</h1>
</body>The title is metadata and belongs in the head. In the body it is invalid, even if the tab text still shows up.
Wrong
<body>
<h1>Weekend Plans</h1>
</body>
<body>
<p>Sunday: bike ride.</p>
</body>Right
<body>
<h1>Weekend Plans</h1>
<p>Sunday: bike ride.</p>
</body>A page has only one body. The browser ignores the second pair of body tags, so keep all the visible content in a single body.
Go deeper
On a real website the head is usually longer than you'd expect. Next to the title and charset you will typically find a viewport meta tag for phones, a <meta name="description"> summary, <link rel="stylesheet"> for CSS, <link rel="icon"> for the little favicon on the tab, and Open Graph (opens in a new tab) tags such as <meta property="og:title">, which control the preview card when someone shares your link on social media.
Search engines read the head carefully. The title usually becomes the headline of your search result, and the description is often used for the snippet text under it (opens in a new tab). Neither shows up on your page, so people forget them. Check both before you publish.
Order in the head affects speed. The browser reads the head before it draws the body, so a large script there can hold up the whole page. You will learn the fix, the defer attribute, in Linking CSS and JavaScript.
View Page Source shows the file exactly as you wrote it. Inspect shows the repaired version the browser built. Put the two side by side and content hiding in the wrong place stands out fast.
Frequently asked questions
What goes in the head section of an HTML page?
Only information about the page: the <title>, <meta> tags such as the character encoding, viewport and description, <link> tags for stylesheets and the favicon, and scripts. Nothing in the head is displayed inside the page itself, although the title appears on the browser tab. Everything visitors read goes in the body. To draft that body content visually, try an online editor such as HTML5 Editor (opens in a new tab), then copy the clean source it produces.
What is the difference between head and header in HTML?
Is the title tag the same as the h1?
No. <title> lives in the head and appears on the browser tab, in bookmarks and usually as the clickable headline in search results. <h1> is the visible main heading in the body. They often say similar things, but the title can be shorter or add the site name, for example Pancake Recipes - Sam's Kitchen.