<header> / <footer>

<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

<!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.

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.