Detailed explanation of the differences between div, section and article in HTML5

This article mainly introduces the details of the difference between div, section and article in HTML5. It is quoted from W3C and listed with code examples. Friends who need it can refer to it.

When I first started to come into contact with HTML5, I was very uncomfortable with its tags and even felt a little disgusted at one point. Especially for div, section, article tags, I really can't figure out what occasions to use.

HTML Spec:

The div element has no special meaning at all.

This tag is the most commonly used tag we see and use the most. It has no semantics itself, and is used as a hook for layout and styling or scripting.

HTML Spec: The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

In contrast to the semantics of div, simply section is a div with semantics, but don't think it's really that simple. section represents a section of topical content, usually with a title. After seeing this, we may think that wouldn’t a blog post or a separate comment be just right to use section? Next look:

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

When the contents of the element are more meaningful, an article should be used to replace the section.

So, when should section be used? Let's continue to see:

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site 's home page could be split into sections for an introduction, news items, and contact information.

Typical scenarios for section application include chapters of the article, tab pages in the tag dialog box, or numbered parts in the paper. The homepage of a website can be divided into several parts such as introduction, news and contact information. Actually, I am very interested in conveying the information here, because I feel that section and the artilce to be introduced below are more suitable for modular applications. This topic will be discussed in the future, and I will skip it here for now.

Be aware that W3C also warns:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element 's contents would be listed explicitly in the document 's outline.

section is more than just a normal container tag. When a tag is just for styling or easy to use in scripts, div should be used. Generally speaking, section applies when the element content explicitly appears in the document outline.