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