Building a Responsive HTML Header: A Step-by-Step Template

Jeremy Sarchet

Full Stack Developer

Creating an HTML header template ensures consistency across your web pages. It also improves user navigation. Including elements like the logo, navigation links, and occasionally a search bar or contact information in your header can make your website much more user-friendly and accessible.

In this guide, we'll walk through the process of crafting a simple HTML header template.

How to create a header in HTML?

Let's kick off with the basic HTML5 structure. You should place your header inside the <body> tag, right after the opening <body> tag, to lay the groundwork for your website's navigation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- Your header content will go here -->
    </header>
</body>
</html>

How can you add logo and navigation?

In the <header> tag, adding your site's logo and a navigation bar is straightforward. For the logo, use an <img> tag, and for navigation links, employ an unordered list <ul>.

<header>
    <div class="logo">
        <img src="logo.png" alt="Site Logo">
    </div>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

What are the styling basics for the header?

To integrate the header seamlessly into your site's design and make it visually appealing, you'll need to add CSS styles. Here's a simple styling example for the header, logo, and navigation.

header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

header .logo img {
    max-height: 50px;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

This CSS styling gives your header a sleek dark background, appropriately sizes the logo, and arranges your navigation links horizontally with a clean design.

How can you make the header responsive?

It’s important to make sure your header looks good on all devices. By adding media queries, you can adjust the styles for smaller screens to maintain usability and appearance.

@media (max-width: 600px) {
    header {
        text-align: left;
    }

    nav ul {
        padding-top: 20px;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
    }
}

These media queries tweak the header's alignment and the layout of the navigation on screens smaller than 600px wide, ensuring a good user experience on mobile devices.

The next generation of charts and BI.

Coming soon.

Fast. Opinionated. Collaborative. Local-first. Keyboard centric.
Crafted to the last pixel. We're looking for early alpha users.

Request access