Was ist der Unterschied zwischen div-Tag, section-Tag und acticle-Tag in HTML?

Einleitung:

Ursprünglich dachte ich, dass diese drei Etiketten ähnliche Funktionen haben. Später, nachdem ich die relevanten Informationen überprüft hatte, wurde mir klar, dass es Unterschiede zwischen ihnen gibt.

(Lernvideo-Sharing: HTML-Video-Tutorial)

Lassen Sie uns die Unterschiede zwischen ihnen vorstellen:

1. div-Element:

Es hat keine Semantik und wird für Layout- und Styling-Tags verwendet Abschnitt im Dokument, der einem Container entspricht. Es wird hauptsächlich als großes Frame-Layout verwendet, was bedeutet, dass das Grundgerüst der Webseite hauptsächlich durch div aufgebaut wird, während das Fleisch und Blut der Webseite durch Elemente wie span, p oder ul vervollständigt wird.

2. Abschnittselement:

Das Abschnittselement ist ein neu hinzugefügtes Strukturelement in HTML5, das über weitere Semantik verfügt. Stellt einen Inhaltsblock auf der Seite dar, z. B. ein Kapitel, eine Kopfzeile, eine Fußzeile oder einen anderen Teil der Seite. Es kann in Kombination mit h1, h2, h3, h4, h5, h6 und anderen Elementen verwendet werden, um die Dokumentstruktur zu markieren.

3. Artikelelement:

Das Artikelelement ist ebenfalls ein neu hinzugefügtes Strukturelement in HTML5. Es handelt sich um ein spezielles Abschnitts-Tag, das eine klarere Semantik als Abschnitt hat. Es stellt einen unabhängigen, vollständigen Block zusammengehöriger Inhalte dar, der einen unabhängigen Inhalt auf der Seite darstellt, der nicht mit dem oberen und unteren Rand in Zusammenhang steht, beispielsweise ein Artikel in einem Blog.

Hinweis: Das Artikelelement kann verschachtelt werden und der innere Inhalt muss grundsätzlich mit dem äußeren Inhalt in Beziehung stehen. Beispielsweise können in einem Blog-Beitrag Kommentare zum Artikel mithilfe von Artikelelementen verschachtelt werden; das Artikelelement, das zur Darstellung der Kommentare verwendet wird, ist in dem Artikelelement enthalten, das den Gesamtinhalt darstellt. Der verschachtelte Code lautet wie folgt:

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

Zusammenfassung:

div, Abschnitt, Artikel, die Semantik wird von Grund auf neu erstellt und schrittweise verbessert. div hat keine Semantik und wird nur als gestaltetes oder skriptbasiertes Tag verwendet. Für einen thematischen Inhalt gilt der Abschnitt. Wenn der Inhalt vom Kontext getrennt und als vollständiger und unabhängiger Inhalt verwendet werden kann, gilt der Artikel. Wenn Sie Artikel verwenden können, können Sie im Prinzip auch Abschnitt verwenden. Wenn die Verwendung von Artikel jedoch angemessener ist, verwenden Sie Abschnitt nicht.

Verwandte Empfehlungen: HTML-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen div-Tag, section-Tag und acticle-Tag in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!