htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Unavailable or blocked: image “logo.webp”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<header>
  <div class="logo">
    <img src="logo.webp" 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

Unavailable or blocked: image “logo.webp”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<header>
  <img src="logo.webp" 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

Approved-page light CSS-variable defaults are supplied: --bg-primary, --text-primary. The snippet includes CSS inside its HTML.

<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

Unavailable or blocked: image “logo.webp”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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.webp" 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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

header {
  display: block;
}

Related Tags