devnotes.

Head vs Body: What Goes Where

A common source of confusion for beginners is deciding whether something belongs in <head> or <body>. Here's a practical checklist.

Belongs in <head>:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Learn HTML from scratch">
  <title>HTML Fundamentals</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
</head>
  • <title> — shows in the browser tab and search results.
  • <meta> tags — character set, viewport, SEO description, social preview data.
  • <link> — connects external CSS stylesheets and icons.
  • <script> tags that don't need to run immediately (often placed here with the defer attribute).

Belongs in <body>:

<body>
  <header>...</header>
  <main>
    <h1>Page Heading</h1>
    <p>Paragraph content...</p>
    <img src="photo.jpg" alt="Description">
  </main>
  <footer>...</footer>
</body>
  • Headings, paragraphs, images, links, lists, forms, tables — anything a visitor should see or interact with.
  • <script> tags placed at the very end of <body> (a common pattern so scripts run after the page content has loaded).

A simple rule of thumb: if removing the tag would change what a search engine or browser knows about the page, it goes in <head>. If removing it would change what a visitor sees, it goes in <body>.