Where should I place HTML5 semantic tags when using Bootstrap?
<p>There are at least 2 similar questions in here:</p>
<ul>
<li><p><a href="https://stackoverflow.com/questions/31156922/more-semantic-html-5-code-with-bootstrap-3">More semantic html 5 code with bootstrap 3?</a></p>
</li>
<li><p><a href="https://stackoverflow.com/questions/27857028/should-we-include-the-bootstrap-container-class-inside-or-outside-of-html-semant">Should we include the bootstrap container class inside or outside of html semantic class article?</a></p>
</li>
</ul>
<p>But I am afraid nobody has answered properly none of them. The question is not to know if <code>section</code> can be used outside <code>main</code> or something like that. It is a simpler question in terms of the right practice when using HTML5 semantic tags with Bootstrap containers, rows, columns in your markup.</p>
<p>Basically, what is the best practice?</p>
<p>Option a)</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
 &lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-md-12&quot;&gt;
   &lt;article&gt; &lt;!-- INSIDE --&gt;
   &lt;/article&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Option b)</p>
<pre class="lang-html prettyprint-override"><code>&lt;article&gt; &lt;!-- OUTSIDE --&gt;
 &lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
   &lt;div class=&quot;col-md-12&quot;&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/article&gt;
</code></pre>