<header> / <footer>

Since:		HTML5（2014）

<header> is a semantic element that represents the introductory content or navigation for a page or section. <footer> represents the closing information for a page or section (such as copyright notices and links).

Syntax

<!-- Page-level header -->
<header>
  <h1>Site Title</h1>
  <nav>Navigation</nav>
</header>

<!-- Page-level footer -->
<footer>
  <p>© 2024 Site Name. All rights reserved.</p>
</footer>

Tag List

Tag	Description
<header>	Represents the introductory content of a page or section (such as headings, logos, and navigation).
<footer>	Represents the footer information of a page or section (such as copyright notices, contact links, and related links).

Sample Code

sample_header_footer.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Header & Footer Example</title>
</head>
<body>

  <!-- Page-level header -->
  <header>
    <h1>Programming Learning Site</h1>
    <nav>
      <a href="/?lang=en">Home</a>
      <a href="/html/?lang=en">HTML</a>
      <a href="/css/?lang=en">CSS</a>
    </nav>
  </header>

  <!-- Main content -->
  <main>
    <article>
      <!-- Article header (header elements can be nested) -->
      <header>
        <h2>HTML Basics</h2>
        <p>Published: January 1, 2024</p>
      </header>
      <p>HTML is the language used to define the structure of web pages.</p>
      <!-- Article footer -->
      <footer>
        <p>Category: HTML Introduction</p>
      </footer>
    </article>
  </main>

  <!-- Page-level footer -->
  <footer>
    <p>© 2024 Programming Learning Site</p>
    <nav>
      <a href="/privacy/?lang=en">Privacy Policy</a>
      <a href="/contact/?lang=en">Contact Us</a>
    </nav>
  </footer>

</body>
</html>

Result

The site title and navigation appear at the top of the page, and copyright information with links appears at the bottom. The <header> and <footer> inside <article> represent the article's heading information and category information, respectively.

View sample page

Styling with CSS

Common CSS patterns for site headers and footers used in real-world projects.

<style>
  /* Site header: logo on the left, nav on the right */
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    position: sticky; /* Stick to the top when scrolling */
    top: 0;
    z-index: 100;
  }

  .site-header .logo {
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }

  .site-header nav a {
    margin-left: 24px;
    text-decoration: none;
    color: #555;
    font-size: 0.9rem;
  }
  .site-header nav a:hover { color: #4a90e2; }

  /* Site footer */
  .site-footer {
    background: #2c2c2c;
    color: #ccc;
    padding: 40px 24px 24px;
    margin-top: auto; /* Push to the bottom in a flex container */
  }

  .site-footer a { color: #aaa; text-decoration: none; }
  .site-footer a:hover { color: #fff; }

  .footer-copyright {
    font-size: 0.8rem;
    color: #777;
    margin-top: 24px;
    text-align: center;
  }

  /* Responsive: hide nav below 600px */
  @media (max-width: 600px) {
    .site-header nav { display: none; }
  }
</style>

<header class="site-header">
  <a href="/?lang=en" class="logo">Site Name</a>
  <nav aria-label="Global Navigation">
    <a href="/tutorial.html?lang=en">Tutorial</a>
    <a href="/dictionary.html?lang=en">Dictionary</a>
    <a href="/contact.html?lang=en">Contact</a>
  </nav>
</header>

<footer class="site-footer">
  <nav aria-label="Footer Navigation">
    <a href="/privacy/?lang=en">Privacy Policy</a>
    <a href="/contact/?lang=en">Contact</a>
  </nav>
  <p class="footer-copyright">&copy; 2024 Site Name. All rights reserved.</p>
</footer>

Overview

<header> and <footer> are semantic elements introduced in HTML5. Using them instead of the older <div id="header"> and <div id="footer"> patterns allows browsers and search engines to better understand the structure of your document.

These tags can be used not only as page-level header and footer, but also nested inside <article> or <section> elements. However, you cannot nest a <header> inside another <header>, or a <footer> inside another <footer>.

For related semantic elements, also see "main / article" for main content, and "section / aside" for sections and supplementary content.