HTML 仕様: 「article 要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結型の構成を表し、原則として、シンジケーションなどで独立して配布または再利用可能です。」
article は、特殊なセクション タグ。セクションよりもセマンティクスが明確で、関連コンテンツの独立した完全なブロックを表します。一般に、記事にはタイトル セクション (通常はヘッダー内に含まれます) があり、場合によってはフッターが含まれます。セクションもテーマ別のコンテンツですが、記事自体は構造と内容の点で独立しており、完全です。
HTML 仕様には、記事に適用可能なシナリオがいくつかリストされています。 「これは、フォーラムの投稿、雑誌や新聞の記事、ブログエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、またはその他の独立したコンテンツ項目である可能性があります。」
記事が記事に埋め込まれている場合、原則として、つまり、内側の記事の内容は外側の記事の内容と関連しています。たとえば、ブログ投稿では、ユーザーが投稿したコメントを含む記事は、それを含むブログ投稿記事内に非表示にする必要があります。
問題は、何が「完全な独立したコンテンツ」とみなされるのかということです。見分ける最も簡単な方法の 1 つは、RSS フィード内のコンテンツが完全であるかどうかを確認することです。コンテンツが完全であり、コンテキストがなくても独立しているかどうかを確認します。
例:
<article><header><h1>The Very First Rule of Life</h1><p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p></header><p>If there's a microphone anywhere near you, assume it's hot andsending whatever you're saying to the world. Seriously.</p><p>...</p><footer><a href="?comments=1">Show comments...</a></footer></article><article><header><h1>The Very First Rule of Life</h1><p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p></header><p>If there's a microphone anywhere near you, assume it's hot andsending whatever you're saying to the world. Seriously.</p><p>...</p><section><h1>Comments</h1><article><footer><p>Posted by: George Washington</p><p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p></footer><p>Yeah! Especially when talking about your lobbyist friends!</p></article><article><footer><p>Posted by: George Hammond</p><p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p></footer><p>Hey, you have the same first name as me.</p></article></section></article>
HTML5 の div セクションの記事の違い
article は、ドキュメントのコンテンツの独立した断片を表します (例: ブログエントリや新聞記事)。article タグのコンテンツは、文書の残りの部分。
article は特別なセクション タグであり、セクションよりも明確なセマンティクスを持ち、関連するコンテンツの独立した完全なブロックを表します。一般に、記事にはタイトル セクション (通常はヘッダー内に含まれます) があり、場合によってはフッターが含まれます。セクションもテーマ別のコンテンツですが、記事自体は構造と内容の点で独立しており、完全です。
記事に記事を埋め込む場合、原則として内側の記事の内容は外側の記事の内容と関連します。たとえば、ブログ投稿では、ユーザーが投稿したコメントを含む記事は、それを含むブログ投稿記事内に非表示にする必要があります。
<article><a href="http://www.apple.com">Safari 5 released</a><br />7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,Apple announced the release of Safari 5 for Windows and Mac......</article>
HTML5 学習メモの簡潔版 (2): 新しい要素セクション、記事、脇
記事の主な機能は、独立性を表現することです。つまり、この記事は現在の Web ページから分離されずに価値と意味を持っています。独自のヘッダーとフッターの構造を設定できます。
HTML5のセクション記事の違いは何ですか?ヘッダー フッター ナビゲーションを理解するにはどうすればよいですか?