HtmlConceptBeginner · 3 min read

What is Head and Body in HTML: Explanation and Example

In HTML, the <head> contains information about the webpage like its title and links to styles, while the <body> holds the visible content users see in the browser. The <head> is for setup and metadata, and the <body> is for the actual page content.

⚙️

How It Works

Think of an HTML page like a book. The <head> is like the book's cover and table of contents. It holds important details about the page such as the title shown in the browser tab, links to stylesheets that control how the page looks, and scripts that add functionality. This information helps the browser prepare the page but is not shown directly to the reader.

The <body> is like the pages inside the book where the story is written. It contains all the text, images, buttons, and other elements that users interact with and see on the screen. Without the <body>, the page would have no visible content.

💻

Example

This simple HTML example shows the <head> with a title and the <body> with a heading and paragraph visible on the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Sample Page</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is the visible content inside the body.</p>
</body>
</html>

Output

Welcome to My Page This is the visible content inside the body.

🎯

When to Use

Every HTML page should have both a <head> and a <body>. Use the <head> to add page titles, connect stylesheets, add metadata for search engines, or include scripts that run before the page loads. Use the <body> to put all the content you want visitors to see and interact with, like text, images, and buttons.

For example, if you want to change the page title that appears in the browser tab, you edit the <title> inside the <head>. If you want to add a paragraph or image on the page, you put it inside the <body>.

✅

Key Points

The <head> holds metadata and setup info not shown directly on the page.
The <body> contains all visible content users see and interact with.
Both are required parts of a well-structured HTML document.
Content in <head> helps browsers and search engines understand the page.
Content in <body> creates the actual webpage experience.

✅

Key Takeaways

The contains page info and setup, not visible content.

The holds all the visible parts of the webpage.

Both and are essential for every HTML page.

Use for titles, styles, and metadata.

Use for text, images, and interactive content.