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 thedeferattribute).
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>.