HTML Footer Tag: Uses, Structure, and Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic Footer Showcase</title>
    <style>
        .site-footer { background: #0f172a; color: #94a3b8; padding: 40px 20px 20px; font-family: system-ui, sans-serif; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; max-width: 1100px; margin: 0 auto; }
        .site-footer h4 { color: #f8fafc; margin-top: 0; }
        .site-footer ul { list-style: none; padding: 0; margin: 0; }
        .site-footer a { color: #cbd5e1; text-decoration: none; }
        .site-footer a:hover { color: #38bdf8; }
        .footer-bottom { border-top: 1px solid #1e293b; text-align: center; margin-top: 30px; padding-top: 20px; font-size: 0.85rem; }
    </style>
</head>
<body>
    <main>
        <h1>Main Content Area</h1>
        <p>Scroll down to inspect the semantic footer architecture.</p>
    </main>

    <!-- Semantic Document Footer -->
    <footer class="site-footer">
        <div class="footer-grid">
            <div>
                <h4>OperateTools</h4>
                <p>Empowering developers with intuitive code editors, reverse image analysis, and web tools.</p>
            </div>
            <div>
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#tools">All Developer Tools</a></li>
                    <li><a href="#tutorials">HTML5 Tutorials</a></li>
                    <li><a href="#pricing">API Pricing</a></li>
                </ul>
            </div>
            <div>
                <h4>Contact Support</h4>
                <address>
                    Email: <a href="mailto:support@operatetools.com">support@operatetools.com</a><br>
                    San Francisco, California, USA
                </address>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2026 OperateTools Inc. All rights reserved. <a href="#privacy">Privacy Policy</a> | <a href="#terms">Terms</a></p>
        </div>
    </footer>
</body>
</html>