What is the difference between <article> and <section> in html5

Question

什么时候应该在 HTML5 中使用<article>和<section>标签？

Answer 1

The <section> tag:

The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

The <article> tag:

The article tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the article element:

• Forum post
• Blog post
• News story
• Comment

Basically these tags are semantic elements and the only real difference between them are readability and design preference.

You can read more about them here if you wish:

• http://www.w3schools.com/html/html5_semantic_elements.asp
• http://www.w3schools.com/tags/tag_article.asp
• http://www.w3schools.com/tags/tag_section.asp

Answer 2

Article tag

The article tag is used for wrapping an autonomous content on a page. A content is autonomous if it can be removed from the page and put on some another page.

Section tag

The section tag is similar to the div tag, but it is more meaningful since it wraps logical groups of related content (eg a chapter of an article).

More about semantic tags - https://www.pluralsight.com/guides/semantic-html

Answer 3

In addition to the above: let's take a movie as an example. The movie itself would be the article whereas each scene would be a section.

Answer 4

section tag

When you just want to decorate any content on your page ie you want to add some functions then you can use tag, which also can be replaced by the tag. The section tag will be good when the content of any web page is appropriate for the contents outline and browsers do not give any attention to the outlines.

article tag

The tag is a self-completed tag, this can be used for any of those reasons, where tag is required plus the tag place the content independently. Article tag can be used to place any social post, magazine article, blog, list of related contents, any independent content

If your content material contains the date, price, author, description, etc then go for the article tag. Basically use an article tag to contain content that could be shared and obviously for actual articles. Wrap your blog posts in them.

If your content contains any kind of procedure to make or create something that will depend on something then go for the section tag like a div, when it describes what your document outline would include.

Answer 5

@vijayscode's answer is crystal clear, I just add quotes of the standard and a real world example.

section

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

MDN emphasizes the heading presence even more:

Sections should always have a heading, with very few exceptions.

article

The article element represents a complete, or self-contained , composition in a document, page, application, or site and that is, in principle, independently distributable or reusable , eg in syndication. 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.

So what is the difference?

Look at sections Must see , Most watched , Full story on BBC news - they could be sections (albeit in the source they currently use more generic divs), they contain a heading and photo & link blocks which target to the main content somewhere else, so their meaning depends on other parts of the site. When you click on some of them, you land on a page that in its main content contains an article . It can exist independently to the rest of the site.

Complex articles can contain sections (like Perex, Conclusion or Sources). And sections can contain multiple short articles.

Answer 6

If you take the example of this page, The question can be wrapped in one section tag, answers in another, and composing new answer in another section tag. In the answers section, each answer can be inside an article tag. So, the section is used to define sections of the page, while an article is generally used for wrapping similar content, like, each blogpost in a list of blog posts. Hope this clears it up.