HTML5 の新しいセマンティック要素について理解しようとしています。
<section>
は の中に属していますか、<article>
それともその逆ですか? それも問題ですか?
ワードプレスのブログの再構築を検討しています。
HTML5仕様から:
この
section
要素は、一般的なドキュメントまたはアプリケーション セクションを表します。このコンテキストでのセクションは、通常はヘッダーと場合によってはフッターを含む、テーマ別のコンテンツのグループです。
と
article
要素は、ドキュメント、ページ、またはサイトの独立したセクションを表します。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、またはその他の独立したコンテンツ アイテムである可能性があります。
したがって、必要に応じて、要素section
と要素の両方article
に他の要素を含めることができます。ネストされたセクション要素を除けば、図は理にかなっていると思います。
section 要素は、一般的なコンテナー要素ではありません。スタイルの目的やスクリプト作成の利便性のために要素が必要な場合、作成者は代わりに div 要素を使用することをお勧めします。一般的な規則として、section 要素は、要素の内容がドキュメントのアウトラインに明示的に記載されている場合にのみ適切です。
たぶん<div>
、外側のものに a を使用しますか?
HTML5の構造化に関する W3 wiki ページには、次のように書かれています。
<section>
: さまざまな記事をさまざまな目的や主題にグループ化するか、1 つの記事のさまざまなセクションを定義するために使用されます。
次に、クリーンアップした画像を表示します。
タグの使用方法を知ることも重要です<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>
内側のセクションのすぐ内側に見出しがない限り、外側のセクションにはdivを使用し、内側のセクションにはdivを使用します。
Ta
リッチ
詳細については、 http://html5doctor.com/the-section-element/を参照してください。