HTML <header> Element

Publish in HTML Tutorial el 24/05/2025 15:05

The <header> element represents introductory content for its nearest ancestor sectioning content or sectioning root element. It typically contains headings (h1-h6), logos, search forms, navigation, or author information. Unlike the <head> element which contains metadata, the <header> is visible content.

Key characteristics:

Can be used multiple times on a page (for different sections)
Does not create a new section in the outline
Often contains the section's heading (h1-h6)
Can contain navigation, logos, or other introductory content

Basic Syntax

Here's the basic structure of a <header> element:

Examples of <header> Usage

Example 1: Basic Page Header

A simple header containing a title and subtitle:

Play Code

<header>
  <h1>Welcome to My Website</h1>
  <p>Everything you need to know about HTML</p>
</header>

Example 2: Header with Navigation

A common pattern combining navigation within the header:

Play Code

<header>
  <h2>My Blog</h2>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

Example 3: Article Header

Header used within an article element:

Play Code

<article>
  <header>
    <h2>The Future of Web Development</h2>
    <p>Published on <time datetime="2023-05-15">May 15, 2023</time></p>
    <p>By John Doe</p>
  </header>
  <p>Article content goes here...</p>
</article>

Example 4: Dynamic Header with JavaScript

Header that changes based on user interaction:

Play Code

<header id="dynamic-header">
  <h1>Welcome, Guest</h1>
  <button onclick="updateHeader()">Login</button>
</header>

<script>
  function updateHeader() {
    const header = document.getElementById('dynamic-header');
    header.querySelector('h1').textContent = 'Welcome, User!';
    header.querySelector('button').textContent = 'Logout';
  }
</script>

Example 5: Sticky Header with JavaScript

A header that sticks to the top when scrolling:

Play Code

<header id="sticky-header" style="background: #f8f9fa; padding: 20px; transition: all 0.3s; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;">
  <h2>Sticky Header</h2>
</header>
<div style="height: 2000px; background: linear-gradient(white, red);">
  Scroll down to see the sticky effect
</div>

<script>
  window.addEventListener('scroll', function() {
    const header = document.getElementById('sticky-header');
    if (window.scrollY > 100) {
      header.style.padding = '10px 20px';
      header.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
    } else {
      header.style.padding = '20px';
      header.style.boxShadow = 'none';
    }
  });
</script>

Tips and Tricks

Semantic Nesting: Always place your <h1>-<h6> headings inside the <header> when they represent the heading for that section.
Multiple Headers: You can use multiple <header> elements in one document - one for the page and others for each <article> or <section>.
Accessibility: Screen readers can identify <header> content, improving navigation for users with disabilities.
SEO Benefit: Search engines give more weight to content within <header> elements.
Styling: Use CSS to make your header stand out with background colors, borders, or fixed positioning.

Common Mistakes to Avoid

Don't confuse <header> with <head> - they serve completely different purposes.
Avoid placing footer-type content (like copyright information) in the header.
Don't overuse - not every section needs a header if it doesn't have introductory content.
Avoid making headers too tall on mobile devices where screen space is limited.