The HTML <footer> element represents footer information for a webpage or a section of content. It commonly contains copyright information, contact details, author information, related links, and other supplementary information.

The <footer> element is a semantic HTML element that helps developers organize webpage content clearly. It is often placed at the bottom of a webpage, but it can also appear at the end of an article or another section.

What Is the HTML Footer Element?

The <footer> element defines information related to its nearest sectioning content or the webpage as a whole. For example, a website footer may contain copyright information and links to privacy policies, while an article footer may include the author’s name.

Here is the basic syntax:

<footer>
    <p>Copyright 2026 Web4Learners</p>
    <a href="/contact/">Contact Us</a>
</footer>

In this example, the footer contains copyright information and a contact link.

HTML Footer Example

The following example demonstrates how to use the <footer> element in a complete HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Footer Example</title>

    <style>
        footer {
            background-color: #0878d1;
            color: white;
            text-align: center;
            padding: 20px;
        }

        footer a {
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <header>
        <h1>Web4Learners</h1>
    </header>

    <main>
        <h2>Welcome to Web4Learners</h2>
        <p>Explore tutorials about web development.</p>
    </main>

    <footer>
        <p>Copyright 2026 Web4Learners</p>
        <a href="/about/">About Us</a> |
        <a href="/contact/">Contact Us</a>
    </footer>

</body>
</html>

In this example, the <footer> element displays copyright information and website links. CSS adds a blue background, white text, and spacing to improve its appearance.

What Can an HTML Footer Contain?

An HTML footer can include different types of information depending on the purpose of the page.

• Copyright information: Identifies the copyright notice.
• Contact details: Provides ways to contact the website owner.
• Related links: Includes links to privacy policies, terms, and other important pages.
• Author information: Identifies the author of an article.
• Social media links: Connects visitors to the website’s social profiles.

Include only information relevant to the webpage or section.

HTML Footer vs Header

The <header> and <footer> elements serve different purposes.

<header>	<footer>
Contains introductory content	Contains closing or supplementary information
Often includes a logo and navigation	Often includes copyright and policy links
Usually appears near the beginning	Often appears near the end

Learn more about HTML headers to understand how introductory and footer content work together.

HTML Footer FAQs

Can a webpage have multiple footer elements?

Yes. A webpage can have a footer for the entire page and separate footers for individual articles or sections.

Does the footer automatically appear at the bottom?

No. The <footer> element does not automatically stick to the bottom of the screen. CSS controls its position and layout.

Is the footer a semantic HTML element?

Yes. It identifies footer information associated with a webpage or section.

Can a footer contain navigation links?

Yes. A footer can contain links to important pages, and a separate <nav> element may be used when those links form a navigation section.