<header> vs <head>
<head> is an invisible section holding the page’s metadata, one per document. <header> is a visible introductory element, and a page can have several.
Side-by-side comparison
#Visible on the page
- <header>
- Yes, it’s visible content
- <head>
- No, it’s metadata
Number per document or page
- <header>
- Can be several: for the page and for articles
- <head>
- Exactly one, in the whole document
Place in the document
- <header>
- Inside
<body>, at the start of a page or section - <head>
- First child of
<html>, before<body>
Typical content
- <header>
- Logo, navigation, title, publish date
- <head>
<title>,<meta>,<link>,<style>,<script>
Role for assistive technology
- <header>
- A "banner" landmark (at the page level)
- <head>
- None, invisible to the user
Example
#<head>
<meta charset="utf-8">
<title>HTML course</title>
</head>Definition and usage
#<head> stores the document’s metadata: <title>, <meta>, <link>, <style> and <script>. None of this displays directly on the page. It’s the first child of <html>, always before <body>, and there’s exactly one per document.
<header> is a visible, rendered element: at the page level it’s usually a logo, the site name and the main navigation, while inside an <article> or a <section> it’s a title, a publish date or an author. A page can have multiple <header> elements, one for each section.
The rule is simple: everything the browser needs before it starts displaying the page (the tab title, the encoding, the stylesheets) goes into <head>. Everything a visitor sees at the start of a page or a section goes into <header>. Their similar names are the only reason they’re easy to confuse.
Syntax
#<head>
<title>...</title>
</head>
<header>
...
</header>More examples
#<header>
<a href="/">CodeWorlds</a>
<nav aria-label="Main"><a href="/courses">Courses</a></nav>
</header><article>
<header>
<h2>Flexbox in 10 minutes</h2>
</header>
<p>Flexbox lays out elements along one dimension.</p>
</article>Good practices
#<head>and<header>sound alike, but they’re different elements: one is invisible, the other visible.- A document has exactly one
<head>, but<header>can appear multiple times: for the page and for each article. - Metadata, such as the tab title or the description for search engines, always goes into
<head>, never into<header>.
Related entries
#Spotted a mistake or missing an example? Write to us.