这种类型的html5标记是否理想用于​​具有语义元素的div？

Question

我正在尝试将语义标签用作分配的一部分，但也希望将divs用作样式的容器。仅将语义元素用作容器会更有效，还是div的某些功能使其优于使用section标签，特别是在添加JavaScript / jQuery方面？

例如，我要使用的特定骨架用于我正在构建的致敬页面，顶部将是对图像的简短介绍，而底部将是具有图片描述的图像库。抱歉，这似乎是一个平凡的问题。

<div class="header-container">
  <header>
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </header>
</div>
<main>
  <div class="top-container">
    <section id="top-section">
      <h3>Section Title</h3>
      <article>
        <img src="#">
        <p>Short paragraph.</p>
      </article>
    </section id="top-section">
  </div>
  <div class="bottom-container">
    <section id="bottom-section">
      <h3>Timeline</h3>
      <div class="timeline-container">

      </div>
      <article>
        <p>Short paragraph about.</p>
      </article>
    </section>
  </div>
</main>
<div class="footer-container">
  <footer>
    <p>Typical Footer Section</p>
  </footer>
</div>