Header and footer

Learn to use <header> and <footer>.

The header tag

The <header> tag marks the top of a section. It sits at the top of the page or at the start of an <article>. It usually holds a title, a logo or an opening menu.

Example: <header><h1>My Diary</h1><p>A developer's notes</p></header>. Here <header> wraps the page's opening top. A page can hold more than one <header>; each section can have its own top.

The footer tag

The <footer> tag marks the bottom of a section. It sits at the very end of the page or after an <article>. It usually holds a copyright line, contact links or related links.

Exercise Write the top and bottom of the page

Show example solution

<body>
  <header>
    <h1>Opinions</h1>
  </header>
  <footer>
    <p>© 2024 Gazette</p>
  </footer>
</body>

Test yourself

What is <header> most often used for?
- The bottom of the page
- The top of a section
- A side menu
- A form field
Show answer

The top of a section — Correct. header marks the top of a section.

Complete the footer

<____>
  <p>© 2024 Club Page</p>
</footer>

Show answer

<footer>
  <p>© 2024 Club Page</p>
</footer>

Match each tag to its role

<header>

Top of a section
<footer>

Bottom of a section
<h1>

Heading
<p>

Paragraph

Next lesson: Nav and main

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies