Simple Header HTML markup with ARIA(Accessible Rich Internet Applications)

header.html

<header class="header-group" role="banner">
  <div class="header-inner">
    <div class="header-titles-wrapper">
      <div class="header-titles">
        <!-- .site-title or .site-logo -->
        <h1 class="site-title">
          <a href="#">Site Title</a>
        </h1>
        <!-- .site-description -->
        <div class="site-description">Site Description</div>
      </div>
      <!-- .header-titles -->
    </div>
    <!-- .header-titles-wrapper -->
    <div class="header-navigation-wrapper">
      <nav
        class="primary-menu-wrapper"
        aria-label="Horizontal"
        role="navigation"
      >
        <ul class="primary-menu">
          <li>
            <a>Blogs</a>
          </li>
        </ul>
      </nav>
      <!-- .primary-menu-wrapper -->
    </div>
    <!-- .header-navigation-wrapper -->
  </div>
  <!-- .header-inner -->
</header>
<!-- #site-header -->