Quelle est la différence entre la balise div, la balise section et la balise acticle en HTML ?

Introduction :

Au départ, je pensais que ces trois balises avaient des fonctions similaires. Plus tard, après avoir vérifié les informations pertinentes, j'ai réalisé qu'il existe des différences entre elles.

(Partage de vidéos d'apprentissage : tutoriel vidéo HTML)

Présentons les différences entre eux :

1 élément div :

Il n'a lui-même aucune sémantique. Il est utilisé comme balise de mise en page et de style pour définir des partitions ou des sections dans le document, ce qui équivaut à un conteneur. Il est principalement utilisé sous forme de mise en page à grand cadre, ce qui signifie que le squelette de la page Web est principalement construit via div, tandis que la chair et le sang de la page Web sont complétés par des éléments tels que span, p ou ul.

2. Élément Section :

L'élément section est un élément structurel nouvellement ajouté en HTML5, qui a une sémantique supplémentaire. Représente un bloc de contenu dans la page, tel qu'un chapitre, un en-tête, un pied de page ou une autre partie de la page. Il peut être utilisé en combinaison avec h1, h2, h3, h4, h5, h6 et d'autres éléments pour marquer la structure du document.

3. Élément Article :

L'élément article est également un élément structurel nouvellement ajouté en HTML5, il s'agit d'une balise de section spéciale, qui a une sémantique plus claire que la section. Il représente un bloc indépendant et complet de contenu associé qui représente un élément de contenu indépendant sur la page qui n'est pas lié au haut et au bas, comme un article dans un blog.

Remarque : l'élément article peut être imbriqué et le contenu interne doit en principe être lié au contenu externe. Par exemple, dans un article de blog, les commentaires sur l'article peuvent être imbriqués à l'aide d'éléments article ; l'élément article utilisé pour présenter les commentaires est inclus dans l'élément article qui représente le contenu global. Le code imbriqué est le suivant :

<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>

Résumé :

div, section, article, la sémantique est créée de toutes pièces et enrichie progressivement. div n'a pas de sémantique et n'est utilisé que comme balise stylisée ou scriptée. Pour un élément de contenu thématique, la section est applicable, et si le contenu peut être séparé du contexte et utilisé comme un élément de contenu complet et indépendant, l'article est applicable. En principe, lorsque vous pouvez utiliser article, vous pouvez également utiliser section, mais en fait, s'il est plus approprié d'utiliser article, n'utilisez pas section.

Recommandations associées :

Tutoriel HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!