HTML Header and Footer Tutorial - Semantic Page Regions

Understanding HTML Headers & Footers

The HTML <header> and <footer> elements identify introductory and closing content for a webpage or a section of content.

Although they are commonly used at the top and bottom of an entire webpage, headers and footers can also belong to individual articles, sections, and other appropriate parts of a document.

The <header> Element

The <header> element represents introductory content for a document or section. It often contains information that identifies or introduces the content that follows.

<header>
  <h1>Example Website</h1>
  <p>Learn HTML one step at a time.</p>
</header>

A page-level header may contain a website name, logo, introductory text, navigation, search controls, or other content associated with the beginning of the page.

Header Content

A <header> does not require a particular set of elements. Its contents depend on what it introduces and can range from a simple heading to a larger group of introductory content.

<header>
  <h1>HTML Tutorials</h1>

  <nav>
    <a href="/">Home</a>
    <a href="/tutorials/">Tutorials</a>
  </nav>
</header>

Navigation can appear inside a header, but <header> and <nav> have different meanings. The header identifies introductory content, while the navigation element identifies a section of major navigation links.

The <footer> element represents footer information associated with a document or section.

<footer>
  <p>&copy; Example Website</p>
</footer>

A page-level footer can contain copyright information, related links, contact information, policies, navigation, or other supporting content associated with the webpage or website.

Footer Content

A footer can contain much more than a copyright notice. Its content should relate to the page or section to which the <footer> belongs.

<footer>
  <p>&copy; Example Website</p>

  <nav aria-label="Footer navigation">
    <a href="/about.html">About</a>
    <a href="/contact.html">Contact</a>
    <a href="/privacy.html">Privacy</a>
  </nav>
</footer>

The visual appearance of a footer is controlled with CSS and does not determine whether the content semantically belongs inside a <footer>.

At the document level, a header can introduce the website or webpage while a footer can provide information associated with the end of the page.

<header>
  <h1>Example Website</h1>
</header>

<main>
  <h2>Welcome</h2>
  <p>Main webpage content...</p>
</main>

<footer>
  <p>&copy; Example Website</p>
</footer>

This is a common semantic arrangement, but the elements describe the purpose of the content rather than requiring a particular visual layout.

Section and Article Headers and Footers

Headers and footers are not limited to the entire webpage. An <article>, for example, can have its own header and footer containing information specifically related to that article.

<article>
  <header>
    <h2>Learning Semantic HTML</h2>
    <p>Article introduction...</p>
  </header>

  <p>Article content...</p>

  <footer>
    <p>Written by Example Author</p>
  </footer>
</article>

The article header introduces the article, while the article footer contains information associated with that article rather than with the entire webpage.

Multiple Headers and Footers

A webpage can contain more than one <header> and <footer> when those elements belong to different parts of the document.

<header>
  <h1>Example Website</h1>
</header>

<main>
  <article>
    <header>
      <h2>Article One</h2>
    </header>

    <p>Article content...</p>

    <footer>
      <p>Article information</p>
    </footer>
  </article>
</main>

<footer>
  <p>Website footer information</p>
</footer>

The important question is not how many headers or footers appear on the page, but which content each one introduces or concludes.

Semantic Meaning vs Visual Position

The words header and footer may sound like simple descriptions of physical position, but their meaning is semantic. A <header> represents introductory content and a <footer> represents footer information associated with particular content.

CSS determines where those elements appear visually. Moving a header or footer with CSS does not change what the element means in the HTML structure.

Header and Footer Example

The following example demonstrates a webpage header and footer along with a separate header and footer belonging to an article. Compare the two levels of structure and experiment with the content inside each element.

Play in Editor

Header and Footer Best Practices

Use <header> for introductory content associated with a page or appropriate section.
Use <footer> for footer information associated with a page or appropriate section.
Do not assume a webpage is limited to one header and one footer.
Make sure nested headers and footers relate to the article or section that contains them.
Do not choose these elements simply because content appears visually at the top or bottom of a layout.
Use CSS to control appearance and positioning rather than choosing HTML elements for visual effect.

Summary

The HTML <header> element represents introductory content, while <footer> represents footer information associated with a document or appropriate section of content.

A webpage can contain multiple headers and footers when they belong to different parts of the document. Their semantic meaning comes from the content they represent, not simply from where they appear on the screen.

HTML Headers & Footers