Semantics for HTML5 sub-pages

Question

It would be correct to use the code as below?

<article>
  ...
  <section>
    <article>...</article>
    <article>...</article>
    <article>...</article>
  </section>
</article>

If not, what would be the best way to relate the sub-pages to the main article?

Answer 1

Here is an excellent HTML5 Doctor article and the example it uses is very close to your view:

"A <article> with <section>s
You can use the element <section> to divide the <article> in logical content groups with titles"

An <article> with <section>s
You can use the <section> element to split the article into Logical groups of content with Headings:

<article>
  <h1>Apple varieties</h1>
  <p>The apple is the pomaceous fruit of the apple tree...</p>

  <section>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many supermarkets...</p>
  </section>

  <section>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies...</p>
  </section>

</article>

SOURCE: Here is the full article, other examples, and including an explanation of the difference between <article> and <section> in which he explains that the article has more semantic value than Section

• http://html5doctor.com/the-article-element/

---

TL;DR

There is much confusion about the difference between the elements <article> and <section>. The element <article> is a specialized type of <section>; has a more specific semantic meaning than <section> even because it is an independent and autonomous block of content. We could use <section>, but using <article> gives more semantic meaning to the content.

On the other hand, <section> is only a block of related content and <div> is just a block of content.

To decide which of these three elements is appropriate, choose the appropriate first option:

• Would content make sense alone in a feed reader? If so, use <article> (independent content)
• Is the content related? If so, use <section> (Section within the article)
• Finally, if there is no semantic relationship, use <div> (div inside the article)

(the above excerpt was removed from the cited article)

Now the words of Dr. Bruce Lawson:

About the article

The spec says "When article Elements are nested, the Inner article Elements represent Articles that are in principle Related to the Contents of the Outer article."

Simplified translation: When the elements articles are nested the articles within the articlerepresent articles that are in principle related to the content of article external".

About Section

Section, on the other hand, isn’t "a self-contained Composition in a Document, page, application, or site and that is intended to be independently distributable or reusable". It’s either a way of sectioning a page into Different Subject areas, or sectioning an article into ... well, sections.

Simplified translation: To section, on the other hand, it is not "a standalone composition in a document, page, application or website and that is intended to be distributed or reusable independently". Section is a way to split a page into different subject areas or to split a article in well... sections.

Source: http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/