HTML5_html5チュートリアルスキルのdiv、section、articleの違いを詳しく解説

初めて HTML5 に触れたとき、私はそのタグに非常に不快感を覚え、少し嫌悪感さえ感じました。特に div、section、article のタグは、どのようなときに使用すればよいのかよくわかりません。
div

HTML 仕様:

div 要素には特別な意味はまったくありません。

このタグは、私たちが最もよく目にし、使用するタグです。それ自体にはセマンティクスはなく、レイアウト、スタイル設定、またはスクリプトのフックとして使用されます。
セクション

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

div のセマンティクスとは対照的に、簡単に言えば、セクションはセマンティクスを備えた div ですが、実際はそれほど単純ではありません。セクションは、通常はタイトルが付いた話題のコンテンツを表します。これを見ると、ブログ投稿や個別のコメントでセクションを使用するだけでよいのではないかと思うかもしれません。次に読む:

要素の内容をシンジケートすることが合理的である場合、著者は、section 要素の代わりに、article 要素を使用することをお勧めします。

要素の内容をより意味のあるものに集約する場合は、セクションの代わりに記事を使用する必要があります。

それでは、セクションはいつ使用する必要があるのでしょうか?続きを読む:

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

セクション アプリケーションの一般的なシナリオには、記事の章、タブ ダイアログ ボックスのタブ、または論文内の番号付きセクションが含まれます。 Web サイトのトップページは、紹介文、ニュース、連絡先情報などのセクションに分けることができます。実際、私はここで伝えられる情報に非常に興味を持っています。なぜなら、以下で紹介するセクションと記事の方がモジュール型アプリケーションに適していると思うからです。このトピックについては、将来特別な記事で説明する予定なので、ここでは省略します。今のところ。

W3C も次のように警告していることに注意してください。

セクション要素は汎用のコンテナ要素ではありません。スタイル設定の目的やスクリプトの利便性のために要素が必要な場合、作成者は代わりに div 要素を使用することが推奨されます。要素の内容はドキュメントのアウトラインに明示的にリストされます。"

セクションは単なる通常のコンテナタグではありません。タグがスタイル設定のみを目的とした場合、またはスクリプト作成を容易にするための場合は、div を使用する必要があります。一般に、要素のコンテンツがドキュメントのアウトラインに明示的に表示される場合、セクションは適切です。

XML/HTML コードコンテンツをクリップボードにコピー

1. <記事>
2. <hgroup> <h1 >リンゴh1> <h2>おいしい、おいしいフルーツ!h2> hgroup>
3. <p>リンゴは、リンゴの木の粕状の果実です。p>
4. <セクション>
5. <h1>レッドデリシャスh1>
6. <p>これらの鮮やかな赤いリンゴは、多くのスーパーマーケットで最も一般的に見られるものです。p>
7. セクション>
8. <セクション>
9. <h1>グラニースミスh1>
10. <p>これらのジューシーな緑色のリンゴは、アップルパイの素晴らしい詰め物になります。p>
11. セクション>
12. 記事>

記事

HTML 仕様:

Article 要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結型の構成を表し、原則として、シンジケーションなどで独立して配布または再利用可能です。

article は特別なセクション タグであり、セクションよりも明確なセマンティクスを持ち、関連するコンテンツの独立した完全なブロックを表します。一般に、記事にはタイトル セクション (通常はヘッダー内に含まれます) があり、場合によってはフッターが含まれます。セクションもテーマ別のコンテンツですが、記事自体は構造と内容の点で独立しており、完全です。

HTML 仕様には、記事に適用可能ないくつかのシナリオがリストされています。

これは、フォーラムの投稿、雑誌や新聞の記事、ブログエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、またはその他の独立したコンテンツ項目である可能性があります。

記事内に記事を埋め込む場合、原則として内側の記事の内容は外側の記事の内容と関連します。たとえば、ブログ投稿では、ユーザーが投稿したコメントを含む記事は、それを含むブログ投稿記事内に非表示にする必要があります。

問題は、何が「完全な独立したコンテンツ」とみなされるのかということです。見分ける最も簡単な方法の 1 つは、RSS フィード内のコンテンツが完全であるかどうかを確認することです。コンテンツが完全であり、コンテキストがなくても独立しているかどうかを確認します。

例:

XML/HTML コードコンテンツをクリップボードにコピー

1. <記事>
2. <ヘッダー>
3. <h1>人生初のルールh1>
4. <p><時間 pubdate datetime="2009-10-09T14:28-08:00">< /時間>p>
5. ヘッダー>
6. <p>近くにマイクがある場合は、熱いので何でも送信していると考えてください。と世界に向かって言っています。 p>
7. <p>... p>
8. <フッター>
9. <a href="?コメント=1">コメントを表示...a>
10. フッター>
11. 記事>
13. <記事>
14. <ヘッダー>
15. <h1>人生初のルールh1>
16. <p><時間 pubdate datetime="2009-10-09T14:28-08:00">< /時間>p>
17. ヘッダー>
18. <p>近くにマイクがある場合は、熱いので何でも送信していると考えてください。と世界に向かって言っています。 p>
19. <p>... p>
20. <セクション>
21. <h1>コメントh1>
22. <記事>
23. <フッター>
24. <p>投稿者: ジョージ ワシントンp>
25. <p><時間 pubdate datetime="2009-10-10T19:10-08:00">< /時間>p>
26. フッター>
27. <p>うん！ 特に、ロビイストの友人について話すとき!p>
28. 記事>
29. <記事>
30. <フッター>
31. <p>投稿者: ジョージ・ハモンドp>
32.                 ppp日期時間="2009-10-10T19:15-08:00">時間>p>
  
33.             頁腳>
34. 頁腳>頁腳>            p>p>
35. 嘿，你的名字和一樣，你的名字和一樣。 p>  
36.         文章>       
37. 部分>    

文章

>

    

    

    

總結

div節文章，語意是從無到有，逐漸增強的。 div無任何語義，只需使用樣式化或腳本化的鉤子（鉤子），對於一段主題性的內容，則就適用節，而假設內容可以脫離上下文，作為完整的獨立存在的一段內容，則就適用article。原則上來說，能使用article的時候，也可以使用section的，但實際上，如果使用article比較合適，那就適用article。不要使用section。 nav和aside的使用也是如此，這兩個標籤也是特殊的section，在使用nav和aside更合適的情況下，也不要使用section了。
對於div和section、article以及其他標籤的區分比較簡單。對於section和article的區分乍看比較難，其實重點就是看看可能內容分割了整體是不能作為一個完整的、獨立的內容而存在上面，這裡面的重點又是完整的。其實說起來部分包含的內容也能算是獨立的一塊，但它只能部分組成整體的一部分，因為文章才是完整的整體。

因為其實有些時候每個人都有自己的看法，所以難免有難於決斷的時候，怎麼辦？ 在 HTML5 設計原理中，有一條是專門用來解決類似情況的： 最終使用者優先（選區優先） 「如果發生衝突，請考慮使用者而不是作者、實現者、規範者、理論純度。」 一旦遇到衝突，最終使用者優先，其次是作者，其次是實現者，其次是標準制定者，最後才是理論的滿。 推薦各位多讀幾遍HTML5設計原理，這才是紛繁世界背後的終極奧義。