我如何使用语义技术在块上划分标题：例如：包含以下内容的标题：徽标图像，搜索…？

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> 

这是我建议的最佳结构，希望对您有所帮助