Explain the difference between Div and section and article in HTML5

Just beginning to contact with HTML5, the label of it is very uncomfortable, and even a bit disgusted. Especially for the Div, section, article these tags, it is not clear what should be used in the situation.

Div

HTML Spec:

The DIV element has no special meaning at all.

This label is one of the most frequently used tags we have ever seen. There is no semantics in itself, used as a layout and as a style or script hook (hooks).
Section

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

As opposed to the semantics of the DIV, it simply says that the section is a div with semantics, but don't think it's really that simple. Section represents a topic-specific content, usually with a title. See here, we may think, then a blog post, or a separate comment is not just the right to use section? Next look:

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

When element content is aggregated more yanzhiyouwu, you should replace the section with article.

So when should the section be used? And then look:

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

Section applies a typical scene an article chapters, tabs in a tabbed dialog box, or a numbered portion of a paper. The homepage of a Web site can be divided into profiles, news, and contact information. In fact, I am very interested in conveying the information here, because the sense of section and the following to introduce the artilce more suitable for modular applications, this topic will be a special article to discuss, here for a moment skip.

Note that the consortium also warns that:

The section element is not a generic container element. When you are needed for styling purposes or as a convenience for scripting, authors are encouraged to use the Div el Ement instead. "A" is "that" the section element is appropriate only if the element ' s contents would to be listed explicitly in the Document ' s outline. '

The section is more than just a normal container label. Div should be used when a tag is just for styling or for scripting purposes. In general, the section is true when the element content is explicitly present in the document outline.

xml/html Code copy content to clipboard

1. <article>
3. <p>the Apple is the pomaceous fruit of the Apple tree.</p>
4. <section>
6. <p>these bright red apples are the most common found in many supermarkets.</p>
7. </section>
8. <section>
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 which, in Prin Ciple, independently distributable or reusable, e.g. in syndication.

Article is a special section label that has a more explicit semantics than sections and represents a separate, complete piece of related content. In general, article will have a header section (usually included in the header) and sometimes a footer. Although the section is also subject to a piece of content, but in terms of structure or content, article itself is independent and complete.

The HTML Spec is followed by a list of scenarios that article applies to.

This could is 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 inline article, in principle, the internal article content is related to the outer article content. For example, in a blog post, the article that contains comments submitted by users should abscond in the article that includes blog posts.

The question is, what is the "complete and independent content"? One of the easiest ways to determine this is to see if the content is complete in the RSS feed. See if this piece of content is divorced from the context in which it is, and whether it is complete or independent.

Example:

xml/html Code copy content to clipboard

1. <article>
3. <p><time pubdate datetime= "2009-10-09t14:28-08:00" ></TIME></P>
5. <p>if There ' a microphone anywhere near you, assume it's hot and sending whatever you ' re saying to the World. Seriously.</p>
6. <p>...</p>
7. <footer>
8. <a href= "? Comments=1" > Show Comments...</a>
9. </footer>
10. </article>
11.  
12. <article
15. <p><time Pu Bdate datetime= "2009-10-09t14:28-08:00" ></TIME></P>
17. <p>If There ' s a microphone anywhere near you, assume it's hot and sending whatever you ' re saying to the world. Seriously.</p>
18. <p>...</p>
19. <section>
21. <article>
22. <foote R>
23. <p>posted by:george washington</p>
24. <p><time pubdate datetime= "2009-10-1 0t19:10-08:00 "></time></p>
25. </footer>
26. <p>yeah! Especially when talking about your lobbyist friends!</p>
27. </article>
28. <article>
29. <footer>
30. <p>posted by:george hammond</p>
31. <p><time pubdate datetime= "2009-10-10t19:15-08:00" ></TIME></P>
32. </footer>
33. <p>hey, you have the same name as Me.</p>
34. </article>
35. </section>
36. </article>

Summarize

div section article, semantics is from scratch, gradually enhanced. Div without any semantics, only used as a style or scripted hook (hook) for a thematic content, it applies to the section, and if this content can be separated from the context, as a complete independent existence of a piece of content, then apply article. In principle, when you can use article, you can also use section, but in fact, if the use of article is more appropriate, then do not use section. The same is true with the use of NAV and aside, which are also special section, and do not use section when using NAV and aside more appropriately.

The distinction between Div and section, article, and other tags is simple. The distinction between the section and the article at first glance difficult, in fact, the key is to see whether this piece of content out of the whole is still able to as a complete, independent content, which is the focus of the whole body. Because in fact said that the section contains content can also count as a separate piece, but it can only be considered as part of the overall composition, article is a complete whole.

Because in fact, sometimes everyone has their own views, so it is difficult to decide the time, how to do?

In the HTML5 design principle, one is specifically designed to address a similar situation:

End user Priority (Priority of constituencies)

In the case of conflict, consider users over the authors over the implementors over the specifiers over theoretical. "Once you encounter a conflict, the end user is superior First, the second is the author, followed by the implementation, followed by the standard-makers, the final is theoretically perfect.

Recommend you read more than a few times HTML5 design principle, this is the end of the complex world of the ultimate Austrian righteousness.