title: Where should I place HTML5 semantic tags when using Bootstrap?
body: <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>