我应该在哪里使用bootstrap放置HTML5语义标签？

Question

这里至少有两个类似的问题：

• More semantic html 5 code with bootstrap 3?

• Should we include the bootstrap container class inside or outside of html semantic class article?

但我恐怕没有人能正确回答。问题是不知道section是否可以在main之外使用或类似的东西。在标记中使用带有引导容器，行，列的HTML5语义标记时，这是一个更简单的问题。

基本上，最佳做法是什么？

选项a）

<div class="container">
 <div class="row">
  <div class="col-md-12">
   <article> <!-- INSIDE -->
   </article>
  </div>
 </div>
</div>

选项b）

<article> <!-- OUTSIDE -->
 <div class="container">
  <div class="row">
   <div class="col-md-12">
   </div>
  </div>
 </div>
</article>

Answer 1

<article>元素是网页的独立组件。 <div>元素是一个通用元素，它不会创建切片内容，而应主要用于样式。

您拥有的唯一语义标记是<article>。

但是，如果将这些div元素设置为网格的一部分，则可能会出现问题。由于文章应该是页面其余部分的独立可分发部分，因此该网格也应该只是文章元素的一部分。

Answer 2

您的article应该包含内容，而不是布局。

区别在于article是一列，还是article是一列。从理论上讲，你的CSS可以用不同的方式解释它们。

我个人更喜欢选项“a”，因为它会将article分隔为内容单元，您可以在不同的布局中移动。