Episode 5 of 17

Know Your Head from Your Body Tags

Understand the difference between head and body in HTML. Learn what goes in each section and why it matters for your web pages.

Every HTML page has two main sections: the <head> and the <body>. Understanding what goes where is essential.

The <head> Section

The head contains invisible information — metadata that browsers and search engines read but users don't see:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="My awesome website">
    <title>Page Title (shown in browser tab)</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
</head>

What Goes in the Head

<title> — Browser tab title + search engine title
<meta charset> — Character encoding (always UTF-8)
<meta viewport> — Mobile responsiveness
<meta description> — Search engine snippet
<link> — CSS files, favicon, fonts
<script> — JavaScript files

The <body> Section

The body contains everything the user sees:

<body>
    <h1>Welcome to My Site</h1>
    <p>This is visible content.</p>
    <img src="photo.jpg" alt="A photo">
    <a href="/about">About Me</a>
</body>

Quick Rule

Head = for the browser. Body = for the user. If you can see it on the page, it belongs in the body. If it's configuration or metadata, it goes in the head.