HTMLのdivタグ、sectionタグ、acticleタグの違いは何ですか?

はじめに:

私は当初、これら 3 つのタグは似たような機能を持つものだと思っていましたが、後で関連情報を確認したところ、両者には違いがあることに気付きました。

(学習ビデオ共有: html ビデオ チュートリアル)

両者の違いを紹介します:

1. div 要素:

セマンティクスはありません。ドキュメント内のパーティションやセクションを定義するためのレイアウトおよびスタイル タグとして使用され、コンテナに相当します。これは主に大きなフレーム レイアウトとして使用されます。つまり、Web ページの骨格は主に div によって構築されますが、Web ページの肉体は、span、p、ul などの要素によって完成されます。

2. セクション要素:

セクション要素は、HTML5 に新しく追加された構造要素であり、さらなるセマンティクスを持っています。章、ヘッダー、フッター、ページのその他の部分など、ページ内のコンテンツ ブロックを表します。 h1、h2、h3、h4、h5、h6 およびその他の要素と組み合わせて使用​​して、文書構造をマークできます。

3. Article 要素:

article 要素も、HTML5 で新しく追加された構造要素です。a は特別なセクション タグであり、セクションよりも明確なセマンティクスを持ちます。これは、ブログの記事など、ページ上の上下に関係のない独立したコンテンツの一部を表す、関連コンテンツの独立した完全なブロックを表します。

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

<article>

	<header>
		<h1>article元素的嵌套使用</h1>
		<p>发表日期：<time pubdate="pubdate">2019/8/6</time></p>
	</header>

	<p>此标签里显示的是article整个文章的主要内容，下面的section元素里是对该文章的评论</p>

	<section>
		<h2>评论</h2>
		<article>
			<header>
			
				<h3>发表者：Cherish599</h3>
				<p>1小时前</p>
				</header>
		
			<p>这篇文章很不错啊，顶一下！</p>
		</article>
	
		<article>
			<header>
			
				<h3>发表者：兩個西柚</h3>
				<p>2小时前</p>
				</header>
		
			<p>这篇文章真棒，对article的嵌套解释的很详细</p>
			</article>
	</section>
</article>

概要:

div、section、article のセマンティクスは最初から作成され、徐々に拡張されます。 div にはセマンティクスがなく、スタイル付きまたはスクリプト化されたタグとしてのみ使用されます。テーマ別コンテンツの場合はセクションが適用され、コンテンツをコンテキストから分離して完全で独立したコンテンツとして使用できる場合は記事が適用されます。原則として、article を使用できる場合はセクションも使用できますが、実際には、article を使用した方が適切な場合は、セクションを使用しないでください。

関連する推奨事項: html チュートリアル

以上がHTMLのdivタグ、sectionタグ、acticleタグの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。