HTML5のdiv、section、articleの違いの分析

この記事では主にHTML5のp、section、articleの違いについて詳しく紹介しています。W3Cの記述から引用しており、必要な方は参考にしてください

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

HTML仕様:

p要素には特別な意味は全くありません。

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

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

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

要素セクションのコンテンツをシンジケートすることが合理的である場合、作成者はセクション要素の代わりに記事要素を使用することをお勧めします。

では、セクションはいつ使用する必要がありますか?続きを読む:

セクションの例としては、章、タブ付きダイアログ ボックス内のさまざまなタブ付きページ、論文の番号付きセクションなどが挙げられます。Web サイトのホームページは、概要、ニュース項目、および連絡先のセクションに分割されます。情報を適用するためのシナリオ。

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

W3C も次のように警告しています:

セクション要素は、スタイル設定の目的またはスクリプトの利便性のために必要な場合、一般的なルールとして p 要素を使用することが推奨されます。セクション要素は、要素の内容がドキュメントのアウトラインに明示的にリストされる場合にのみ適切です。」

section は、単なる通常のコンテナー タグではありません。タグが単にスタイルを設定するため、またはスクリプトの使用を容易にするための場合は、p を使用する必要があります。一般に、セクションは、要素のコンテンツがドキュメントのアウトライン、アプリケーション、またはサイトに明確に表示され、原則として、シンジケーションなどで独立して配布または再利用できる場合に適用されます。セクションよりもセマンティクスが明確で、独立した完全な関連コンテンツを表します。一般的に、記事にはタイトル部分 (通常はヘッダーに含まれます) が含まれますが、セクションにはテーマ別のコンテンツが含まれる場合もあります。記事自体は構造とコンテンツの点で独立しており、完全です

HTML 仕様には、記事に適用できるいくつかのシナリオがリストされています

これは、フォーラムの投稿、雑誌や新聞の記事、ユーザーなどです。 -投稿されたコメント、インタラクティブなウィジェットまたはガジェット、またはその他の独立したコンテンツ項目。記事が記事に埋め込まれている場合、原則として、内側の記事の内容は外側の記事の内容と関連しています。たとえば、ブログ投稿では、ユーザーが投稿したコメントを含む記事は、それを含むブログ投稿記事内に非表示にする必要があります。

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

例:

<article>
    <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup>
    <p>The apple is the pomaceous fruit of the apple tree.</p>
    <section>
        <h1>Red Delicious</h1>
        <p>These bright red apples are the most common found in many supermarkets.</p>
    </section>
    <section>
        <h1>Granny Smith</h1>
        <p>These juicy, green apples make a great filling for apple pies.</p>
    </section>
</article>

概要

pセクションの記事では、セマンティクスはゼロから開始され、徐々に強化されています。 p にはセマンティクスがなく、テーマ別コンテンツの一部としてのみ使用され、このコンテンツがコンテキストから分離され、完全で独立したコンテンツとして使用できる場合、セクションが適用されます。記事を適用します。原則として、article を使用できる場合はセクションも使用できますが、実際には、article を使用した方が適切な場合は、セクションを使用しないでください。 nav と aside の使用についても同様です。これら 2 つのタグも特別なセクションです。nav と Side を使用する方が適切な場合は、section を使用しないでください。

p とセクション、記事、その他のタグの区別は比較的簡単です。セクションと記事の区別は一見難しいように思えますが、実際には、このコンテンツが全体から切り離されることなく完全な独立したコンテンツとして存在できるかどうかが重要なポイントです。実際には、セクションに含まれるコンテンツも独立した部分と見なすことができますが、それは全体の一部とのみ見なすことができ、記事は完全な全体であるためです。

なぜなら、実際には誰もが自分の意見を持っている場合があるので、決定を下すのが難しい場合があるのは避けられないからです。

HTML5 の設計原則には、同様の状況を解決するために特別に設計された原則があります:

構成要素の優先順位

「競合が発生した場合は、理論的な純粋性よりも、作成者よりも実装者よりもユーザーを考慮する。」 、エンドユーザーが優先され、次に作成者、次に実装者、次に標準設定者、そして最後に理論的な完成度が優先されます。

HTML5 の設計原則を何度も読むことをお勧めします。これが複雑な世界の背後にある究極の秘密です。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

HTML5 のビデオタグのブラウザ互換性を強化するためのソリューションの共有

H5 の PushState と replaceState の使用分析

HTML5 Shiv を使用して IE の問題を解決する方法HTML5 タグと互換性がありません メソッド

以上がHTML5のdiv、section、articleの違いの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。