Episode 5 of 17

Head and Body Tag

Understand the difference between the head and body sections of an HTML document.

Head and Body Tag

Every HTML document is divided into two main sections: the <head> and the <body>. Understanding what goes where is essential.

The <head> Section

The <head> contains metadata — information about the page that is not displayed on the page itself.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A page about HTML">
    <title>My Page Title</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
</head>

Common <head> Elements

Element	Purpose
`<title>`	Sets the browser tab title and search engine title
`<meta charset>`	Defines character encoding (always use UTF-8)
`<meta name="viewport">`	Makes the page responsive on mobile
`<meta name="description">`	Page description for search engines (SEO)
`<link rel="stylesheet">`	Links an external CSS file
`<link rel="icon">`	Sets the favicon (icon in the browser tab)
`<script>`	Links JavaScript files (can also be in body)

The <body> Section

The <body> contains everything that appears on the page — all visible content:

<body>
    <h1>Welcome to My Website</h1>
    <p>This paragraph is visible to users.</p>
    <img src="photo.jpg" alt="A photo">
    <a href="about.html">About Us</a>
</body>

What Goes Where?

Content Type	Location
Page title	`<head>`
CSS links	`<head>`
Meta descriptions (SEO)	`<head>`
Headings, paragraphs, text	`<body>`
Images, links, buttons	`<body>`
Navigation menus	`<body>`
JavaScript (usually)	Bottom of `<body>`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML basics">
    <title>HTML Basics</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>HTML Basics</h1>
    <p>Learning the head and body tags.</p>
    <script src="script.js"></script>
</body>
</html>

Key Takeaways

The <head> holds metadata — not visible to users
The <body> holds all visible page content
Always include <meta charset="UTF-8"> and the viewport meta tag
The <title> tag is important for SEO and user experience
CSS goes in the <head>; JavaScript usually goes at the bottom of <body>