HTML <footer> Tag

The HTML <footer> tag defines a footer section for a document or a specific section within the document. It is typically used to include information like copyright notices, author details, navigation links, or related metadata. The <footer> tag is a semantic element, providing meaningful structure and improving the accessibility of web pages.

The <footer> tag can be used at the bottom of the <body> to create a page-wide footer or at the end of other elements, such as <article> or <section>, to create section-specific footers.

Basic Syntax of HTML <footer> Tag

The basic structure of the <footer> tag is:

</>
Copy
<footer>
    Footer content goes here.
</footer>

The content inside the <footer> tag should provide useful information about the section it belongs to.

Attributes of HTML <footer> Tag

  • Global Attributes: The <footer> tag supports all global attributes, such as id, class, style, and data-*.
  • Event Attributes: The <footer> tag supports event attributes like onclick, onmouseover, and onkeydown.

Basic Example of HTML <footer> Tag

Here’s a simple example of a page-wide footer:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is the main content of the page.</p>

        <footer>
            <p>© 2024 My Website. All rights reserved.</p>
            <nav>
                <a href="/privacy-policy">Privacy Policy</a> | 
                <a href="/terms-of-service">Terms of Service</a>
            </nav>
        </footer>
    </body>
</html>
Basic Example of HTML <footer> Tag

Explanation: The <footer> contains copyright information and navigation links, appearing at the bottom of the page.

Using the <footer> Tag with Articles

The <footer> tag can also be used within other elements like <article> to define footers specific to those sections:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <article>
            <h2>Understanding the HTML footer Tag</h2>
            <p>The footer tag is a semantic element used to define footer sections in a web page.</p>
            <footer>
                <p>Written by John Doe | Published on December 10, 2024</p>
            </footer>
        </article>
    </body>
</html>
Using the <footer> Tag with Articles

Explanation: This example uses the <footer> to include author and publication information at the bottom of an article.

Styling the <footer> Tag with CSS

You can style the <footer> tag using CSS to match your website’s design:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
              margin: 0;
            }
            footer {
                background-color: #333;
                color: white;
                text-align: center;
                padding: 20px;
                font-size: 14px;
                position: fixed;
                bottom: 0;
                width: 100%;
            }

            footer a {
                color: #00bfff;
                text-decoration: none;
                margin: 0 5px;
            }

            footer a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is the main content of the page.</p>

        <footer>
            <p>© 2024 My Website. All rights reserved.</p>
            <nav>
                <a href="/privacy-policy">Privacy Policy</a> | 
                <a href="/terms-of-service">Terms of Service</a>
            </nav>
        </footer>
    </body>
</html>
Styling the <footer> Tag with CSS

Result: The footer has a dark background, white text, and fixed positioning at the bottom of the viewport, ensuring it remains visible as the user scrolls.

Practical Applications of the <footer> Tag

  • Page-wide Footer: Include global information like copyright details, social media links, and navigation menus at the bottom of the page.
  • Section-specific Footers: Use within <article> or <section> elements for localized metadata or additional information.
  • Sticky Footer: Create a footer that remains fixed at the bottom of the screen, regardless of scrolling.