How to Make a Header in HTML and Center It Like a Pro

Akindele Michael January 27, 2025January 27, 2025 7 min read

If you’re learning HTML or designing a website, one of the first things you’ll come across is creating a header. The header is the top section of a webpage, and it’s where you place the title, navigation links, or branding. But here’s the big question how do you make one? And more importantly, how do you center it? Let’s break this down step-by-step in a way that’s easy to understand, even if you’re a beginner.

Think of your header as the welcoming sign of your website—it’s the first thing visitors see, so you want it to stand out. But don’t worry, you don’t need to be a coding wizard to create a beautiful header. I’ll guide you through the process in plain English.

What’s a Header in HTML?
How to Make a Basic Header in HTML
How to Center a Header in HTML

What’s a Header in HTML?

In HTML, a header is a semantic element used to define the top section of your webpage. It typically contains your website’s title, navigation links, logo, or other introductory content. Here’s a super simple example of what a header looks like in HTML:

<header>
  <h1>Welcome to My Website</h1>
</header>

See? It’s not complicated at all. The <header> tag is like a container, and inside it, you can include things like headings (<h1> to <h6>) and even navigation bars.

How to Make a Basic Header in HTML

Alright, let’s get practical. Creating a header starts with the <header> element. Here’s how to structure it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header Example</title>
</head>
<body>
  <header>
    <h1>My Awesome Website</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

What’s happening here?

<h1>: This is your main heading, the big bold text that grabs attention.
<nav> and <ul>: This is your navigation bar with links (Home, About, Contact).

Easy, right? You can think of this like setting up the framework for a house—you’re creating the basic structure.

How to Center a Header in HTML

Okay, now we’ve got the header in place, but what if you want to center it? Centering content is like getting your artwork to hang perfectly straight—it’s all about balance. There are several ways to center a header in HTML. Let’s go through them one by one.

Method 1: Centering with Text Alignment

The simplest way to center your header content is by using the CSS property text-align: center. This is like telling your browser, “Hey, make sure everything in this section is lined up in the middle.”

Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Header</title>
  <style>
    header {
      text-align: center; /* Centers the text horizontally */
      background-color: #f4f4f4; /* Adds a light gray background */
      padding: 20px; /* Adds space inside the header */
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to My Centered Header</h1>
  </header>
</body>
</html>

What’s happening here?

text-align: center;: Centers all the text within the <header> element.
padding: 20px;: Adds some breathing room inside the header, so it doesn’t feel squished.
background-color: #f4f4f4;: Adds a subtle background to make the header pop.

This method works perfectly for centering text, but what if you have more complex content like images or navigation links?

Method 2: Using Flexbox (The Modern Way)

Flexbox is like the Swiss Army knife of CSS. It makes aligning things ridiculously easy, and it works for both text and other elements.

Here’s how you can use Flexbox to center your header:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Header with Flexbox</title>
  <style>
    header {
      display: flex; /* Activates Flexbox */
      justify-content: center; /* Centers horizontally */
      align-items: center; /* Centers vertically */
      height: 100px; /* Sets the height of the header */
      background-color: #008cba; /* Adds a blue background */
      color: white; /* Changes text color to white */
    }
  </style>
</head>
<body>
  <header>
    <h1>Centered with Flexbox</h1>
  </header>
</body>
</html>

What makes Flexbox awesome?

justify-content: center;: This aligns items horizontally (left to right).
align-items: center;: This aligns items vertically (top to bottom).
display: flex;: This activates Flexbox, making alignment super easy.

Think of Flexbox as a magical tool that ensures your content is perfectly balanced in the middle, no matter what.

Method 3: Centering with Grid

CSS Grid is another powerful layout tool that can help you center your header with precision. If Flexbox is like a Swiss Army knife, Grid is like having a full toolbox.

Here’s an example of how to center your header using CSS Grid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Header with Grid</title>
  <style>
    header {
      display: grid; /* Activates Grid layout */
      place-items: center; /* Centers both horizontally and vertically */
      height: 100px; /* Sets header height */
      background-color: #ff6f61; /* Adds an orange background */
      color: white; /* Makes the text white */
    }
  </style>
</head>
<body>
  <header>
    <h1>Centered with Grid</h1>
  </header>
</body>
</html>

Here’s what’s happening:

display: grid;: Turns the header into a grid container.
place-items: center;: Centers the content in both directions—no extra code needed!
height: 100px;: Sets a fixed height for the header.

Using Grid is like hiring a professional organizer for your layout—it keeps everything neat and in place.

Bonus Tip: Centering Multiple Elements

If you want to center more than just a heading, like a logo or navigation links, you can use the same methods. Here’s an example with Flexbox:

<header>
  <div>
    <img src="logo.png" alt="Website Logo" style="width: 50px;">
    <h1>My Website</h1>
  </div>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

By combining Flexbox with some creative CSS, you can make everything look polished and professional.