← Back to All Tags

<header>

Establishes introductory header content for a document or section

✨ HTML5

Definition and Usage

The <header> tag represents a container for introductory content or a set of navigational links.

A <header> element typically contains one or more heading elements (<h1>-<h6>), logo or icon, and authorship information.

You can have several <header> elements in one HTML document - for example, a header for the page and a header for each article or section.

Tip: The <header> element is not sectioning content and therefore does not introduce a new section in the outline.
Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

Browser Support

The <header> tag is supported in all major browsers:

Chrome
Chrome
5.0+
Firefox
Firefox
4.0+
Safari
Safari
5.0+
Edge
Edge
9.0+
Opera
Opera
11.1+

Attributes

The <header> tag supports the Global Attributes in HTML.

The <header> tag also supports the Event Attributes in HTML.

Examples

Page Header

Basic page header with logo and navigation:

Example

<header>
  <h1>My Website</h1>
  <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>

Article Header

Header within an article with title and metadata:

Example

<article>
  <header>
    <h2>Understanding HTML5 Semantic Elements</h2>
    <p>Published on January 15, 2025 by John Doe</p>
    <p>Last updated: January 20, 2025</p>
  </header>

  <p>HTML5 introduces many new semantic elements that help structure web pages...</p>
</article>

Header with Navigation

Complete header with logo, navigation, and search:

Example

<header>
  <div class="logo">
    <img src="logo.png" alt="Company Logo">
    <h1>Company Name</h1>
  </div>

  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>

  <form class="search">
    <input type="search" placeholder="Search...">
    <button type="submit">Search</button>
  </form>
</header>

Header with Logo and Tagline

Branded header with logo image and tagline:

Example

<header>
  <img src="logo.png" alt="HTML Free Codes Logo" width="200">
  <h1>HTML Free Codes</h1>
  <p>The best free HTML tutorial website since 2008</p>
</header>

Sticky Header

Fixed header that stays at the top when scrolling:

Example

<style>
  header {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    z-index: 100;
  }

  header h1 {
    margin: 0;
    display: inline-block;
  }

  header nav {
    display: inline-block;
    float: right;
  }

  header nav a {
    margin-left: 20px;
    text-decoration: none;
    color: var(--text-primary);
  }
</style>

<header>
  <h1>My Site</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

Multi-Level Header

Header with multiple sections and dropdown menus:

Example

<header>
  <div class="top-bar">
    <p>Contact: info@example.com | Phone: (123) 456-7890</p>
  </div>

  <div class="main-header">
    <div class="logo">
      <img src="logo.png" alt="Logo">
      <h1>Company Name</h1>
    </div>

    <nav class="main-nav">
      <ul>
        <li><a href="/">Home</a></li>
        <li>
          <a href="/products">Products</a>
          <ul class="dropdown">
            <li><a href="/products/web">Web Design</a></li>
            <li><a href="/products/mobile">Mobile Apps</a></li>
          </ul>
        </li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

Header Placement and Structure

  • Page Header: Placed at the beginning of the <body> element, typically contains site logo, title, and main navigation
  • Article Header: Placed at the beginning of an <article> element, contains article title and metadata
  • Section Header: Placed at the beginning of a <section> element, contains section title and introductory content
  • Multiple Headers: A document can have multiple headers - one for the page and others for articles/sections
  • Not Required: Headers are optional; not every article or section needs a header element

Page Header vs Section/Article Header

Page Header

  • Site-wide header at top of page
  • Contains site logo/branding
  • Main navigation menu
  • Search functionality
  • Contact information
  • Usually styled prominently
  • Often sticky/fixed position

Section/Article Header

  • Content-specific header
  • Contains content title
  • Author information
  • Publication date
  • Category/tags
  • Minimal styling
  • Static position

Styling Headers with CSS

Common styling patterns for header elements:

Example - Modern Header Styles

/* Basic page header */
header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 40px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Header layout */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo styling */
header .logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

header .logo h1 {
  margin: 0;
  font-size: 24px;
}

/* Navigation in header */
header nav ul {
  display: flex;
  list-style: none;
  gap: 30px;
  margin: 0;
  padding: 0;
}

header nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.3s;
}

header nav a:hover {
  opacity: 0.8;
}

/* Sticky header */
header.sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Responsive header */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 20px;
  }

  header nav ul {
    flex-direction: column;
    gap: 15px;
  }
}

/* Article header */
article header {
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

article header h2 {
  margin: 0 0 10px 0;
  color: var(--text-primary);
}

article header p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

Best Practices for Header Content

  • Use <header> for introductory content, not generic containers
  • Include site logo and branding in the page header
  • Place primary navigation within the page header using <nav>
  • Keep headers concise and focused on essential information
  • Use appropriate heading levels (<h1>-<h6>)
  • Include author and date information in article headers
  • Make headers keyboard-accessible and screen reader friendly
  • Use semantic HTML within headers for better accessibility
  • Don't nest headers within each other
  • Ensure header is visually distinct from main content
  • Consider mobile responsiveness for page headers
  • Use consistent header styling across similar content types

Accessibility Benefits

  • Screen readers can identify headers as landmark regions
  • Helps users navigate to introductory content quickly
  • Provides semantic structure for assistive technologies
  • Improves keyboard navigation with skip links
  • Clearly identifies the beginning of content sections
  • Better document outline for accessibility tools

SEO Benefits

  • Search engines understand page structure better
  • Helps identify primary navigation and branding
  • Improves content hierarchy understanding
  • Better indexing of article metadata
  • Semantic HTML is favored by search algorithms
  • Helps distinguish header content from main content

Default CSS Settings

Most browsers will display the <header> element with the following default values:

Default CSS

header {
  display: block;
}

Related Tags