The <header> tag in HTML represents introductory content for a page or for a section of a page. It is commonly used for a website logo, page title, navigation area, article heading, author information, search box, or any content that introduces what follows. The tag is semantic, so it describes the role of the content instead of only acting as a visual wrapper.
A common beginner mistake is confusing <header> with <head>. The <head> element belongs inside the HTML document setup and contains metadata such as title, CSS links, scripts, and SEO information. The <header> element belongs inside the visible page body and contains content users can see or interact with.
Basic Syntax of Header Tag in HTML
The syntax is simple. You place introductory content between the opening and closing <header> tags. The content inside can include headings, paragraphs, images, links, buttons, forms, and navigation depending on the design and purpose of that area.
<header>
<h1>Nerds Do Stuff</h1>
<p>Practical tutorials for electronics, programming, and engineering.</p>
</header>By itself, the <header> tag does not create a special visual design. Browsers treat it as a block-level element, but the layout, spacing, colors, background, and responsive behavior are controlled with CSS. Its real value is semantic structure.
Header Tag vs Head Tag
| Element | Where it appears | Purpose |
|---|---|---|
<head> | Inside <html>, before <body> | Stores document metadata, page title, CSS links, scripts, and SEO data. |
<header> | Inside <body> | Contains visible introductory content for a page, section, article, or layout region. |
If the content is not visible page content, it probably belongs in <head>. If the content introduces a visible page area, it may belong in <header>. Remembering this difference prevents a lot of confusion in HTML structure.
Where Header Tag Is Used
The <header> tag can be used at the top of the whole website, but it is not limited to that. It can also be used inside an <article>, <section>, or other content area when that area has its own introductory content. This means a page can have more than one <header> element.
- A site header containing logo, title, search, and main navigation.
- An article header containing article title, author name, date, and category.
- A section header introducing a group of related content.
- A card header inside a dashboard or product layout.
- A documentation page header containing title, summary, and version information.
Website Header Example
At page level, <header> usually appears near the top of the <body>. It often contains branding and primary navigation. This is the area many users think of when they hear the word header.
<body>
<header class="site-header">
<a href="/" class="logo">Nerds Do Stuff</a>
<nav aria-label="Main navigation">
<a href="/programming/">Programming</a>
<a href="/electronics/">Electronics</a>
<a href="/projects/">Projects</a>
</nav>
</header>
<main>
<h1>HTML Tutorials</h1>
<p>Learn how HTML structures web pages.</p>
</main>
</body>This example uses a <header> for the site introduction and a <nav> for the main menu. The two elements work together, but they do not mean the same thing. The header introduces the site area; the nav contains important navigation links.
Article Header Example
A blog post, news story, or tutorial can also have its own header. This is useful when the title, author, publish date, category, or short summary belongs specifically to that article rather than to the entire website.
<article>
<header>
<h1>Semantic HTML</h1>
<p>Published by Shreyas on May 29, 2026</p>
</header>
<p>Semantic HTML gives meaning to the structure of a web page.</p>
</article>This is valid because the article has its own introductory content. The page can still have a separate site header above it. Multiple headers are allowed when each one introduces its own context.
Is Header a Heading?
No. The <header> element is a container for introductory content. A heading element such as <h1> or <h2> is usually placed inside it, but the header itself is not a heading. This distinction matters because headings create content hierarchy, while headers group related introductory material.
<header>
<h1>HTML Forms</h1>
<p>Learn how form elements collect user input.</p>
</header>Here, <h1> is the heading. The <header> is only the wrapper that groups the heading and summary together. Do not replace headings with plain text inside a header if the text is actually the title of the content.
Accessibility Behavior of Header
The <header> element can become an important landmark depending on where it is used. A top-level page header is often exposed as a banner landmark to assistive technologies. A header inside an <article>, <section>, <aside>, or similar region is treated as introductory content for that region, not as the main page banner.
This is another reason to use the element properly. A page should not create confusing landmark structure by placing many unrelated top-level headers everywhere. Use <header> where content genuinely introduces a page or section.
Use header for introduction, not decoration.
What Can Go Inside Header Tag?
| Content | Common use inside header |
|---|---|
| Logo or brand name | Identifies the website or product. |
| Heading | Introduces the page, article, section, or card. |
| Navigation | Provides main or local navigation when appropriate. |
| Search form | Lets users search the site or section. |
| Author and date | Useful in article or blog post headers. |
| Intro paragraph | Gives a short summary before the main content. |
Header Tag with CSS
CSS can style the header just like any other block-level element. The semantic meaning remains the same whether the header is simple, sticky, transparent, dark, light, horizontal, vertical, or responsive. Do not choose <header> because it looks like a box at the top. Choose it because the content introduces the page or section.
<header class="site-header">
<a href="/" class="logo">NDS</a>
<nav aria-label="Main navigation">
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
</nav>
</header>
<style>
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
</style>Header Placement in Real Layouts
In real websites, header placement depends on the content scope. A site header usually appears once near the top of the page and introduces the whole website. An article header appears inside an article and introduces only that article. A section header appears inside a section and introduces only that section. Keeping these scopes separate makes the page easier to understand and prevents one large header from becoming a dumping area for unrelated content.
For example, a tutorial page might have a site header with the logo and main menu, then a main area with an article. Inside that article, a second header can hold the tutorial title, difficulty level, update date, and short description. That article header is not competing with the site header. It belongs to a smaller context.
<header class="site-header">
<a href="/">Nerds Do Stuff</a>
<nav aria-label="Main navigation">...</nav>
</header>
<main>
<article>
<header class="article-header">
<h1>Header Tag in HTML</h1>
<p>Learn how the header element structures introductory content.</p>
</header>
<p>The article content starts here.</p>
</article>
</main>This structure is much cleaner than placing every title, menu, date, and label into generic containers. It also gives CSS more predictable hooks. You can still use classes such as site-header and article-header, but the semantic element already explains the purpose of the region.
Header Tag and Page Landmarks
Landmarks help assistive technology users jump between major areas of a page. A top-level header can act as the page banner landmark, which is commonly where users expect to find branding and primary navigation. Nested headers do not normally create extra banner landmarks. This behavior is useful because it allows article and section headers without making the landmark list confusing.
The practical rule is to keep the main site header meaningful and stable. Put branding, primary navigation, search, or account actions there when they belong to the whole site. Put article-specific metadata inside the article header. Put section-specific introductions inside section headers. This keeps both visual design and accessibility structure aligned.
When reviewing a header, read the page without CSS in mind. If the grouped content clearly introduces the next major area, the header is probably correct. If the grouped content is only present to create spacing, background color, or a flex row, then a generic wrapper with a class may be more honest and easier for future developers to understand during maintenance later. This small check prevents noisy markup.
Common Mistakes with Header Tag
- Confusing
<header>with<head>. - Using
<header>only because something is visually at the top of a box. - Putting every navigation group inside a header even when it is not introductory content.
- Avoiding headings inside header when the content clearly needs a title.
- Assuming only one
<header>element is allowed on a page. - Using
<header>as a replacement for layout classes instead of semantic structure.
Can a page have multiple header tags?
Yes. A page can have a site header and separate headers inside articles, sections, or cards. Each header should introduce the area it belongs to.
Can header contain nav?
Yes. A page header commonly contains a nav element when the navigation is part of the introductory site or section area.
Is header required in every HTML page?
No. It is useful when the page or section has introductory content. If no such content exists, do not add it only for decoration.
Best Practices
- Use
<header>for meaningful introductory content. - Place a real heading inside the header when it introduces a page, article, or section.
- Keep site-level branding and article-level metadata in their correct contexts.
- Use CSS classes for styling, but do not depend on classes alone for structure.
- Keep the difference between
<head>and<header>clear.
Continue learning HTML in order
Follow the topic sequence with the previous and next lesson.