Header HTML

Write semantic HTML for the website header — including the logo, navigation, and hero section.

Header HTML

Now that we have our assets sliced and our designs ready, it's time to start writing code. We'll begin with the header — the first thing users see on the page.

Anatomy of a Website Header

A typical header contains:

Logo — brand identity, usually links to the homepage
Navigation — links to key pages
Hero section — a large banner with a headline, subtext, and call-to-action

Setting Up the HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Responsive Website</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- Header goes here -->
</body>
</html>

The <meta name="viewport"> tag is critical for responsive design. Without it, mobile browsers will render the page at desktop width and zoom out.

The Header Element

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

Semantic HTML Elements Used

Element	Purpose
`<header>`	Defines the page header section
`<nav>`	Wraps navigation links — accessible for screen readers
`<ul> / <li>`	Unordered list for navigation items
`<a>`	Anchor links for navigation
`<img>`	Logo image with descriptive alt text

The Hero Section

<section id="hero">
    <div class="container">
        <div class="hero-content">
            <h1>Welcome to Our Website</h1>
            <p class="hero-text">We create beautiful, responsive 
               websites that work perfectly on every device.</p>
            <a href="#services" class="btn hero-btn">Our Services</a>
        </div>
    </div>
</section>

The Container Pattern

Notice we use a .container div inside each section. This is a common pattern that:

Sets a maximum width (e.g., 1100px) to prevent content from stretching too wide on large screens
Centers the content with auto margins
Adds consistent horizontal padding

/* We'll write this CSS later */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

The Hamburger Button (for Mobile)

We add the hamburger button now but it will be hidden on desktop and shown only on mobile:

<button id="hamburger" class="hamburger" aria-label="Toggle navigation">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</button>

Place this button inside .header-inner, right before the <nav> element.

Complete Header HTML

<header id="main-header">
    <div class="container">
        <div class="header-inner">
            <div class="logo">
                <a href="index.html">
                    <img src="img/logo.png" alt="Company Logo">
                </a>
            </div>
            <button id="hamburger" class="hamburger" 
                    aria-label="Toggle navigation">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
            <nav id="main-nav">
                <ul>
                    <li><a href="index.html" class="active">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<section id="hero">
    <div class="container">
        <div class="hero-content">
            <h1>Welcome to Our Website</h1>
            <p class="hero-text">We create beautiful, responsive 
               websites that work perfectly on every device.</p>
            <a href="#services" class="btn hero-btn">Our Services</a>
        </div>
    </div>
</section>

Key Takeaways

Use semantic HTML: <header>, <nav>, <section>
The viewport meta tag is essential for responsive design
The container pattern controls max-width and centering
Include the hamburger button in HTML even though it's hidden on desktop
Use meaningful id and class names for styling later