What is the difference between div tag, section tag and acticle tag in HTML?

Introduction:

I originally thought that these three tags have similar functions. Later, after checking the relevant information, I realized that there are differences between them. .

(Learning video sharing: html video tutorial)

Let’s introduce the differences between them:

1. div element:

It does not have any semantics. It is used as a layout and styling tag to define partitions or sections in the document, which is equivalent to a container. It is mainly used as a large frame layout, which means that the skeleton of the web page is mainly built through div, while the flesh and blood of the web page is completed by elements such as span, p or ul.

2. Section element: The

section element is a newly added structural element in HTML5, which has further semantics. Represents a content block in the page, such as a chapter, header, footer, or other part of the page. It can be used in combination with h1, h2, h3, h4, h5, h6 and other elements to mark the document structure.

3. Article element:

The article element is also a newly added structural element in HTML5. a is a special section tag, which has clearer semantics than section. It represents an independent, complete block of related content that represents a piece of independent content on the page that is not related to the top and bottom, such as an article in a blog.

Note: The article element can be nested, and the inner content needs to be associated with the outer content in principle. For example, in a blog post, comments on the article can be nested using article elements; the article element used to present the comments is included in the article element that represents the overall content. The nested code is as follows:

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

Summary:

The semantics of div, section, and article are created from scratch and gradually enhanced. div has no semantics and is only used as a styled or scripted tag. For a piece of thematic content, section is applicable, and if the content can be separated from the context and used as a complete and independent piece of content, article is applicable. In principle, when you can use article, you can also use section, but in fact, if using article is more appropriate, then don’t use section.

Related recommendations: html tutorial

The above is the detailed content of What is the difference between div tag, section tag and acticle tag in HTML?. For more information, please follow other related articles on the PHP Chinese website!