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:
<article><header><h1>The Very First Rule of Life</h1><p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p></header><p>If there's a microphone anywhere near you, assume it's hot andsending whatever you're saying to the world. Seriously.</p><p>...</p><footer><a href="?comments=1">Show comments...</a></footer></article><article><header><h1>The Very First Rule of Life</h1><p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p></header><p>If there's a microphone anywhere near you, assume it's hot andsending whatever you're saying to the world. Seriously.</p><p>...</p><section><h1>Comments</h1><article><footer><p>Posted by: George Washington</p><p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p></footer><p>Yeah! Especially when talking about your lobbyist friends!</p></article><article><footer><p>Posted by: George Hammond</p><p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p></footer><p>Hey, you have the same first name as me.</p></article></section></article>
The difference between div section article in HTML5
article represents an independent fragment of document content, for example, a blog entry or a newspaper article, the article tag The content is independent of the rest of the document.
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.
When article is embedded with 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.
<article><a href="http://www.apple.com">Safari 5 released</a><br />7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,Apple announced the release of Safari 5 for Windows and Mac......</article>
Concise version of HTML5 study notes (2): new elements section, article, aside
The main function of article is to express independence, that is, this article can exist without the current web page Value and meaning, it can have its own set of header and footer structures.
What is the difference between section article in HTML5? How to understand header footer nav?