← Back to all tutorials
HTML Tutorial for BeginnersEpisode 5

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

ElementPurpose
<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 TypeLocation
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>