Add a Footer

The last section of our HTML document is going to be the <footer>. Let’s add some links to social media accounts. That way, anyone who visits or your page can find out how to contact you.

In profile.html just below the closing main tag, add:

  <footer>
  </footer>

We want our links to be icons, in order to do this, we’re going to wrap anchor tags (<a>) around image tags (img).

First, let’s add a link to facebook.

  <footer>
    <a href="http://facebook.com" target="_blank"><img src="assets/social_media/facebook-logo.svg" alt="Facebook Icon"></a>
  </footer>

Let’s walk through what the attributes on our anchor tag are doing.

The target="_blank" opens facebook.com in a new browser tab.

The href tells our link what website it should open when we click our link.

Let’s add more anchor tags for the rest of our social media profiles, edit the code inside of your <footer> tag to match:

  <footer>
    <a href="http://facebook.com" target="_blank">Facebook</a>
    <a href="http://linkedin.com" target="_blank">Linkedin</a>
    <a href="http://twitter.com" target="_blank">Twitter</a>
    <a href="mailto:[email protected]" target="_blank">Email me</a>
  </footer>

Save profile.html and refresh the page.

Let’s also add a link to our social media profiles in our sidebar.

Back in the aside tag, add to your ul:

  <li>
    <a href="#social-media">Social Media</a>
  </li>

Then, go back and add an id to your opening footer tag like, so:

  <footer id="social-media">

Save profile.html and refresh your page. Double check that your links in your side bar are working.