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.
Key Takeaways
What Is the HTML Head Element? — The<head>element sits at the top of your HTML document, between<html>and<body>.
What Goes Inside the Head Element
Title Tag
Meta Tags — Meta tags provide information about the page:
Link Tags — Link tags connect external resources:
Script Tags — Scripts can go in the head or before the closing body tag:
Quick Comparison
: Visible to users — No — Yes
: Location — Between<html>and<body> — Inside<body>
: Purpose — Metadata, SEO, scripts, styles — Introductory content, navigation
: How many per page — Exactly one — Multiple allowed
: Contains — Title, meta tags, links, scripts — Logo, nav menu, headings
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>
<!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>
<!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>
<!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>
<title>Page Title - Site Name</title>
<title>Page Title - Site Name</title>
<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">
<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">
<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">
<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">
<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">
<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">
<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 src="analytics.js"></script>
<script src="app.js" defer><
<script src="analytics.js"></script>
<script src="app.js" defer><
<script src="analytics.js"></script>
<script src="app.js" defer><
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">
<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">
<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">
<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="https://inagiffy.news/"><img src="logo.png" alt="Site Name"></a>
</div>
<nav>
<ul>
<li><a href="https://inagiffy.news/">Home</a></li>
<li><a href="https://inagiffy.news/about">About</a></li>
<li><a href="https://inagiffy.news/services">Services</a></li>
<li><a href="https://inagiffy.news/contact">Contact</a></li>
</ul>
</nav>
</header>
<header>
<div class="logo">
<a href="https://inagiffy.news/"><img src="logo.png" alt="Site Name"></a>
</div>
<nav>
<ul>
<li><a href="https://inagiffy.news/">Home</a></li>
<li><a href="https://inagiffy.news/about">About</a></li>
<li><a href="https://inagiffy.news/services">Services</a></li>
<li><a href="https://inagiffy.news/contact">Contact</a></li>
</ul>
</nav>
</header>
<header>
<div class="logo">
<a href="https://inagiffy.news/"><img src="logo.png" alt="Site Name"></a>
</div>
<nav>
<ul>
<li><a href="https://inagiffy.news/">Home</a></li>
<li><a href="https://inagiffy.news/about">About</a></li>
<li><a href="https://inagiffy.news/services">Services</a></li>
<li><a href="https://inagiffy.news/contact">Contact</a></li>
</ul>
</nav>
</header>
<header>
<div class="logo">
<a href="https://inagiffy.news/"><img src="logo.png" alt="Site Name"></a>
</div>
<nav>
<ul>
<li><a href="https://inagiffy.news/">Home</a></li>
<li><a href="https://inagiffy.news/about">About</a></li>
<li><a href="https://inagiffy.news/services">Services</a></li>
<li><a href="https://inagiffy.news/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="https://inagiffy.news/" class="logo">
<img src="logo.svg" alt="Company Name">
</a>
</header>
<header>
<a href="https://inagiffy.news/" class="logo">
<img src="logo.svg" alt="Company Name">
</a>
</header>
<header>
<a href="https://inagiffy.news/" class="logo">
<img src="logo.svg" alt="Company Name">
</a>
</header>
<header>
<a href="https://inagiffy.news/" class="logo">
<img src="logo.svg" alt="Company Name">
</a>
</header>
Navigation Menu
Primary navigation belongs in er:
Html
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="https://inagiffy.news/">Home</a></li>
<li><a href="https://inagiffy.news/products">Products</a></li>
<li><a href="https://inagiffy.news/about">About</a></li>
<li><a href="https://inagiffy.news/contact">Contact</a></li>
</ul>
</nav>
</header>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="https://inagiffy.news/">Home</a></li>
<li><a href="https://inagiffy.news/products">Products</a></li>
<li><a href="https://inagiffy.news/about">About</a></li>
<li><a href="https://inagiffy.news/contact">Contact</a></li>
</ul>
</nav>
</header>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="https://inagiffy.news/">Home</a></li>
<li><a href="https://inagiffy.news/products">Products</a></li>
<li><a href="https://inagiffy.news/about">About</a></li>
<li><a href="https://inagiffy.news/contact">Contact</a></li>
</ul>
</nav>
</header>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="https://inagiffy.news/">Home</a></li>
<li><a href="https://inagiffy.news/products">Products</a></li>
<li><a href="https://inagiffy.news/about">About</a></li>
<li><a href="https://inagiffy.news/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, er 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>
<header>
<form action="/search" method="get" role="search">
<input type="search" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>
</header>
<header>
<form action="/search" method="get" role="search">
<input type="search" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>
</header>
<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="https://inagiffy.news/login" class="btn-secondary">Log In</a>
<a href="https://inagiffy.news/signup" class="btn-primary">Get Started</a>
</div>
</header>
<header>
<nav>
<!-- Navigation items -->
</nav>
<div class="header-cta">
<a href="https://inagiffy.news/login" class="btn-secondary">Log In</a>
<a href="https://inagiffy.news/signup" class="btn-primary">Get Started</a>
</div>
</header>
<header>
<nav>
<!-- Navigation items -->
</nav>
<div class="header-cta">
<a href="https://inagiffy.news/login" class="btn-secondary">Log In</a>
<a href="https://inagiffy.news/signup" class="btn-primary">Get Started</a>
</div>
</header>
<header>
<nav>
<!-- Navigation items -->
</nav>
<div class="header-cta">
<a href="https://inagiffy.news/login" class="btn-secondary">Log In</a>
<a href="https://inagiffy.news/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>
<p><main><br><article><br><header><br><h1>Article Title</h1><br><p>By Author Name | January 15, 2025</p><br></header><br><p>Article content...</p><br></article></p>
<body>
<header>
<!-- Site-wide header with logo and main nav -->
</header>
<p><main><br><article><br><header><br><h1>Article Title</h1><br><p>By Author Name | January 15, 2025</p><br></header><br><p>Article content...</p><br></article></p>
<body>
<header>
<!-- Site-wide header with logo and main nav -->
</header>
<p><main><br><article><br><header><br><h1>Article Title</h1><br><p>By Author Name | January 15, 2025</p><br></header><br><p>Article content...</p><br></article></p>
<body>
<header>
<!-- Site-wide header with logo and main nav -->
</header>
<p><main><br><article><br><header><br><h1>Article Title</h1><br><p>By Author Name | January 15, 2025</p><br></header><br><p>Article content...</p><br></article></p>
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><br><h1>Welcome to My Site</h1> <!-- This will not display correctly --><br></head>
<head><br><h1>Welcome to My Site</h1> <!-- This will not display correctly --><br></head>
<head><br><h1>Welcome to My Site</h1> <!-- This will not display correctly --><br></head>
<head><br><h1>Welcome to My Site</h1> <!-- This will not display correctly --><br></head>
Right:
Html
<body><br><header><br><h1>Welcome to My Site</h1><br></header><br></body>
<body><br><header><br><h1>Welcome to My Site</h1><br></header><br></body>
<body><br><header><br><h1>Welcome to My Site</h1><br></header><br></body>
<body><br><header><br><h1>Welcome to My Site</h1><br></header><br></body>
Putting metadata in header
Wrong:
Html
<header><br><title>Page Title</title> <!-- This will not work --><br><meta name="description" content="..."> <!-- Neither will this --><br></header>
<header><br><title>Page Title</title> <!-- This will not work --><br><meta name="description" content="..."> <!-- Neither will this --><br></header>
<header><br><title>Page Title</title> <!-- This will not work --><br><meta name="description" content="..."> <!-- Neither will this --><br></header>
<header><br><title>Page Title</title> <!-- This will not work --><br><meta name="description" content="..."> <!-- Neither will this --><br></header>
Right:
Html
<head><br><title>Page Title</title><br><meta name="description" content="..."><br></head>
<head><br><title>Page Title</title><br><meta name="description" content="..."><br></head>
<head><br><title>Page Title</title><br><meta name="description" content="..."><br></head>
<head><br><title>Page Title</title><br><meta name="description" content="..."><br></head>
Missing the head element entirely
Every HTML document needs a head element with at least a title:
Html
<!DOCTYPE html><br><html><br><head><br><title>Page Title</title><br></head><br><body><br><!-- Content --><br></body><br></html>
<!DOCTYPE html><br><html><br><head><br><title>Page Title</title><br></head><br><body><br><!-- Content --><br></body><br></html>
<!DOCTYPE html><br><html><br><head><br><title>Page Title</title><br></head><br><body><br><!-- Content --><br></body><br></html>
<!DOCTYPE html><br><html><br><head><br><title>Page Title</title><br></head><br><body><br><!-- Content --><br></body><br></html>
Confusing header with h1
The <header> element is a container. The <h1> tag is a heading. They are different:
Html
<header><br><h1>This is the main heading</h1><br><p>This is a tagline</p><br></header>
<header><br><h1>This is the main heading</h1><br><p>This is a tagline</p><br></header>
<header><br><h1>This is the main heading</h1><br><p>This is a tagline</p><br></header>
<header><br><h1>This is the main heading</h1><br><p>This is a tagline</p><br></header>
HTML Document Structure Overview
Here is how all the structural elements fit together:
Html
<!DOCTYPE html><br><html lang="en"><br><head><br><!-- Metadata, invisible to users --><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Page Title</title><br><meta name="description" content="Page description"><br><link rel="stylesheet" href="styles.css"><br></head><br><body><br><header><br><!-- Site header, visible --><br><nav><!-- Main navigation --></nav><br></header><p></p>
<p><main><br><!-- Primary page content --><br><article><br><header><br><!-- Article header --><br></header><br><!-- Article content --><br></article><br></main></p>
<p><aside><br><!-- Sidebar content --><br></aside></p>
<p><footer><br><!-- Site footer --><br></footer></p>
<!DOCTYPE html><br><html lang="en"><br><head><br><!-- Metadata, invisible to users --><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Page Title</title><br><meta name="description" content="Page description"><br><link rel="stylesheet" href="styles.css"><br></head><br><body><br><header><br><!-- Site header, visible --><br><nav><!-- Main navigation --></nav><br></header><p></p>
<p><main><br><!-- Primary page content --><br><article><br><header><br><!-- Article header --><br></header><br><!-- Article content --><br></article><br></main></p>
<p><aside><br><!-- Sidebar content --><br></aside></p>
<p><footer><br><!-- Site footer --><br></footer></p>
<!DOCTYPE html><br><html lang="en"><br><head><br><!-- Metadata, invisible to users --><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Page Title</title><br><meta name="description" content="Page description"><br><link rel="stylesheet" href="styles.css"><br></head><br><body><br><header><br><!-- Site header, visible --><br><nav><!-- Main navigation --></nav><br></header><p></p>
<p><main><br><!-- Primary page content --><br><article><br><header><br><!-- Article header --><br></header><br><!-- Article content --><br></article><br></main></p>
<p><aside><br><!-- Sidebar content --><br></aside></p>
<p><footer><br><!-- Site footer --><br></footer></p>
<!DOCTYPE html><br><html lang="en"><br><head><br><!-- Metadata, invisible to users --><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Page Title</title><br><meta name="description" content="Page description"><br><link rel="stylesheet" href="styles.css"><br></head><br><body><br><header><br><!-- Site header, visible --><br><nav><!-- Main navigation --></nav><br></header><p></p>
<p><main><br><!-- Primary page content --><br><article><br><header><br><!-- Article header --><br></header><br><!-- Article content --><br></article><br></main></p>
<p><aside><br><!-- Sidebar content --><br></aside></p>
<p><footer><br><!-- Site footer --><br></footer></p>
This semantic structure helps both users and machines understand your content.
Head Element for Email HTML
Email HTML is different from web HTML. 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><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Email Subject</title><br><style><br>/* Embedded styles as fallback */<br></style><br></head>
<head><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Email Subject</title><br><style><br>/* Embedded styles as fallback */<br></style><br></head>
<head><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Email Subject</title><br><style><br>/* Embedded styles as fallback */<br></style><br></head>
<head><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Email Subject</title><br><style><br>/* Embedded styles as fallback */<br></style><br></head>
Accessibility Considerations
For the head element
Include language declaration:
Html
Set viewport for mobile accessibility:
Html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For the header element
Use semantic navigation:
Html
<header><br><nav aria-label="Main navigation"><br><!-- Links --><br></nav><br></header>
<header><br><nav aria-label="Main navigation"><br><!-- Links --><br></nav><br></header>
<header><br><nav aria-label="Main navigation"><br><!-- Links --><br></nav><br></header>
<header><br><nav aria-label="Main navigation"><br><!-- Links --><br></nav><br></header>
Skip links help keyboard users:
Html
<body><br><a href="#main-content" class="skip-link">Skip to main content</a><br><header><br><!-- Header content --><br></header><br><main id="main-content"><br><!-- Main content --><br></main><br></body>
<body><br><a href="#main-content" class="skip-link">Skip to main content</a><br><header><br><!-- Header content --><br></header><br><main id="main-content"><br><!-- Main content --><br></main><br></body>
<body><br><a href="#main-content" class="skip-link">Skip to main content</a><br><header><br><!-- Header content --><br></header><br><main id="main-content"><br><!-- Main content --><br></main><br></body>
<body><br><a href="#main-content" class="skip-link">Skip to main content</a><br><header><br><!-- Header content --><br></header><br><main id="main-content"><br><!-- Main content --><br></main><br></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"><br><link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="critical.css" as="style"><br><link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="critical.css" as="style"><br><link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="critical.css" as="style"><br><link rel="preload" href="hero.jpg" as="image">
Preconnect to external domains:
Html
<link rel="preconnect" href="<a href="https:
<link rel="preconnect" href="<a href="https:
<link rel="preconnect" href="<a href="https:
<link rel="preconnect" href="<a href="https:
Defer non-critical scripts:
Html
<script src="analytics.js" defer></script>
<script src="analytics.js" defer></script>
<script src="analytics.js" defer></script>
<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">
<img src="logo.svg" alt="Logo" loading="lazy">
<img src="logo.svg" alt="Logo" loading="lazy">
<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><br><script type="application/ld+json"><br>{<br>"@context": "<a href="https://schema.org" data-framer-link="Link:{"url":"https://schema.org","type":"url"}">https://schema.org</a>",<br>"@type": "Organization",<br>"name": "Company Name",<br>"url": "<a href="https://example.com" data-framer-link="Link:{"url":"https://example.com","type":"url"}">https://example.com</a>",<br>"logo": "<a href="https://example.com/logo.png" data-framer-link="Link:{"url":"https://example.com/logo.png","type":"url"}">https://example.com/logo.png</a>"<br>}<br></script><br></head><head><br><script type="application/ld+json"><br>{<br>"@context": "<a href="https://schema.org" data-framer-link="Link:{"url":"https://schema.org","type":"url"}">https://schema.org</a>",<br>"@type": "Organization",<br>"name": "Company Name",<br>"url": "<a href="https://example.com" data-framer-link="Link:{"url":"https://example.com","type":"url"}">https://example.com</a>",<br>"logo": "<a href="https://example.com/logo.png" data-framer-link="Link:{"url":"https://example.com/logo.png","type":"url"}">https://example.com/logo.png</a>"<br>}<br></script><br></head><head><br><script type="application/ld+json"><br>{<br>"@context": "<a href="https://schema.org" data-framer-link="Link:{"url":"https://schema.org","type":"url"}">https://schema.org</a>",<br>"@type": "Organization",<br>"name": "Company Name",<br>"url": "<a href="https://example.com" data-framer-link="Link:{"url":"https://example.com","type":"url"}">https://example.com</a>",<br>"logo": "<a href="https://example.com/logo.png" data-framer-link="Link:{"url":"https://example.com/logo.png","type":"url"}">https://example.com/logo.png</a>"<br>}<br></script><br></head><head><br><script type="application/ld+json"><br>{<br>"@context": "<a href="https://schema.org" data-framer-link="Link:{"url":"https://schema.org","type":"url"}">https://schema.org</a>",<br>"@type": "Organization",<br>"name": "Company Name",<br>"url": "<a href="https://example.com" data-framer-link="Link:{"url":"https://example.com","type":"url"}">https://example.com</a>",<br>"logo": "<a href="https://example.com/logo.png" data-framer-link="Link:{"url":"https://example.com/logo.png","type":"url"}">https://example.com/logo.png</a>"<br>}<br></script><br></head>Responsive header design
Headers need to work on all screen sizes. Common pattern:
Html
<header><br><div class="logo"><!-- Logo --></div><br><button class="menu-toggle" aria-label="Toggle menu"><br><!-- Hamburger icon --><br></button><br><nav class="main-nav"><br><!-- Navigation links --><br></nav><br></header>
<header><br><div class="logo"><!-- Logo --></div><br><button class="menu-toggle" aria-label="Toggle menu"><br><!-- Hamburger icon --><br></button><br><nav class="main-nav"><br><!-- Navigation links --><br></nav><br></header>
<header><br><div class="logo"><!-- Logo --></div><br><button class="menu-toggle" aria-label="Toggle menu"><br><!-- Hamburger icon --><br></button><br><nav class="main-nav"><br><!-- Navigation links --><br></nav><br></header>
<header><br><div class="logo"><!-- Logo --></div><br><button class="menu-toggle" aria-label="Toggle menu"><br><!-- Hamburger icon --><br></button><br><nav class="main-nav"><br><!-- Navigation links --><br></nav><br></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:
Element: <header> — Introductory content, navigation
Element: <nav> — Navigation links
Element: <main> — Primary page content
Element: <article> — Self-contained content
Element: <section> — Thematic grouping
Element: <aside> — Tangentially related content
Element: <footer> — Footer content
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 er 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.
Frequently Asked Questions
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.
What are meta tags?
Meta tags provide information about the page:
What are link tags?
Link tags connect external resources:
What are script tags?
Scripts can go in or before the closing body tag:
What are open graph and social meta tags?
These control how your page appears when shared on social media:
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.
Inagiffy — Premium newsletter growth for brands that take email seriously. Strategy, design, and delivery handled for you. See what we do.
Related Articles