Choosing Between article and section | HTML5 Tutorial pdf

Choosing Between article and section

Problem
You don’t know whether article or section is the most appropriate element to use on your web page.
Solution
Focus on your content and the semantic definitions of article and section.
 <article>
article can be considered a specialized form of section. It is intended for content that could stand on its own, outside of all surrounding content, such as “syndicatable” content like blog posts.
article is suitable for other types of content, including:
• Video and accompanying transcript
• News articles
• Blog comments
Often the name of an article or a blog post is in the title of the URI. If that’s the case with a page you are working on, that content should be wrapped in an article element.
As you saw in the code example in “Choosing Between article and section”, we used article to contain the individual blog posts:
<article>
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't mean that <em>all</em> links </article>
<article>
<h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what works best for you. So once </article>
<section>

section, meanwhile, is the most generic of the new structural elements, intended to simply group related content. However, it is not a generic container element like div.
The content it groups must be related.
This definition, applied to “Choosing Between article and section” , could mean the addition of section as the parent element for both instances of article:
<section>
<article>
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't mean that <em>all</em> </article>
<article>
<h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what works best for you. So </article>
</section>

This example meets the core criteria for section: the grouped content is thematically related.
“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.”
The document outline refers to HTML5’s new sectioning content model where each of the new structural elements creates its own self-contained outline. This outline is generated by the headings (h1-h6) contained in each element.
So, based on this context, if you want to use section, the content should have a natural heading.
Given this additional clarification, let’s modify the markup from “Choosing Between article and section” to include a heading for section:
<section>
<h1>Most Recent Blog Posts</h1>
<article>
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't mean that <em>all</em> </article>
<article>
<h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what works best for you. So 10 | Chapter 1: Fundamental Syntax & Semantics
</article>
</section>

Discussion

The difference between section and article can be confusing and, as the spec evolves, the path doesn’t seem to be getting much clearer. For the majority of use cases, though, considering these guidelines should help:
• Do not use section simply as a styling hook. Use divs and spans instead.
• Do not use section if header, footer, aside or article is more semantically appropriate for your content.
• Do not use section unless it has a natural heading.