コメント：HTML5は一連の新しい要素をもたらします。次の2つの新しい要素は、記事とセクションが非常に混乱しています。これらの要素を使用する必要がある状況についてよく言及します。次に、2つのアプリケーションを紹介します。興味のある人はそれを参照できます。
HTML5は一連の新しい要素をもたらし、将来的に広く使用されます。ただし、次の2つの新しい要素を含む、使用すると簡単に混同されます。<ports>と<section>。
最も一般的な質問は、これらの要素をどのような状況で使用すべきかということです。そして、これらの要素を正しく使用するにはどうすればよいですか？
セクション要素
これは最も曖昧な要素です。それと<div>要素の違いは何ですか？ <div>を使用して段落を分割していますが、<div>を除いて、この要素をいつ使用しますか？それを説明するために公式の文書を引用します。 WhatWGドキュメントによると、<section>要素については、次の説明が作成されています。
<section>要素は、ドキュメントまたはアプリケーションの一般的な段落を表します - whatwg
説明から、<section>要素の関数はセグメンテーションであり、多かれ少なかれ<div>に類似していることがわかります。しかし、それはまだ特別なケースを持っています。ドキュメントには、特別な声明が追加されます。
要素がスタイルまたはスクリプトの利便性にのみ使用される場合、著者は<div>を使用することをお勧めします。 <section>要素は、要素のコンテンツを明示的にリストする必要がある場合に適しています。 -whatwg
この点に基づいて、次の2つのポイントを要約できます。
まず、セクション要素は技術的にはスタイリングですが、複雑なスタイルやスクリプトがある場合は、DIV要素を使用することをお勧めします。
第二に、<li>要素と同様に、セクション要素はコンテンツを列挙するために使用されます。
したがって、現実的な例では、<section>要素を使用する理由は、ブログのコンテンツを構成することです。コードは次のとおりです。
<div>
<section>
<h2>ブログ投稿タイトル</h2>
<p>アイスクリームタルトパウダーゼリーオ。
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O。</p>
</section>
<section>
<h2>ブログ投稿タイトル</h2>
<p>アイスクリームタルトパウダーゼリーオ。
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O。</p>
</section>
<section>
<h2>ブログ投稿タイトル</h2>
<p>アイスクリームタルトパウダーゼリーオ。
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O。</p>
</section>
</div>
これは単なる例であり、<section>要素は他の目的にも使用できます。
記事要素
名前から、それはすでに自分自身をうまく解釈していますが、公式のドキュメントでそれがどのように説明されているかをまだ見なければなりません。
ドキュメント、ページ、アプリケーション、またはサイトの別のセクション、および一般的に、発行時など、独立して割り当てまたは再利用できます。これは、フォーラムの投稿、雑誌またはニュース、ブログエントリ、ユーザーがサビされたコメント、インタラクティブウィジェットまたはウィジェット、またはその他のスタンドアロンプロジェクトのコンテンツです。
上記の説明から、<ports>要素は構造化された記事、特にブログ、ページコンテンツ、フォーラムの投稿など、公開したい記事に専念していることを要約できます。
次の例は、<porth>を使用してブログ投稿を作成する方法を示しています。
<記事>
<ヘッダー>
<h1>これはブログ投稿のタイトル</h1>です
<div>
<ul>
<li>著者名</li>
<li>カテゴリを保存</li>
</ul>
</div>
</header>
<div>
Sweet Roll Halvah Biscuit Toffee Liquarice Tart Puddingセサミスナップ。
ビスケットパウダージェリーフルーツケーキファワリチョコレートバー。プリンオート麦
ケーキのトーチーロールセサミスナップロリポップジンジャーブレッドボンボン。グミ
Halvah Gummiesデンマークのビスケットは、ジンジャーブレッドゼリーオペストリーを適用します。
</div>
</article>
さらに、<ports>要素は、セクション要素と結合することもできます。必要に応じて、<section>要素を使用して、次の例に示すように、記事をいくつかの段落に分割できます。
<記事>
<ヘッダー>
<h1>これはブログ投稿のタイトル</h1>です
<div>
<ul>
<li>著者名</li>
<li>カテゴリを保存</li>
</ul>
</div>
</header>
<div>
<section>
<h2>これはサブヘッド</h2>です
Sweet Roll Halvah Biscuit Toffee Liquarice Tart Puddingセサミスナップ。
ビスケットパウダージェリーフルーツケーキファワリチョコレートバー。プリンオート麦ケーキ
Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon。ガミー・ハルバ
Gummies Danish Biscuitは、ジンジャーブレッドゼリーオペストリーを適用します。
</section>
<section>
<h3>これは別のサブヘッド</h3>です
トッピングチーズケーキスイートパイニンジンケーキスイートロール。グミはレモンドロップをベアリングします
Toffee Sesame SnapsタルトトッピングChupa Chups Apple Pie Gummies。ウェーハチョコレート
ケーキ。シュガープラムチョコレートバートッピングアイスクリームニンジンケーキデンマークボンボン。
チーズケーキグミはドラッジジュジュベのドラガードラッジブラウニーゼリービスケットをベアーズします。パウダークロワッサンゼリービーンズペストリー。
</section>
</div>
</article>
要約します
World Wide Webの創設者とW3Cのディレクターによって予測されたように、HTML5によって作成されたすべての新しい要素は、ネットワーク構造をよりセマンティックにする目的です。 Web開発者とデザイナーの間で、これらの要素を正しく適用する方法はまだ議論されています。
何があっても、視点を混同しないでください。前に述べたように、それが合理的な状況であり、それを使用すると構造が意味のあることがわかる限り、それを使用してください。