と

という 2 つの新しい要素を含め、使用が混乱する可能性のある要素がいくつかあります。
最もよくある質問は、どのような状況でこれらの要素を使用する必要があるかということです。そして、これらの要素を正しく使用するにはどうすればよいでしょうか?

セクション要素
これは最もあいまいな要素です。

要素との違いは何ですか?段落を分割するために

を使用しているため、

以外にこの要素をいつ使用する必要があります。それを説明するために公式ドキュメントを引用します。 WHATWG ドキュメントによると、

要素は次のように説明されています:
「

要素はドキュメントまたはアプリケーション内の共通の段落を表します - WHATWG」

この説明から次のようになります。

要素の目的は要素をセグメント化することであり、多かれ少なかれ

と似ています。しかし、それでも特殊なケースがあります。ドキュメントには、特別なステートメントが追加されました:
「要素がスタイルまたはスクリプトの便宜のためだけに使用される場合、作成者は

を使用することをお勧めします。

要素は、要素のコンテンツが明示的な場合に適用されます。 - WHATWG"

これに基づいて、次の 2 つの点を要約できます:
まず、セクション要素は技術的にはスタイル設定できますが、それでも使用することをお勧めします。複雑なスタイルまたはスクリプトがある場合は div 要素を使用します。
2 番目に、

要素と同様に、section 要素はコンテンツをリストするために使用されます。

実際の例では、

要素を使用する理由はブログのコンテンツを構造化するためであり、コードは次のとおりです:

コードをコピーします

コードは次のとおりです:

ブログ投稿タイトル

アイスクリームタルトパウダーゼリーオー。
グミチョコレートケーキアイスクリームクッキーハルバティラミスゼリー -

ブログ投稿タイトル

アイスクリームタルトパウダーゼリーオー。
グミチョコレートケーキアイスクリームクッキーハルバーティラミスゼリーオー。

>
アイスクリームタルトパウダーゼリー-o.
グミチョコレートケーキアイスクリームクッキーハルバティラミスゼリー-o.

これは単なる例であり、

要素は他の目的にも使用できます。

Article 要素

名前からすでに十分に説明されていますが、公式ドキュメントでどのように説明されているかをまだ確認する必要があります。「A ドキュメントでは、フォーラムの投稿、雑誌やニュース記事、ブログのエントリ、ユーザーのコメント、インタラクティブなウィジェットやウィジェット、その他のスタンドなど、一般に独立して再配布または再利用可能なサイトのページ、アプリケーション、またはセクション。
上記の説明から、

要素は、特にブログ、ページのコンテンツ、フォーラムの投稿など、公開されるもの専用であると結論付けることができます。
次の例は、

を使用してブログ記事を作成する方法を示しています。

コードをコピーします

コードは次のとおりです:

これはブログ投稿のタイトルです

著者名

カテゴリに保存

ゴマスナップ
ビスケットパウダーゼリーオーフルーツケーキファワークィチョコレートバー
ケーキトッツィロールセサミスナップロリポップジンジャーブレッドボンボン
ハルバーグミデニッシュビスケットアプリケジンジャーブレッドペストリー。 /div>

また、必要に応じて、

要素を使用することもできます。以下の例に示すように、記事を複数のセクションに分割します。

コードをコピー

コードは次のとおりです:

これはブログ投稿のタイトルです

著者名

;/div>

これはサブ見出しです ;
スイートロールハルバービスケットリコリスタルトプディングセサミスナップ
ビスケットパウダーゼリーオーフルーツケーキファワークイチョコレートバー。
トッツィーロールセサミスナップロリポップジンジャーブレッドボンボン。
グミデニッシュビスケット。アプリケークジンジャーブレッドゼリー -O ペストリー

トフィーゴマスナップタルトトッピングチュッパチャップスウエハースチョコレート
ケーキ。シュガープラムチョコレートバートッピングアイスクリームキャロットケーキデニッシュボンボン。
ドラジェドラジェブラウニーゼリービスケット。

HTML5 の創設者と W3C のディレクターが予測したように、HTML5 によって作成されたすべての新しい要素は、Web 構造をよりセマンティックにすることを目的としています。これらの要素を正しく適用するかどうかは、Web 開発者とデザイナーの間でまだ議論されています。
いずれにせよ、アイデアを混同しないでください。前に述べたように、それが理にかなっていて、それを使用すると構造が理にかなっていることがわかる場合は、それを使用してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 HTML 要素拡張 (パート 2) - 強化された Form 要素は注目に値します_html5 チュートリアルスキル次の記事：HTML5 HTML 要素拡張 (パート 2) - 強化された Form 要素は注目に値します_html5 チュートリアルスキル

続きを見る

HTML5_html5 チュートリアルのスキルにおける Article 要素と Section 要素の理解と使用

ブログ投稿タイトル

ブログ投稿タイトル

>
アイスクリームタルトパウダーゼリー-o.
グミチョコレートケーキアイスクリームクッキーハルバティラミスゼリー-o.

これはブログ投稿のタイトルです

関連記事

HTML5_html5 チュートリアルのスキルにおける Article 要素と Section 要素の理解と使用

ブログ投稿タイトル

ブログ投稿タイトル

>アイスクリームタルトパウダーゼリー-o.グミチョコレートケーキアイスクリームクッキーハルバティラミスゼリー-o.

関連記事

>
アイスクリームタルトパウダーゼリー-o.
グミチョコレートケーキアイスクリームクッキーハルバティラミスゼリー-o.