HTML5の記事とセクションの違いを詳しく紹介

コンテンツブロックとは、HTMLページを論理的に分割する単位を指します。ページ型 Web サイトの場合、ナビゲーション メニュー、記事本文、記事コメントなどの各部分をコンテンツ ブロックと呼ぶことができます。
Article 要素
Article 要素は、外部から独立して参照できる、ドキュメント、ページ、またはアプリケーション内の独立した完全なコンテンツを表します。ブログや新聞の記事、フォーラムの投稿、ユーザーのコメント、スタンドアロンのプラグイン、またはその他のスタンドアロンのコンテンツにすることができます。通常、記事要素にはコンテンツに加えて、独自のタイトル (通常はヘッダー要素内に配置) があり、場合によっては独自の脚注もあります。

<article>      
<header>         　　　　
<h1>标题</h1>           
<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>　　
</header>
　　<p>article的使用方法</p>      　　
　　<footer>            
　　<p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>　　
　　</footer>
　　</article>

注: article要素はネストすることができ、原則として内部のコンテンツは外部のコンテンツと関連している必要があります。たとえば、ブログ投稿では、article 要素を使用して記事へのコメントをネストできます。コメントを表示するために使用されるarticle 要素は、コンテンツ全体を表すarticle 要素に含まれます。
ネストされたコードは次のとおりです:

<article>

　　<header>
            <h1>article元素使用方法</h1>
　　　　<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
　　</header>

　　<p>此标签里显示的是article整个文章的主要内容，，下面的section元素里是对该文章的评论</p>
      
　　<section>
            <h2>评论</h2>
　　　　<article>
                  <header>
　　　　　　　　<h3>发表者：maizi</h3>
　　　　　　　　<p><time pubdate datetime="2016-6-14">1小时前</time></p>
　　　　　　</header>  
　　　　　　<p>这篇文章很不错啊，顶一下！</p>
           </article> 
　　　　<article>
                  <header>            
　　　　　　　　<h3>发表者：小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>
　　　　　　</header>
　　　　<p>这篇文章很不错啊，对article解释的很详细</p>  
　　　　</article>
      </section>
</article>

サンプルコンテンツは、header要素に記事タイトルを配置し、header要素の後のp要素に記事本文を配置します。セクション要素はテキストとコメントを分割しており、コメントの内容はセクション要素に埋め込まれており、コメント内の各人のコメントは比較的独立しています。 complete. なので、それらすべてにarticle要素が使用されます。コメントのarticle要素は、タイトル部分とコメント内容部分に分けられ、それぞれheader要素とp要素に配置されます。
1.セクション要素は、ウェブサイトやアプリケーションのページ上のコンテンツを分割するために使用されます。セクション要素の機能は、ページ上のコンテンツをセクションに分割すること、または記事をセクションに分割することです。 ; 2. 通常、セクション要素はコンテンツとそのタイトルで構成されます。通常、タイトルのないコンテンツにセクション要素を使用することはお勧めできません。

3. コンテンツを直接スタイル設定する必要がある場合、またはスクリプト

動作

を通じて定義する必要がある場合、セクション要素は通常のコンテナ要素ではありません。セクション要素の代わりに p を使用することをお勧めします。 4.article、nav、aside 要素がすべて特定の条件を満たす場合は、セクション要素を使用してそれらを定義しないでください。セクション要素のコンテンツは、データベースに個別に保存することも、Word ドキュメントに出力することもできます。

　<section>
　　　　<h1>section元素的</h1>标题
　　　　<p>section区块的主题部分</p>
　　</section>

HTML5

では、ナビゲーションバー、メニュー、著作権メモなど、すべてのページの下位部分を統一ページに含めて、CSSスタイルを使用して装飾できるようにすることができます。最後に、section 要素の使用に関するタブーを以下にまとめます。 1) Section 要素を、スタイルを設定するためのページコンテナーとして使用しないでください。これは、p 要素の役割です。 2)article 要素、side 要素、n​​av 要素の使用の方が適している場合は、section 要素を使用しないでください。 3) タイトルのないコンテンツブロックにはセクション要素を使用しないでください。

3. 2 つの違い:

上記で多くのことを述べてきましたが、この 2 つの違いは何でしょうか?実際、HTML5 では、article 要素は、section 要素よりも独立性を重視した特殊なタイプの Section 要素とみなすことができます。つまり、section 要素は分割またはチャンク化を強調し、article は独立性を強調します。具体的には、コンテンツが比較的独立していて完全な場合は、article 要素を使用する必要がありますが、コンテンツを複数の段落に分割する場合は、section 要素を使用する必要があります。さらに、HTML5 では、CSS スタイルを使用する場合、p 要素がコンテナーとなり、CSS スタイル全体をこのコンテナーに適用できます。

以上がHTML5の記事とセクションの違いを詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。