Header + Navigation

Step 1. Input schema in HTML

I am going to use four kinds of schema for header:

  • Header schema.org
<header role="banner" itemscope itemtype="http://schema.org/WPHeader"></header>
  • Nav schema.org
<nav role=”navigation” aria-label=”Main navigation” itemscope=”” itemtype=”http://schema.org/SiteNavigationElement"></nav>
header.html
  • Blog schema.org
<main class=”o-main” role=”main” id=”main” itemscope=”” itemprop=”mainContentOfPage” itemtype=”http://schema.org/Blog">

Header, Logo and Nav schema will markup in Header.html

Only Blog schema will markup in index.html

Step 2. Markup HTML

1) Layout first

First of all, make a big layout below image:

HTML Layout

According to the above code, the output will be like below:

And then I’m going to use Flexy boxes to change layout below image:

.p-header__container {
align-content: stretch;
align-items: center;
display: flex;
flex-direction: row;
flex-flow: nowrap;
justify-content: space-between;
}

The result will be like below:

2) Make a style

To be continued!!!!