Semantics for subpages in HTML5

Question:

Would it 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:

Here's an excellent article on HTML5 Doctor and the example he uses is very close to yours:

"An <article> with <section> s
You can use the <section> element to divide the <article> into logical groups of content 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's the full article, other examples, and even an explanation about the difference between <article> and <section> in which he explains that the article has more semantic value than the section


TL;DR

There is a lot of confusion about the difference between the <article> and <section> elements. The <article> element is a specialized type of <section> ; it has a more specific semantic meaning than <section> 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 just a block of related content and <div> is just a block of content.

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

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

(the excerpt above was taken 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 article elements are nested, the article s inside the article s represent articles that, in principle, are related to the contents of the external article ".

about the 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: section , on the other hand, is not “a stand-alone composition in a document, page, application or website and which is intended to be independently distributed or reusable”. Section is a way to divide a page into different subject areas or to divide an article into well… sections.

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

Scroll to Top
AllEscort