<footer> tag

What Is the Footer Element?

The <footer>...</footer> element is used to define the bottom section of a webpage, section, or article. It can contain copyright information, privacy policy links, terms and conditions, contact information, or other related links.

You can write class="footer" in the <footer> element to identify and style the footer section using CSS.

Syntax

<footer>
    Footer Content
</footer>

Basic Structure of a Footer Element

<footer>
    <h2>Footer Section</h2>
    <p>Copyright information goes here.</p>
</footer>

Example: Website Footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Website Footer</title>

    <!-- Defines the styles for the footer and its links. -->
    <style>
        /* Sets the background color, text color, spacing, and text alignment. */
        .footer {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        /* Styles the links inside the footer. */
        .footer a {
            color: white;
            margin: 10px;
            text-decoration: none;
        }
    </style>
</head>

<body>

    <!-- The footer contains copyright information and related links. -->
    <footer class="footer" id="footer">

        <h2>TutorialNest</h2>

        <p>Learn. Build. Grow.</p>

        <!-- Contains links to important website pages. -->
        <nav>
            <!-- The href attribute specifies the destination URL of each link. -->
            <a href="/privacy-policy">Privacy Policy</a>
            <a href="/terms">Terms</a>
            <a href="/contact">Contact Us</a>
        </nav>

        <p>&copy; 2026 TutorialNest. All rights reserved.</p>

    </footer>

</body>
</html>