Footer structure

Add copyright, links and address inside <footer>.

Footer and the bottom

The very bottom of the page is wrapped in <footer>. The copyright line, contact links, a privacy link or a 'back to top' piece go here. The main content does not belong here.

A page can hold more than one <footer>; each <article> or <section> can carry its own bottom. Still, the most common use is one big footer at the end of the page.

Contact with address

The <address> tag marks contact info. Email, phone or postal address go here. It most often sits inside <footer>, since contact info is expected at the bottom.

Example: <footer><address><a href="mailto:info@magazine.com">Write to us</a></address></footer>. Search engines and screen readers then know it is contact info; they read it as 'contact'.

Exercise Contact and copyright inside footer

Add a <footer> to body. Inside the footer put an <address> and write <a href="mailto:info@magazine.com">Write to us</a> inside it. Inside the footer also put a <small> tag with the text © 2026 Cheese Magazine. The link text and the small content must be non-empty.

Show example solution

<body>
  <footer>
    <address>
      <a href="mailto:info@magazine.com">Write to us</a>
    </address>
    <small>© 2026 Cheese Magazine</small>
  </footer>
</body>

Notes on using footer

Watch two points. First, do not put the main content inside <footer>; that belongs to <main>. The footer holds only complementary info. Second, use <address> for contact; placing contact info in a plain <p> weakens the power of semantic HTML.

For the copyright line, the <small> tag is a good fit; it carries a 'side note' meaning and is often seen with the © symbol. Remember, a page can hold more than one footer.

Test yourself

What do you most expect in a page's <footer>?
- A comment box
- The site logo
- Copyright and contact
- The main article
Show answer

Copyright and contact — Correct. footer holds the copyright line and contact info.

Link text inside address

<address>
  <a href="mailto:info@magazine.com">____</a>
</address>

Show answer

<address>
  <a href="mailto:info@magazine.com">Write to us</a>
</address>

Match the footer parts

footer

Bottom section
address

Contact
nav

Main menu
header

Top section

Next lesson: Sectioning rules

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies