HTML footer Tag

Last Updated : 03 Dec, 2024

The <footer> tag in HTML is used to define the footer section of an HTML document.

The footer section typically contains information such as contact information, sitemap, back-to-top links, related documents, copyright, etc.
The footer tag is a semantic tag included in HTML (in 2014) along with other tags like article, nav, header, etc.
It is not mandatory, but adds to clear structure to the document and useful for SEO.

HTML Footer Code Example:

HTML

<!DOCTYPE html>
<html>

<body>
  <footer>
    <a href="https://www.geeksforgeeks.org/about/">
      About Us
    </a>|
    <a href="https://www.geeksforgeeks.org/privacy-policy/">
      Privacy Policy
    </a>|
    <a href="https://www.geeksforgeeks.org/careers/">
      Careers
    </a>

    <p>@geeksforgeeks, Some rights reserved</p>
  </footer>
</body>

</html>

Key Points:

The <footer> tag is typically used to wrap content at the bottom of a page or section.
The <footer> tag also supports the Global Attributes and Event Attributes in HTML.
Contact information inside a <footer> element should go inside an <address> tag.
We can have several <footer> elements in one document.

Styling the <footer> Tag with CSS

By default, the <footer> tag has only the display: block property. You can customize its style using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        footer {
            display: flex;
            justify-content: space-around;
            background-color: #333;
            color: #fff;
            padding: 20px;
        }

        .column {
            width: 27%;
        }

        p {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <footer>
        <div class="column">
            <p>Company</p>
            <ul>
                <li>About Us</li>
                <li>Careers</li>
                <li>Privacy Policy</li>
                <li>Contact Us</li>
            </ul>
        </div>

        <div class="column">
            <p>Learn</p>
            <ul>
                <li>Algorithms</li>
                <li>Data Structures</li>
                <li>Languages</li>
                <li>CS Subjects</li>
                <li>Video Tutorials</li>
            </ul>
        </div>

        <div class="column">
            <p>Practice</p>
            <ul>
                <li>Company-wise</li>
                <li>Topic-wise</li>
                <li>Contests</li>
                <li>Subjective Questions</li>
            </ul>
        </div>
    </footer>
</body>

</html>

Best Practices for Using the HTML <footer> Tag

Avoid Overloading with Content: While the footer is meant for additional or supplementary content, avoid overloading it with too much information. Stick to key links and essential details to prevent clutter.
Ensure Mobile Responsiveness: When designing a footer, make sure that the content is accessible and looks good on all screen sizes. Footer content should be arranged in a user-friendly manner, especially on mobile devices.
Use Clear and Descriptive Links: In the footer, links to external sites, social media, or important pages (like privacy policy or terms of service) should be clearly labeled so users know what to expect when clicking.

Browser Support

Chrome: Supported from version 4.0
Firefox: Supported from version 3.5
Safari: Supported from version 5.0
Edge: Supported from version 12
Internet Explorer: Not supported in Internet Explorer 8 and below (works in IE 9 and later with a polyfill)
Opera: Supported from version 10.5
Mobile Browsers: Most modern mobile browsers (iOS Safari, Android Browser, Chrome Mobile) support the <footer> tag.