Header & Footer HTML

Write semantic HTML for the website header (logo, navigation) and footer (links, contact info, copyright).

Header & Footer HTML

With our assets sliced, let's start building the static HTML page. We'll begin with the header (logo + navigation) and footer (links, contact info, copyright) — the sections that appear on every page.

HTML Document Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Coffee — Home</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- Header -->
    <!-- Main Content (next episode) -->
    <!-- Footer -->
    <script src="js/script.js"></script>
</body>
</html>

The Header

<header id="main-header">
    <div class="container">
        <div class="header-inner">
            <div class="logo">
                <a href="index.html">
                    <img src="img/logo.png" alt="Developer Coffee">
                </a>
            </div>
            <nav id="main-nav">
                <ul>
                    <li><a href="index.html" class="current">Home</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

Semantic Elements Used

Element	Purpose
`<header>`	Page header — contains branding and navigation
`<nav>`	Navigation section — accessible landmark for screen readers
`<ul> / <li>`	Unordered list — standard structure for nav links
`<footer>`	Page footer — contains supplementary info and links

The Footer

<footer id="main-footer">
    <div class="container">
        <div class="footer-grid">
            <div class="footer-col">
                <h4>About Us</h4>
                <p>Developer Coffee is a blog about web development,
                   design, and all things code. Grab a coffee and
                   start learning!</p>
            </div>
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Contact</h4>
                <ul class="contact-list">
                    <li>📍 42 Code Avenue, Dev City</li>
                    <li>📞 (555) 987-6543</li>
                    <li>✉️ hello@devcoffee.com</li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Follow Us</h4>
                <div class="social-links">
                    <a href="#">Twitter</a>
                    <a href="#">GitHub</a>
                    <a href="#">YouTube</a>
                    <a href="#">LinkedIn</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 Developer Coffee. All rights reserved.</p>
        </div>
    </div>
</footer>

The Container Pattern

The .container div appears inside every section to:

Limit content to a maximum width (e.g., 1100px)
Center the content on wide screens
Add consistent horizontal padding

Why Build These First?

The header and footer are shared across every page. In WordPress, they become header.php and footer.php — separate template files that are included on every page. Building them first in static HTML makes the WordPress conversion easier.

Key Takeaways

Start with the HTML document structure and the viewport meta tag
Use semantic elements: <header>, <nav>, <footer>
The container pattern controls max-width and centering
Header and footer map directly to WordPress template parts later
Keep the HTML clean and well-structured — you'll be splitting it into PHP files