Detailed explanation of the differences between div, section and article in HTML5_html5 tutorial skills

When I first came into contact with HTML5, I was very uncomfortable with its tags, and I even felt a little disgusted with it. Especially for the tags div, section, and article, I really don’t know when they should be used.
div

HTML Spec:

The div element has no special meaning at all.

This tag is the one we see and use the most. It has no semantics per se and is used as a hook for layout and styling or scripting.
section

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

Contrary to the semantics of div, simply put, section is a div with semantics, but don’t think it’s really that simple. A section represents a topical piece of content, usually with a title. Seeing this, we may think that a blog post or a separate comment can just use section? Read next:

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

Article should be used instead of section when the content of the elements is aggregated to make more sense.

So, when should section be used? Read on:

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 articles, tabs in the tab dialog box, or numbered sections in the paper. The homepage of a website can be divided into sections such as introduction, news, and contact information. In fact, I am very interested in the information conveyed here, because I feel that section and artilce to be introduced below are more suitable for modular applications. This topic will be discussed in a special article in the future, so I will skip it here for now.

Be aware that the 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 an ordinary container tag. When a tag is just for styling or to facilitate scripting, div should be used. Generally speaking, a section is appropriate when the element's content appears explicitly in the document outline.

XML/HTML CodeCopy content to clipboard

1. article>     
2.     hgroup> h1>Applesh1> h2>Tasty, delicious fruit!h2> hgroup>  
3.     p>The apple is the pomaceous fruit of the apple tree.p>    
4.     section>    
5.         h1>Red Delicioush1>    
6.         p>These bright red apples are the most common found in many supermarkets.p>    
7.     section>    
8.     section>    
9.         h1>Granny Smithh1>  
10.         p>These juicy, green apples make a great filling for apple pies.p>    
11.     section>    
12. article>    

article

HTML Spec:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

article is a special section tag, which has clearer semantics than section. It represents an independent and complete block of related content. Generally, an article will have a title section (usually contained within the header) and sometimes a footer. Although a section is also a thematic piece of content, the article itself is independent and complete in terms of structure and content.

The HTML Spec then lists some applicable scenarios for article.

This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

When article is embedded in article, in principle, the content of the inner article is related to the content of the outer article. For example, in a blog post, the article containing user-submitted comments should be hidden within the containing blog post article.

The question is what counts as “complete independent content”? One of the easiest ways to tell is to see if the content is complete in the RSS feed. Check whether the content is complete and independent without its context.

Example:

XML/HTML CodeCopy content to clipboard

1. article>     
2.     header>    
3.         h1>The Very First Rule of Lifeh1>    
4.         p>time pubdate datetime="2009-10-09T14:28-08:00">time>p>  
5.     header>    
6.     p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.p>    
7.     p>...p>    
8.     footer>  
9.         a href="?comments=1">Show comments...a>  
10.     footer>    
11. article>  
12.   
13. article>     
14.     header>    
15.         h1>The Very First Rule of Lifeh1>  
16.         p>time pubdate datetime="2009-10-09T14:28-08:00">time>p>    
17.     header>  
18.     p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.p>    
19.     p>...p>    
20.     section>  
21.         h1>Commentsh1>    
22.         article>  
23.             footer>  
24.                 p>Posted by: George Washingtonp>  
25.                 p>time pubdate datetime="2009-10-10T19:10-08:00">time>p>    
26.             footer>  
27.             p>Yeah! Especially when talking about your lobbyist friends!p>    
28.         article>    
29.           article>  
30.             footer>    
31.                 p>Posted by: George Hammondp>  
32.                 p>time pubdate datetime="2009-10-10T19:15-08:00">time>p>  
33.             footer>  
34.             p>Hey, you have the same first name as me.p>  
35.         article>    
36.     section>    
37. article>    

总结

div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体。

因为其实有些时候每个人都有自己的看法，所以难免有难于决断的时候，怎么办？

在 HTML5 设计原理 中，有一条是专门用来解决类似情况的：

最终用户优先(Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

推荐各位多读几遍 HTML5 设计原理，这才是纷繁世界背后的最终奥义。