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

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

HTML 仕様:

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

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

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

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

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

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

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

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

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

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

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

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

記事

HTML 仕様:

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

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

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

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

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

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

例:

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