Two similarly-named, completely unrelated elements. <head> holds invisible page metadata. <header> holds visible introductory content. Mixing them up is one of the most common beginner errors.
Side by Side
| <head> | <header> | |
|---|---|---|
| Visible to the user? | No — never rendered as page content | Yes — normal visible content |
| Where it goes | Once, directly inside <html>, before <body> | Inside <body> — can appear multiple times |
| What it contains | Title, meta tags, links to CSS/fonts, scripts | Logo, page/section title, navigation |
| How many per page | Exactly one | Zero, one, or several (one per section that needs one) |
Example — Both, Correctly Used
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodingNow</title>
</head>
<body>
<header>
<h1>CodingNow</h1>
</header>
...
</body>
</html>Common Mistakes
- Putting a site logo or visible heading inside
<head>— it simply won't display - Trying to add a
<title>or<meta>tag inside<header>instead of<head> - Assuming they're just capitalization/naming variants of the same idea
Interview Relevance
A quick, easy-to-answer-correctly question that still trips up a surprising number of beginners in practice — good to have a crisp, confident answer ready.
Practice Question
Identify the error: a developer put <meta name="description" content="..."> inside the page's <header> element. Explain the fix.
