<main>列ラッパーとしてタグ

Question

（サイドバーなどの記事や他のラッパーとして1）その下に2つの列の私は、ヘッダーでウェブサイトを持っているとしましょう。

<main> 
    (articles here) 
</main> 
<aside class="sidebar"> 
    (sidebar here) 
</aside> 

または私は<div>でこれ<main>をラップする必要があります？今、私はそれらの記事のラッパーとしてmainを使用することができますか一般的に

<div id="left-column"> 
    <main> 
     (articles here) 
    </main> 
</div> 
<aside class="sidebar"> 
    (sidebar here) 
</aside> 

：我々は（通常div要素のドメインである）CSSでスタイリング/表示目的のためにも意味タグを使うことができますか？

Answer 1

「新しい」HTML5要素は、input[type="hidden"]またはhead ^^ではなくdivまたはspanまたはpまたはh6のような要素です。彼らは意味を持って来るが、それは（多分メインを除く）IE9 +であるそれらをサポートするブラウザで、スタイリングに来るとき、あなたはそれらまたはfloatまたはposition: relativeあるいはdisplay: inlineをdisplay: flexすることができます。
IE8にはhtmlshivというポリフィルが必要でしたが、それはうわーです。 （MSもそれを実行できるOSをサポートしていないので！）IE8をサポートしていません

を脇にメインと前の兄弟に記事やセクションかもしれないと私は脇に含まれると思います。

<main role="main"> 
    <article><!-- or section? --> 
    (articles here) 
    </article> 
    <aside class="sidebar"> 
    (sidebar here) 
    </aside> 
</main> 

Answer 2

あなたはCSSのフックが必要ですが、要素の使用が適切であるならば、それは完全に罰金で、良い練習が、としても、彼らにをを使用するという理由だけでこれらのセマンティック要素を追加しない必要がありますCSSのフック。あなたはスタイリング上の理由から、あなたの既存の要素よりも多くを必要とする場合

、（彼らは唯一の「非セマンティック」/ meaningless要素があるとして）span/div要素を追加します。

span/divを追加すると、スタイルを設定したい意味要素ごとにマークアップが膨らんで、理解/維持が難しくなります。 HTML5で導入された要素（mainなど）のために、これを行う理由は1つあります。これらの新しい要素をサポートしていない古いブラウザで特定のスタイルを実現する必要がある場合。