HTML Markup for the Header

Before we write our markup, let’s take a look at our site’s header design.

It is a very minimal Header design. The Header design is divided into two columns. We will be outputting logo on the left and navigation menu on the right.

Writing the HTML markup for a WordPress website is exactly the same as writing the markup for a plain HTML/CSS website.

So, go back to the header.php file and put the following HTML markup right after the body tag:

<header role="banner">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="logo">
                </div>
            </div>
            <div class="col-sm-8">
                <nav class="primary-navigation">
                </nav>
            </div>
        </div>
    </div>
</header>

This is all the markup we need for creating a good-looking header.

I achieved the two column layout using the Bootstrap classes.

<div class="logo"> is the place where we will be outputting the logo.

<nav class="primary-navigation"> is the place where we will be outputting our site’s primary navigation.

So, in the next lesson, we will deal with the site’s logo.