0
0
HTMLmarkup~5 mins

Head and body sections in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The <head> and <body> sections organize your webpage. The head holds important info for the browser, and the body shows what users see.

When you want to add a title to your webpage that appears in the browser tab.
When you need to link a style sheet or add metadata like page description.
When you want to write the main content that visitors will read or interact with.
When you want to include scripts that run on your page.
When you want to separate behind-the-scenes info from visible content.
Syntax
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Metadata, title, links go here -->
</head>
<body>
  <!-- Visible content goes here -->
</body>
</html>

The <head> section is for information that helps the browser but is not shown directly on the page.

The <body> section contains everything the user sees and interacts with.

Examples
This sets the page title shown in the browser tab.
HTML
<head>
  <title>My Page</title>
</head>
This adds character encoding and links a CSS file for styling.
HTML
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
This shows a heading and paragraph visible on the page.
HTML
<body>
  <h1>Welcome!</h1>
  <p>This is the main content.</p>
</body>
Sample Program

This webpage has a head with metadata and a title, and a body with visible content including a heading and paragraph.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Page</title>
</head>
<body>
  <header>
    <h1>Hello, world!</h1>
  </header>
  <main>
    <p>This is a simple webpage with head and body sections.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always include the <meta charset="UTF-8"> tag in the head to support all characters.

The <title> tag inside the head is important for SEO and user experience.

Content inside the body is what users see and interact with on the page.

Summary

The <head> section holds page info for the browser, not visible content.

The <body> section contains all the visible parts of the webpage.

Separating head and body helps organize your webpage clearly.