标题中的实用程序栏，徽标和主导航的正确语义标记

Question

我正在尝试为下面的设计标题部分创建一个合适的语义标记。

请this bootstrap theme的标题部分（抱歉，由于声誉限制，我无法添加图片）

请参阅以下代码

<header role="banner">
  <a href="#main-content">Skip to main content</a>
  <div class="utility-bar">
    <ul>
      <li><span>Mail</span>
      </li>
      <li><span>Number</span>
      </li>
    </ul>
    <ul>
      <li><span>Social Link 1</span>
      </li>
      <li><span>Social Link 2</span>
      </li>
      <li><span>Social Link 3</span>
      </li>
      <li><span>Social Link 4</span>
      </li>
      <li><span>Social Link 5</span>
      </li>
    </ul>
  </div>
  <a href="#">
    <img src="img/logo.svg">
  </a>
  <nav role="navigation">
    <ul>
      <li>
        <a href="#">Main 1</a>
        <ul>
          <li><a href="#">SubMenu 1</a>
          </li>
          <li><a href="#">SubMenu 2</a>
          </li>
          <li><a href="#">SubMenu 3</a>
          </li>
          <li><a href="#">SubMenu 4</a>
          </li>
          <li><a href="#">SubMenu 5</a>
          </li>
        </ul>
      </li>
      <li>Main 2</li>
      <li>Main 3</li>
      <li>Main 4</li>
      <li>Main 5</li>
      <li>Main 6</li>
    </ul>
    <button title="Show / Hide menu">
      <img src="burger.png" alt="Show / Hide menu">
    </button>
  </nav>
</header>

从阅读有关HTML5Doctor等网站中的语义和stackoverflow中的帖子的文章。我有以下疑问。

1. 我们应该在哪里放置“实用工具栏”/“顶栏”，其中包含 社交链接和联系方式？我们应该把它放在一边吗？ 在标题标记之外，因为它是网站的切向内容。
2. 使用H1作为带有文本缩进的徽标的诀窍，不建议 了吗？
3. 我们应该在哪里放置汉堡图标以进行自适应视图。有些不会将其放在标记中，而是使用javascript添加它。这是推荐的方式。如果我们把它放在标记中，哪里是合适的地方。