footer element

Intro

The <footer> element is often used at the bottom of a web page. It usually contains a copyright notice. It may also contain links to other parts of your site or other websites. Since the footer is usually placed on most of your web pages, it is placed outside of the <main> element.

Steps

The <footer> element will go after the closing tag of the main element.

To create the footer element, type footer and press Tab. Then press Enter to create a blank line between the tags.

</main>

<footer>

</footer>

Create small element

One element that’s typically used with the <footer> element is the <small> element. It’s used to wrap around text that you don’t want to be too noticeable. Like the name implies, it does make the text inside it look smaller.

<footer>
  <small></small>
</footer>

Add text

The footer usually contains a copyright notice. To create the copyright symbol, you can use what’s called an HTML entity: ©.

<footer>
  <small>© 2024 Business Name.</small>
</footer>

If you check the preview, you should see a small copyright notice at the bottom of the page.

You can also insert or copy and paste the actual copyright symbol into your code. Windows and macOS should both have features for inserting special characters in text, but if you’re not sure how to do that, you can just search online for the symbol and copy and paste it.

<footer>
  <small>© 2024 Business Name.</small>
</footer>

Final code

If you’ve followed all of the steps so far, this is the code that should be inside the body tags.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<main>
  <h1>Business Name</h1>

  <section>
    <h2>About</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  </section>

  <section>
    <h2>Services</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  </section>
</main>

<footer>
  <small>© 2022 Business Name.</small>
</footer>