HTML5で「セクション」タグを正しく使用する方法

HTML5でレイアウトを作成しようとしていますが、いくつかの記事を読んだ後、混乱しました。私はそれがどのように使われるべきかについていくつかの入力を得ようとしています。

以下は私が行ったり来たりするバリエーションです：

1）

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

コンテナのように機能するためにセクションタグを使用できますか？

2）

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

<section>タグを使用する正しい方法は何ですか？

答えは現在の仕様にあります：

section要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。このコンテキストでは、セクションはコンテンツのテーマ別グループであり、通常は見出しが付いています。

セクションの例としては、章、タブ付きダイアログボックスのさまざまなタブ付きページ、または論文の番号付きセクションがあります。Webサイトのホームページは、紹介、ニュース項目、連絡先情報のセクションに分割できます。

作成者は、要素のコンテンツをシンジケートすることが理にかなっている場合、section要素の代わりにarticle要素を使用することをお勧めします。

section要素は、一般的なコンテナ要素ではありません。スタイリングの目的で、またはスクリプトの便宜のために要素が必要な場合、作成者は代わりにdiv要素を使用することをお勧めします。原則として、section要素は、要素のコンテンツがドキュメントのアウトラインに明示的にリストされている場合にのみ適切です。

参照：

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

こちらもご覧ください：

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

この要素の目的については多くの混乱があったように見えますが、合意されていることの1つは、このような一般的なラッパーではないということ<div>です。CSSやJavaScriptフックではなく、セマンティックな目的で使用する必要があります（ただし、スタイルを設定したり「スクリプト化」することはできます）。

私の理解から、より良い例は次のようになるでしょう：

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

なお<div>、完全に非セマンティックている、HTMLの仕様がそれを許可しますが、必要ではないことを文書でどこでも使用することができます。

で構造化HTML5についてW3のwikiページ、それは言います：

<section>：異なる記事を異なる目的または主題にグループ化するため、または単一の記事の異なるセクションを定義するために使用されます。

そして、私がクリーンアップした画像を表示します：

<article>タグの使用方法を知ることも重要です（上記の同じW3リンクから）：

<article>はに関連して<section>いますが、明らかに異なります。<section>コンテンツまたは機能の個別のセクションをグループ化するためのものであるのに対し<article>、個々のブログ投稿、ビデオ、画像、ニュースアイテムなど、関連する個々のスタンドアロンコンテンツを含めるためのものです。このように考えてください。多数のコンテンツアイテムがあり、それぞれが単独で読むのに適しており、RSSフィードで個別のアイテムとしてシンジケートするのが理にかなっている場合<article>は、それらをマークアップするのに適しています。

この例で<section id="main">は、ブログエントリが含まれています。各ブログエントリは、RSSフィードのアイテムとしてシンジケートするのに適しており、コンテキスト外でそれ自体を読んだときに意味をなす <article>ため、それらに最適です。

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

簡単でしょ？ただし、記事内にセクションをネストすることもできます。たとえば、これらのブログ投稿のそれぞれに異なるセクションの一貫した構造がある場合、記事内にセクションを配置することもできます。次のようになります。

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

私の理解では、SECTIONには、ページの「フロー」の重要な部分（脇書きではない）の見出しが付いたセクションがあります。SECTIONは、章、ドキュメントの番号付き部分などです。

ARTICLEはシンジケート化されたコンテンツ用です。たとえば、投稿、ニュース記事などです。ARTICLEとSECTIONは完全に独立しています。非常に異なるユースケースであるため、一方を他方なしで使用できます。

SECTIONのもう1つは、ページにセクションが1つしかない場合は使用しないことです。また、各セクションには見出し（H1-6、HGROUP、HEADING）が必要です。見出しはSECTIONとともに「スコープ」されます。たとえば、メインページ（SECTION外）でH1を使用し、セクション内でH1を使用すると、後者はH2として扱われます。

仕様の例は、執筆時点ではかなり良好です。

したがって、記事として説明できないコンテンツのセクションがいくつかある場合、最初の例は正しいでしょう。（マイナーな点として、スタイルフックに必要な場合を除き、＃primary DIVは必要ありません-Pタグの方が優れています）。

2番目の例は、すべてのSECTIONタグを削除した場合に正しくなります。そのドキュメントのデータは、記事、投稿、またはこのようなものになります。

SECTIONはコンテナとして使用しないでください。DIVは依然として正しい使用法であり、他のカスタムボックスも考えられるでしょう。

確実にセクションタグをコンテナとして使用できます。divを使用するよりも、またはhtml5仕様にあるように、意味的に重要な方法でコンテンツをグループ化するためにあります。

section要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。このコンテキストでは、セクションはコンテンツのテーマ別グループであり、通常は見出しが付いています。 http://www.w3.org/TR/html5/sections.html#the-section-element

正しい方法は＃2です。セクションタグを使用して、ドキュメントのセクションを定義しました。仕様http://www.w3.org/TR/html5/sections.htmlから：

セクション要素は、一般的なコンテナ要素ではありません。スタイリングの目的で、またはスクリプトの便宜のために要素が必要な場合、作成者は代わりにdiv要素を使用することをお勧めします

それはただ間違っています：ラッパーではありません。要素はコンテンツのセマンティックセクションを示し、ドキュメントの概要を構築するのに役立ちます。見出しが含まれている必要があります。（任意のHTMLまたはXHTMLの）ページラッパー要素を探している場合は、Kroc Camenの説明に従って、要素にスタイルを直接適用することを検討してください。それでもスタイリングに追加の要素が必要な場合は、を使用します。マイク博士が説明しているように、divは死んではいません。他に適切なものがなければ、CSSを実際に適用したい場所です。

あなたはこれをチェックすることができます：http : //html5doctor.com/avoiding-common-html5-mistakes/