How to create footer in html

HtmlHow-ToBeginner · 3 min read

How to Create a Footer in HTML: Simple Guide

To create a footer in HTML, use the <footer> element at the bottom of your page or section. Inside it, you can add text, links, or other content that you want to appear as the page footer.

📐

Syntax

The <footer> tag defines a footer for a document or section. It usually contains information like copyright, contact links, or navigation.

<footer>: The container for footer content.
Content inside: Text, links, or other HTML elements.
</footer>: Closes the footer section.

html

<footer>
  <!-- Footer content goes here -->
</footer>

💻

Example

This example shows a simple footer with copyright text and a link. It appears at the bottom of the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Example</title>
  <style>
    footer {
      background-color: #f2f2f2;
      text-align: center;
      padding: 1rem;
      font-size: 1rem;
      color: #555;
      position: fixed;
      width: 100%;
      bottom: 0;
    }
  </style>
</head>
<body>
  <main>
    <h1>Welcome to My Website</h1>
    <p>Content goes here.</p>
  </main>
  <footer>
    &copy; 2024 My Website. <a href="mailto:contact@mywebsite.com">Contact Us</a>
  </footer>
</body>
</html>

Output

⚠️

Common Pitfalls

Some common mistakes when creating footers include:

Not using the <footer> tag and instead using generic <div>, which loses semantic meaning.
Placing footer content outside the <body> tag, which is invalid HTML.
Not styling the footer properly, causing it to not appear at the bottom or look cluttered.

html

<!-- Wrong: Using div instead of footer -->
<div>
  &copy; 2024 My Website
</div>

<!-- Right: Using footer tag -->
<footer>
  &copy; 2024 My Website
</footer>

📊

Quick Reference

Tips for creating footers:

Always use the <footer> tag for semantic clarity.
Include relevant info like copyright, contact, or links.
Use CSS to style and position the footer clearly.
Ensure footer is inside the <body> tag.
Make footer responsive for different screen sizes.

✅

Key Takeaways

Use the

Place footer content inside the

Style the footer with CSS to make it visually distinct and positioned correctly.

Avoid using generic

tags for footers to keep your HTML meaningful.

Include useful information like copyright and contact links in the footer.