By the end of this lesson, you will clearly distinguish between the <head> element and the <header> element in HTML, understanding their distinct roles, locations, and purposes within a document.
What it is
The confusion arises because both elements start with "head," but they serve entirely different functions. The <head> element is a container for metadata (data about the data) and links to external resources like stylesheets or scripts. It is not rendered on the screen. In contrast, the <header> element represents introductory content or navigational aids for its nearest ancestor sectioning content or sectioning root element. It is visible to the user and typically contains logos, titles, or navigation menus.
Mental Model: Think of <head> as the "brain" or configuration file of the page (invisible), while <header> is the "face" or banner at the top of the visible content area.
Why it matters
- Semantic Correctness: Using the wrong element breaks accessibility tools and search engine optimization (SEO).
- Rendering Behavior: Content placed inside
<head>that should be visible will disappear from the browser view. - Structure Clarity: Proper usage helps developers quickly understand where metadata ends and visual content begins.
- Validation: Browsers and validators may flag misplaced elements, leading to unpredictable rendering quirks.
Syntax or steps
The <head> element must appear immediately after the opening <html> tag and before the <body> tag. It cannot contain visible text meant for the user interface.
The <header> element can appear multiple times within a document, usually inside the <body>. It often sits at the beginning of a <section>, <article>, or directly under <body>.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Site</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<p>This is the main content.</p>
</main>
</body>
</html>Explanation:
1. The <head> block defines the character set, page title, and CSS link. None of this text appears on the webpage itself.
2. The <body> starts the visible area.
3. Inside the body, the <header> contains an <h1> and navigation links. These are rendered visibly at the top of the page.
Common mistakes
- Placing visible text in
<head>: If you put a paragraph inside<head>, it will not display. Move it to<body>. - Using
<header>for metadata: Do not try to define page titles or meta tags inside a<header>element. They belong in<head>. - Assuming one
<header>per page: You can have multiple<header>elements if you have multiple sections or articles, each with its own intro content. - Nesting incorrectly: Never place
<header>inside<head>. They are siblings in the DOM tree structure relative to<html>.
When to use it
| Feature | <head> |
<header> |
|---|---|---|
| Visibility | Invisible to users | Visible to users |
| Purpose | Metadata, links, scripts | Introductory content, nav |
| Location | Before <body> |
Inside <body> |
| Frequency | Exactly once per document | Multiple times allowed |
Practice
Guided Exercise: Create a simple HTML file. Add a <title> saying "Test Page" inside the correct element. Then, add a visible heading saying "Hello World" inside the correct element.
Challenge: Write a snippet where you mistakenly put the <title> inside the <header>. Observe what happens in the browser tab versus the page content. Fix it by moving the <title> back to <head>.
Quick check
Question: Where does the <meta charset="UTF-8"> tag belong?
Answer: Inside the <head> element.
Summary
Remember: <head> handles invisible setup and metadata, while <header> handles visible introductory content. Keeping them separate ensures your website renders correctly and remains accessible.