Difference between HTML head and body

What is <head> in HTML?

The <head> tag contains meta-information about the webpage — things like the title, character encoding, links to CSS, or scripts. It doesn’t show direct content on the webpage.

What is <body> in HTML?

The <body> tag contains all the visible content — like headings, paragraphs, images, buttons, etc. This is what the user sees in the browser.

Full Example: Head vs Body in HTML

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <style>
      body {
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This content is inside the body tag.</p>
  </body>
</html>

Breakdown: Head vs Body

Feature	<head></head>	<body></body>
Visibility	Not visible to users	Visible content
Purpose	Provides meta and config info	Holds content like text, images
Common Tags	<title>, <meta>, <style>, <link>	<h1>, <p>, <img>, <div></div>
Affects UI?	Indirectly (CSS, JavaScript)	Directly (what user sees)

Example: Only <head> Tag

<head>
  <title>Head Only Page</title>
</head>

Example: Only <body> Tag

<body>
  <h2>This is the Body Content</h2>
</body>