Headers and Footers

Headers and footers are a great way to add branding and information to the top and/or bottom of your document.

Add headers and footers

In your HTML, add an element to the <body> to become your header or footer. For clarity, we’re using the <header> HTML element here for headers, and the <footer> HTML element for footers.


<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <p>This is a header, that will appear at the top of your document.</p>
    </header>
    <footer>
      <p>This is a footer, that will appear at the bottom of your document.</p>
    </footer>
    <div>This will stay in the content of your page.</div>
  </body>
</html>

Now, create a template file called styles.css and add the following styles to enable the header and footer behaviour. Visit the Margin Boxes guide for other placements.


/* Set the <header> and <footer> to be running elements
you can give them any running identifier you like */
header {
  position: running(myRunningHeader);
}

footer {
  position: running(myRunningFooter);
}

/* Set the content of the margin boxes to
your header and footer, respectively */
@page {
  @top-center {
    content: element(myRunningHeader);
  }
}

@page {
  @bottom-center {
    content: element(myRunningFooter);
  }
}

You may not want to have the same header and footer on every page of your document. You can easily change or hide the header for certain page(s) by adding different <header> elements at the relevant positions in the document that you want to start using them from.

In your styles.css template file, which you’ll need to create if you haven’t already.


/* <section> will act as a page container */
section {
  break-before: page;
  break-after: page;
}

/* Set the <header> to be a running element */
header {
  position: running(myRunningHeader);
}

/* Set the `content` of the top-center margin box to be your header */
@page {
  @top-center {
    content: element(myRunningHeader);
  }
}

As the rendering engine processes the pages sequentially, it picks up a new header if one is present in that page. If no new <header> elements are found on that page, it continues with the most recently used header.

In your HTML file, you can add header variations for each section. Sections here act as pages, using the CSS above.


<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <section>
      <!-- Header on page 1 -->
      <header>
        <h1>This header will appear on page 1</h1>
      </header>
      <div>Lorem ipsum dolor sit amet...</div>
    </section>
    <section>
      <!-- Hidden/empty header on page 2 -->
      <header></header>
      <div>Lorem ipsum dolor sit amet...</div>
    </section>
    <section>
      <!-- Header on page 3 onwards... -->
      <header>
        <h1>This header will appear from page 3 onwards</h1>
      </header>
      <div>Lorem ipsum dolor sit amet...</div>
    </section>
    <section>
      <div>Lorem ipsum dolor sit amet...</div>
    </section>
    <section>
      <div>Lorem ipsum dolor sit amet...</div>
    </section>
  </body>
</html>

Include page numbers

To simply show page numbers on all pages, visit our Page Numbers guide.

To include page numbers in your headers and footers, you can use the counter function in CSS.


<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <p>Your are on page <span class="page-num"></span> of <span class="page-total"></span></p>
    </header>
    <div>Lorem ipsum dolor sit amet...</div>
  </body>
</html>

Your styles.css file will need to be updated to look this:


span.page-num::after {
  content: counter(page);
  font-weight: bold;
}

span.page-total::after {
  content: counter(pages);
  font-weight: bold;
}

/* Set the <header> to be a running element */
header {
  position: running(myRunningHeader);
}

/* Set the `content` of the top-center margin box to be your header */
@page {
  @top-center {
    content: element(myRunningHeader);
  }
}

Headers and Footers

Add headers and footers

Different headers and footers

Include page numbers