ブートストラップを使用してHTML5セマンティックタグを配置する必要がありますか？

Question

は、ここで、少なくとも2つの同様の質問があります。

• 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はレイアウトではなくコンテンツを含む必要があります。

articleが列であるかどうか、またはarticleに列があるかどうかが異なります。理論的には、あなたのCSSはこれらを異なって解釈することができます。

articleを別のレイアウトで移動するコンテンツの単位として分離するため、私は個人的にオプション "a"を選択します。

Answer 2

<article>要素は、ウェブページの独立成分です。 A <div>要素は、セクションコンテンツを作成しない一般的な要素であり、主にスタイリングに使用する必要があります。

あなたが持っている唯一のセマンティックタグは<article>です。

ただし、これらのdiv要素がグリッドの一部としてスタイリングされていると問題が発生することがあります。記事は他のページの独立した、配布可能な部分であると考えられているので、そのグリッドも記事要素の一部でなければなりません。