The Difference Between Header vs Head in HTML: Element Guide 2024
The <head> element contains metadata that browsers and search engines read. The <header> element contains visible content like your logo and navigation. They sound similar but do completely different things.
Quick Comparison
If you remember nothing else: <head> is for machines, <header> is for humans.
What Is the HTML Head Element?
The <head> element sits at the top of your HTML document, between <html> and <body>. It contains information about the page that users never see directly.
Basic structure:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<meta name="description" content="Page description for search engines">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>Everything inside <head> helps the browser render the page correctly and helps search engines understand what the page is about.
What Goes Inside the Head Element
Title Tag
html
<title>Page Title - Site Name</title>This appears in browser tabs and search engine results. It is one of the most important elements for SEO. Keep it under 60 characters so it does not get cut off in search results.
Meta Tags
Meta tags provide information about the page:
html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page content">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<meta name="robots" content="index, follow">The description meta tag often appears in search results below your title. Write it to encourage clicks. For SEO strategies around meta content, our SEO newsletters guide covers resources that stay current with best practices.
Link Tags
Link tags connect external resources:
html
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<link rel="canonical" href="https://example.com/page">
<link rel="preconnect" href="https://fonts.googleapis.com">The canonical link tells search engines which version of a page is the "main" one. Important for avoiding duplicate content issues.
Script Tags
Scripts can go in the head or before the closing body tag:
html
<script src="analytics.js"></script>
<script src="app.js" defer></script>Using defer or async attributes prevents scripts from blocking page rendering. This improves load times.
Open Graph and Social Meta Tags
These control how your page appears when shared on social media:
html
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta name="twitter:card" content="summary_large_image">Without these, social platforms guess what to show. With them, you control the preview.
What Is the HTML Header Element?
The <header> element is a semantic HTML5 element for visible introductory content. It typically contains your site logo, main navigation, and sometimes a hero section or site tagline.
Basic structure:
html
<header>
<div class="logo">
<a href="/"><img src="logo.png" alt="Site Name"></a>
</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>Users see and interact with the header. It helps them navigate your site and understand where they are.
What Goes Inside the Header Element
Logo and Branding
Most sites put their logo in the header, usually linked to the homepage:
html
<header>
<a href="/" class="logo">
<img src="logo.svg" alt="Company Name">
</a>
</header>Navigation Menu
Primary navigation belongs in the header:
html
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>The aria-label attribute helps screen readers identify the navigation purpose.
Search Bar
If your site has search functionality, the header is a common location:
html
<header>
<form action="/search" method="get" role="search">
<input type="search" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>
</header>Call to Action Buttons
Headers often include prominent CTAs like "Sign Up" or "Get Started":
html
<header>
<nav>
<!-- Navigation items -->
</nav>
<div class="header-cta">
<a href="/login" class="btn-secondary">Log In</a>
<a href="/signup" class="btn-primary">Get Started</a>
</div>
</header>Multiple Headers on One Page
Unlike <head>, you can have multiple <header> elements on a page. Each section or article can have its own header.
html
<body>
<header>
<!-- Site-wide header with logo and main nav -->
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<p>By Author Name | January 15, 2024</p>
</header>
<p>Article content...</p>
</article>
<article>
<header>
<h1>Another Article</h1>
<p>By Different Author | January 14, 2024</p>
</header>
<p>More content...</p>
</article>
</main>
</body>
This semantic structure helps search engines and screen readers understand your content hierarchy.
Why the Distinction Matters for SEO
Search engines use <head> content to understand what your page is about:
Title tag affects rankings and click-through rate
Meta description influences click-through rate
Canonical tags prevent duplicate content issues
Structured data helps rich results
Search engines use <header> content for context:
Navigation links reveal site structure
Header text contributes to content understanding
Semantic markup improves accessibility signals
Getting both right matters for search performance. For more on building SEO-friendly sites, check our guide on creating backlinks and improving SEO.
Common Mistakes to Avoid
Putting visible content in head
Wrong:
html
<head>
<h1>Welcome to My Site</h1> <!-- This will not display correctly -->
</head>Right:
html
<body>
<header>
<h1>Welcome to My Site</h1>
</header>
</body>Putting metadata in header
Wrong:
html
<header>
<title>Page Title</title> <!-- This will not work -->
<meta name="description" content="..."> <!-- Neither will this -->
</header>Right:
html
<head>
<title>Page Title</title>
<meta name="description" content="...">
</head>Missing the head element entirely
Every HTML document needs a head element with at least a title:
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content -->
</body>
</html>Confusing header with h1
The <header> element is a container. The <h1> tag is a heading. They are different:
html
<header>
<h1>This is the main heading</h1>
<p>This is a tagline</p>
</header>HTML Document Structure Overview
Here is how all the structural elements fit together:
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata, invisible to users -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<meta name="description" content="Page description">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- Site header, visible -->
<nav><!-- Main navigation --></nav>
</header>
<main>
<!-- Primary page content -->
<article>
<header>
<!-- Article header -->
</header>
<!-- Article content -->
</article>
</main>
<aside>
<!-- Sidebar content -->
</aside>
<footer>
<!-- Site footer -->
</footer>
<script src="app.js"></script>
</body>
</html>
This semantic structure helps both users and machines understand your content.
Head Element for Email HTML
Email HTML is different from web HTML. The head element in emails has limitations.
Many email clients strip or ignore:
External stylesheets
JavaScript
Some meta tags
For email HTML, inline styles work more reliably:
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Subject</title>
<style>
/* Embedded styles as fallback */
</style>
</head>For more on email HTML, see our guides on HTML email template testing and responsive HTML email templates.
Accessibility Considerations
For the head element
Include language declaration:
html
<html lang="en">Set viewport for mobile accessibility:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">For the header element
Use semantic navigation:
html
<header>
<nav aria-label="Main navigation">
<!-- Links -->
</nav>
</header>Skip links help keyboard users:
html
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<!-- Header content -->
</header>
<main id="main-content">
<!-- Main content -->
</main>
</body>Accessibility affects SEO. Search engines increasingly factor user experience signals, including accessibility. For more on web standards, see our guide on the difference between websites and web applications.
Performance Optimization
In the head element
Preload critical resources:
html
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero.jpg" as="image">Preconnect to external domains:
html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">Defer non-critical scripts:
html
<script src="analytics.js" defer></script>In the header element
Optimize logo images:
Use SVG for logos when possible
Compress raster images
Specify width and height to prevent layout shift
Lazy load non-critical images:
html
<img src="logo.svg" alt="Logo" loading="lazy">Page speed affects both user experience and SEO rankings.
Modern Best Practices
Structured data in head
Add JSON-LD structured data for rich search results:
html
<head>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Company Name",
"url": "https://example.com",
"logo": "https://example.com/logo.png"
}
</script>
</head>Responsive header design
Headers need to work on all screen sizes. Common pattern:
html
<header>
<div class="logo"><!-- Logo --></div>
<button class="menu-toggle" aria-label="Toggle menu">
<!-- Hamburger icon -->
</button>
<nav class="main-nav">
<!-- Navigation links -->
</nav>
</header>Mobile navigation typically hides behind a hamburger menu that expands on tap.
HTML5 Semantic Elements Related to Header
Understanding the header element is easier when you know its siblings:
Using these elements correctly creates a logical document structure that benefits accessibility, SEO, and code maintainability.
For more on web development fundamentals, see our guide on email code basics.
Testing and Validation
Validate your HTML
Use the W3C Markup Validation Service to check for errors:
Missing required elements
Improperly nested tags
Invalid attributes
Check SEO elements
Tools like Google Search Console and Screaming Frog can audit:
Missing or duplicate title tags
Missing meta descriptions
Broken canonical links
Test accessibility
Screen readers and accessibility audit tools (like Lighthouse) can identify:
Missing alt text
Poor heading structure
Missing ARIA labels
For tracking how your pages perform, see our guide on B2B website metrics to track.
FAQs
What is the difference between head and header in HTML? The <head> element contains metadata like the title, meta tags, and links to stylesheets. It is not visible to users. The <header> element contains visible introductory content like logos and navigation menus.
Can I have multiple header elements on a page? Yes. You can have a main site header plus additional headers within articles or sections. Each <header> provides introductory content for its parent element.
Is the head element required in HTML? Technically, browsers will render pages without a head element, but you should always include one. At minimum, include a title tag for SEO and usability.
Where does the navigation go, head or header? Navigation goes in the <header> element (or a <nav> element within the body). The <head> element is only for metadata, not visible content.
Does the header element affect SEO? Yes. Content in the header contributes to how search engines understand your page. Navigation links reveal site structure. Heading tags within headers indicate content hierarchy.
What is the difference between header and h1?<header> is a container element for introductory content. <h1> is a heading element for the main title. You typically put an <h1> inside a <header>, but they serve different purposes.
Building websites or email templates? Inagiffy helps brands create content that works across every channel. See how we can help.