Как я могу разделить заголовок на блоки, используя технику семантики: например: заголовок, который содержит: изображение логотипа, поиск ...?

Question

Как я могу использовать раздел, как блок для логотипа и поиска? Я прочитал много статей о семантике, но, к сожалению, нигде не нашел информации или примеров по этому поводу. Как я могу структурировать код по блокам, как это происходит с помощью

   <header>
<section> (instead of div I know it is not correct )
          <a href="#">
            <img src="images/logotype.png" alt="logo"  class="logo">
        </a>
</section>
    <section class="search"> 
             <span><i class="fa fa-search"></i></span>
             <input type="search" placeholder="Srearch here"> 
    </section>
    <nav>
        <ul>
            <li><a href="#aboutUs">About</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Tropic  Islands</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav> 
</header> <!-- header -->

Answer 1

figure img{
display:block;
  width:50px
}
header{
  display:flex;
  align-items:center;
  background-color: #ccc
}

<header>
  <figure>
   <a href="#">
        <img src="images/logotype.png" alt="logo"  class="logo">
    </a>
  </figure>
  <nav>
    <a href="">Home</a>
    <a href="">About</a>
    <a href="">Contact</a>
    <a href="">About US</a>
  </nav>
</header>

Это лучшая структура, которую я предлагаю, надеюсь, это поможет вам