Learn SQL

How to Make a Footer in HTML: A Simple Guide for Beginners

By Cristian G. Guasch •  Updated: 09/18/23 •  8 min read

Wondering how to create an HTML footer? My guess is, you’ve landed here because you’re looking to add that final touch to your webpage. I’m here to guide you through the process, step by step.

Footers are often overlooked but they can be a powerful tool in web design. They house important information like contact details, links to privacy policies or terms and conditions, social media buttons, and even a brief about us section. When done right, it not only completes your site’s layout but also enhances usability and improves user experience.

Before we get started with our tutorial on how to make a footer in HTML, let’s first understand what it really is. A footer typically appears at the bottom of every page on a website. It’s made using the <footer> tag in HTML5 which helps search engines identify it as such. This tag ensures that your footers aren’t just visually appealing but also SEO-friendly! Now that we’ve got our basics covered, let’s dive into creating our footer.

Understanding HTML and Its Elements

Let’s dive into the world of HTML, a cornerstone of web development. It stands for Hyper Text Markup Language – quite a mouthful, isn’t it? But don’t fret. I’ll break it down to make it easier to understand.

HTML is like the skeleton of a webpage. It gives structure to the content by using various elements, commonly known as tags. You can think of these tags as building blocks that come together to form a webpage.

For example, we’ve got <p> for paragraphs, <h1> through <h6> for headings, and so on. What about creating footers though? Well, there’s an aptly named tag just for that purpose: <footer>. Want to see how it works? Here’s a straightforward example:

<footer>
  <p>This is my website footer where I can put copyright information or useful links.</p>
</footer>

In this instance, everything between the opening <footer> tag and closing </footer> tag forms part of your website footer section.

There’s also room for variation with our trusty <footer> tag! Maybe you’d like to add some navigation links in your footer? Here’s how:

<footer>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</footer>

In this case, we’re using additional HTML elements such as <nav>, <ul>, and <li>. These help create a neat list of navigational links within our footer.

Keep in mind that understanding HTML is all about getting familiar with its diverse elements and learning how they interact with each other. And remember – practice makes perfect! The more you experiment with different tags and their variations, the more confident you’ll become in your HTML prowess.

Delving into the world of HTML footers, it’s essential to understand the key components that make up this vital part of your webpage. Generally speaking, the footer is where you’ll typically find crucial information like contact details, website navigation links, and copyrights.

First and foremost comes the <footer> tag itself. Introduced in HTML5, this tag helps delineate your footer content from the rest of your page for both human readers and search engine crawlers. Here’s an example:

<footer>
  <p>This is my footer!</p>
</footer>

Next up are navigation links. It’s common practice to include additional site navigation in your footer as a convenience for users who’ve scrolled all the way down on your page. Adding these can be as simple as using anchor (<a>) tags within paragraph (<p>) tags.

<footer>
  <p><a href="#home">Home</a></p>
  <p><a href="#blog">Blog</a></p>
</footer>

Thirdly, contact information often finds its home in a website’s footer. This could include email addresses or social media profiles – remember there’s an appropriate HTML5 semantic tag for addresses: <address>.

<footer>
  <address>Contact me at <a href="mailto:webmaster@example.com">webmaster@example.com</a>.</address>
</footer>

Lastly but certainly not least is copyright information. It may seem like a minor detail but it provides legal protection for your original content.

<footer>
  <p>&copy; 2022 My Website<p/>
</footer>

Remember: while these are common practices, footers can be more than just these elements! Feel free to experiment with what works best for your site’s design and functionality. Let’s dive right into the meat of the matter: creating an HTML footer. The footer is that nifty little section at the bottom of a web page, often housing copyright information, links to other pages, or contact details. It’s a crucial element for any well-designed and functional website.

In HTML language, we start by using the <footer> tag. This tag is quite straightforward; it simply denotes where your footer begins and ends.

<footer>
</footer>

But what goes inside this tag? Well, that depends on what you want in your footer! Let’s say I want to include some text about copyright and a few quick links. Here’s how I’d do it:

<footer>
   <p>&copy; 2022 My Website </p>
   <a href="about.html">About</a> |
   <a href="contact.html">Contact</a> |
   <a href="privacy-policy.html">Privacy Policy</a>
</footer>

In this snippet, &copy; creates the copyright symbol (©), while each <a> tag creates a link to another page on my site.

You can also style your footer using CSS to make it more visually appealing. For instance:

<footer style="background-color:black;color:white;padding:10px;">
    <p>&copy; 2022 My Website </p>
    ...
</footer>

This code changes the background color of my footer to black (background-color:black), changes the text color to white (color:white), and adds some padding around my content (padding:10px).

Remember that footers don’t just have to be plain text – you might include images, forms or even social media icons in yours. The possibilities are endless!

The beauty of HTML lies in its flexibility and simplicity- with only a few lines of code, you can create an engaging and functional website footer. So go on, give it a try!

So, you’ve decided to create a footer for your website using HTML. Good choice! But watch out – there are some common pitfalls that can make the process more difficult than it needs to be.

One big mistake I often see is the misuse of semantic tags. HTML5 brought us helpful tags like <footer> but they’re not always used appropriately. For example:

<div id="footer">
  <p>This is not a semantic use of the footer tag.</p>
</div>

In this case, it’d be better to use <footer> instead of <div id="footer">. Here’s how it should look:

<footer>
  <p>This is a proper use of the footer tag.</p>
</footer>

Another error I frequently come across is cluttering the footer with too much information or unnecessary links. Remember, your site’s footer is not a dumping ground for every link you couldn’t fit elsewhere. A clean, concise and well-organized footer makes a huge difference in user experience.

Next up on our list of common mistakes: ignoring mobile responsiveness. With so many users browsing on their phones these days, designing with mobile in mind is crucial. If you’re wrapping text in divs without setting their width properly, your content might overflow on smaller screens like so:

<footer>
  <div style="width:1000px;">
    <p>Your text here might overflow off small screens.</p>
  </div>  
</footer>

Instead, consider using CSS media queries or percentage-based widths to keep everything looking tidy no matter what device your visitors are using.

Lastly, don’t forget about accessibility! It’s easy to overlook when coding up a quick footer but remember that all web content should be accessible by everyone including those with disabilities. Using descriptive alt tags for images and ensuring your text has sufficient contrast against its background color are just a few ways to make your footer more accessible.

<footer>
  <img src="logo.png" alt="Company Logo">
  <p style="color:white; background-color:black;">This text is easily readable.</p>
</footer>

Those were some of the most common mistakes I’ve encountered when it comes to creating an HTML footer. Avoiding these pitfalls will help you craft a footer that’s not only visually appealing, but also functional and user-friendly.

Cristian G. Guasch

Hey! I'm Cristian Gonzalez, I created HTML Easy to help you learn HTML easily and fast.

Related articles